https://github.com/divriots/starter-bricks
React MUI starter kit
https://github.com/divriots/starter-bricks
Last synced: about 1 year ago
JSON representation
React MUI starter kit
- Host: GitHub
- URL: https://github.com/divriots/starter-bricks
- Owner: divriots
- License: mit
- Created: 2021-10-04T10:14:32.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2023-08-28T14:56:03.000Z (almost 3 years ago)
- Last Synced: 2024-04-23T20:25:15.373Z (about 2 years ago)
- Language: TypeScript
- Homepage: https://backlight.dev/view/k0DvZztNuwmS6XnXoohE
- Size: 1.11 MB
- Stars: 7
- Watchers: 5
- Forks: 3
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://backlight.dev/review/k0DvZztNuwmS6XnXoohE)
[](https://github.com/divriots/starter-bricks)
# BRICKS Starter Kit
BRICKS is a Design System Starter Kit based on [MUI](https://mui.com/):
> 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](https://mui.com/customization/theming/#theme-configuration-variables)
as well as advanced ones:
- [Colors](https://backlight.dev/doc/k0DvZztNuwmS6XnXoohE/colors/doc/colors)
- [Fonts](https://backlight.dev/doc/k0DvZztNuwmS6XnXoohE/fonts/doc/fonts)
- [Spacing](https://backlight.dev/doc/k0DvZztNuwmS6XnXoohE/spacing/doc/spacing)
- [Breakpoints](https://backlight.dev/doc/k0DvZztNuwmS6XnXoohE/breakpoints/doc/breakpoints)
- [Z-Indexes](https://backlight.dev/doc/k0DvZztNuwmS6XnXoohE/z-index/doc/z-index)
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](https://backlight.dev/starter-kits) 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](https://backlight.dev/edit/k0DvZztNuwmS6XnXoohE/)
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](https://backlight.dev/doc/k0DvZztNuwmS6XnXoohE/introduction/doc/index.mdx)
and then walks you through the usage of tokens and components.
Just open it and start exploring!
### Backlight Documentation
We created [DS Mastery](https://backlight.dev/mastery/) to help you become a hero in
the design system development.
To learn about Backlight features there is an
[official documentation](https://backlight.dev/docs/) too.
## Contributing
Feel free to contribute by `duplicate` the project in Backlight then open your PR on this repository.