https://github.com/khan/wonder-blocks

React components for Wonder Blocks design system.
https://github.com/khan/wonder-blocks

design-system react ui-components

Last synced: about 1 month ago
JSON representation

React components for Wonder Blocks design system.

• Host: GitHub
• URL: https://github.com/khan/wonder-blocks
• Owner: Khan
• License: mit
• Created: 2018-02-27T22:50:41.000Z (over 8 years ago)
• Default Branch: main
• Last Pushed: 2026-03-26T19:16:30.000Z (3 months ago)
• Last Synced: 2026-03-26T19:30:53.922Z (3 months ago)
• Topics: design-system, react, ui-components
• Language: TypeScript
• Homepage: https://khan.github.io/wonder-blocks
• Size: 44.2 MB
• Stars: 159
• Watchers: 51
• Forks: 13
• Open Issues: 18
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Agents: AGENTS.md

Awesome Lists containing this project

README

          
#  Wonder Blocks

![Release](https://github.com/Khan/wonder-blocks/actions/workflows/release.yml/badge.svg) [![codecov](https://codecov.io/gh/Khan/wonder-blocks/branch/main/graph/badge.svg)](https://codecov.io/gh/Khan/wonder-blocks)

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/

## Getting started

### Prerequisites

- [Node.JS v20.x](https://nodejs.org/en/download)

- [pnpm](https://pnpm.io/installation)

### Installation

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

#### `pnpm install`

Installs project dependencies

#### `pnpm dev`

Builds all the packages and watches for changes

#### `pnpm start`

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.

**AI agents / Storybook MCP:** To use the Wonder Blocks MCP from another project (e.g. Cursor), clone this repo, run `pnpm install` and `pnpm start`, then add `http://localhost:6061/mcp` to your MCP client config (e.g. `mcp.json`). See [AGENTS.md](./AGENTS.md) for full install steps and agentic workflows.

## 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](https://khanacademy.atlassian.net/wiki/spaces/FRONTEND/pages/100827261/Developing+wonder-blocks)

Please note – before contributing ensure that any design changes you are wanting

to make are reflected in the [Wonder Blocks project in

Figma](https://khanacademy.atlassian.net/wiki/spaces/WB/pages/4396089552/Resources#Figma).

## Thanks



Thanks to [Chromatic](https://www.chromaticqa.com/) for providing the visual testing platform that helps us catch unexpected changes on time.