Originally published at https://backlight.dev on December 10, 2021.
BRICKS is a design system starter-kit based on MUI, a react UI library providing customizable and accessible components.
BRICKS features:
- ♻️ Open source
- 🧱 Based on MUI
- 🧩 50+ accessible components
- 📚 Interactive documentation
- 🌗 Dark mode out of the box
Design Tokens
The starter kit is built around six main tokens: Colors, Font, Spacing, Breakpoints, z-index, theme.
Dark mode
Dark and Light themes are supported out-of-the-box. You can test it directly on any doc page.
Components
BRICKS comes with 50+ components to get started: menu, dialog, buttons , checkbox, cards, everything to cover the basics and more.
Stories
CSF Stories are available for every component allowing you to code your components in isolation and check all variations.
Documentation
The documentation, Written in MDX, is displayed next to the code to ensure a smooth learning curve and quick onboarding for anyone joining the project.
The documentation also includes interactive playgrounds.
Further reading
Check all other Backlight’s starter kits.