All Projects → Khan → wonder-blocks

Khan / wonder-blocks

Licence: MIT license
React components for Wonder Blocks design system.

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to wonder-blocks

Blocks.css
Add some dimension to your page with blocks 🚀
Stars: ✭ 330 (+200%)
Mutual labels:  ui-components, design-system
Eva
💫Customizable Design System easily adaptable to your Brand.
Stars: ✭ 843 (+666.36%)
Mutual labels:  ui-components, design-system
Daisyui
⭐️ ⭐️ ⭐️ ⭐️ ⭐️  Tailwind Components
Stars: ✭ 382 (+247.27%)
Mutual labels:  ui-components, design-system
elements
Lovingly crafted ui components based on web components. Works well with all Frameworks - including Angular, React and Vue.
Stars: ✭ 42 (-61.82%)
Mutual labels:  ui-components, design-system
Vitamin Web
Decathlon Design System libraries for web applications
Stars: ✭ 70 (-36.36%)
Mutual labels:  ui-components, design-system
visage
Visage design system
Stars: ✭ 12 (-89.09%)
Mutual labels:  ui-components, design-system
Sugui Design System
A design system template for the SugUI components library based on styleguidist
Stars: ✭ 17 (-84.55%)
Mutual labels:  ui-components, design-system
sodium-ui
Sodium is a simple, modular and customizable web component library to build elegant and accessible UI pieces for your React Application.
Stars: ✭ 23 (-79.09%)
Mutual labels:  ui-components, design-system
Website
Website and documentation for Radix.
Stars: ✭ 45 (-59.09%)
Mutual labels:  ui-components, design-system
Axiom React
Axiom - Brandwatch design system and React pattern library
Stars: ✭ 41 (-62.73%)
Mutual labels:  ui-components, design-system
bui
‹b› Web components for creating applications – built by Blackstone Publishing using lit-html and lit-element
Stars: ✭ 29 (-73.64%)
Mutual labels:  ui-components, design-system
carbon-components-svelte
Svelte implementation of the Carbon Design System
Stars: ✭ 1,615 (+1368.18%)
Mutual labels:  ui-components, design-system
React Native Magnus
A Utility-First React Native UI Framework 🚀🧩
Stars: ✭ 640 (+481.82%)
Mutual labels:  ui-components, design-system
Quick Free Bootstrap Theme
Free Bootstrap 4 Theme perfect for building responsive, mobile-first projects on the web suitable for businesses, startups, and agencies.
Stars: ✭ 31 (-71.82%)
Mutual labels:  ui-components, design-system
Css
The CSS design system that powers GitHub
Stars: ✭ 10,670 (+9600%)
Mutual labels:  ui-components, design-system
open design system
Open Source Design System using Sketch. It's early days of my project.
Stars: ✭ 22 (-80%)
Mutual labels:  ui-components, design-system
SwiftUI-Color-Kit
SwiftUI Color Pickers, Gradient Pickers And All The Utilities Needed To Make Your Own!
Stars: ✭ 120 (+9.09%)
Mutual labels:  ui-components
jqlouds
☁️ An awesome yet simple plugin for jquery that let's you create clouds on the fly.
Stars: ✭ 54 (-50.91%)
Mutual labels:  ui-components
vuestic-ui
Free and Open Source UI Library for Vue 3 🤘
Stars: ✭ 1,501 (+1264.55%)
Mutual labels:  ui-components
vitamin-android
Decathlon Design System UI components for Android applications
Stars: ✭ 34 (-69.09%)
Mutual labels:  design-system

Wonder Blocks

CircleCI codecov

The Khan Academy Wonder Blocks design system. This is work-in-progress and a lot of things are still in motion.

More information: https://wonder-blocks.netlify.com/

Getting started

Prerequisites

Installation

To install Wonder Blocks, you need to run the following commands:

yarn install

Installs project dependencies

yarn start

Runs the docs in dev mode

Now you can open http://localhost:6060 to view the docs. This page will automatically update as you make changes to components.

Contributing

Note for external contributors: We are not accepting external contributions at this time. We are working to make this happen in the future, and we will let you know when this is possible!

For a more detailed explanation about how to develop Wonder Blocks components, please refer to the internal documentation

Please note – before contributing ensure that any design changes you are wanting to make are reflected in the Wonder Blocks project in Figma or Zeplin. We previously used Zeplin, but have since moved to Figma. Please check Figma first — if a design isn't there please check Zeplin. Moving forward we will be transitioning away from Zeplin, but in the interim you may need to check both.

Thanks

Thanks to Chromatic for providing the visual testing platform that helps us catch unexpected changes on time.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].