Skip to content

divriots/starter-bricks

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

38 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

backlight.dev Github Repo

BRICKS Logo

BRICKS Starter Kit

BRICKS is a Design System Starter Kit based on MUI:

a simple and customizable component library to build faster, beautiful, and more accessible React applications

It configures MUI with sensible defaults, makes it ready for your extensions where needed, and lays a foundation for your future documentation.

Features

  • ♻️ Open source
  • 🔥 ~50 components in 7 categories
  • 🎨 Tokens-based theming system
  • 🧱 MUI's compatible theme generated with createTheme
  • 📖 MUI's components documentation embedded
  • 📚 Interactive documentation
  • 🌗 Dark mode support

Design Tokens

BRICKS takes the Design Tokens as in MUI Theme Configuration Variables as well as advanced ones:

and make them automatically documented and visually discoverable.

Components

BRICKS comes with +40 components to get started, in 7 categories: Inputs, Data-display, Feedback, Surfaces, Navigation, Layout, and Date/Time. Everything to cover the basics, and more.

Usage

Getting Started in Backlight (recommended)

This is the recommended way, as Backlight gives you an all-in-one Design system platform.

In order to create your own project from this Starter Kit using Backlight, and sign up or log in if you already have an account. Make sure you have a workspace, then go to the Backlight starter-kits list and click the BRICKS card. It will create a project based on this starter kit for you.

Duplicate in Backlight

Make sure you have a Backlight Workspace, then go to starter-bricks on backlight and click the Duplicate button in the top bar to fork it.

Documentation

Design System Documentation

BRICKS is shipped with a good documentation basis which starts in this introduction and then walks you through the usage of tokens and components. Just open it and start exploring!

Backlight Documentation

We created DS Mastery to help you become a hero in the design system development.

To learn about Backlight features there is an official documentation too.

Contributing

Feel free to contribute by duplicate the project in Backlight then open your PR on this repository.