The Khan Academy Wonder Blocks design system. This is work-in-progress and a lot of things are still in motion.
More information: https://khan.github.io/wonder-blocks/
To install Wonder Blocks, you need to run the following commands:
Installs project dependencies
Runs the docs in dev mode
Now you can open http://localhost:6061 to view the docs. This page will automatically update as you make changes to components.
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.
Thanks to Chromatic for providing the visual testing platform that helps us catch unexpected changes on time.