Introducing BRICKS - a Design System based on MUI

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.