Awesome
Yogi Starter Kit <br> <small><em>for Backlight</em></small>
Yogi is a Design System Starter Kit based on chakra. It configures Chakra with sensible defaults, makes it ready for your extensions where needed and lays a foundation for your future documentation.
Features
- ♻️ Open source
- 🔥 50+ accessible components
- 🎨 Tokens-based theming system
- ⚛️ Default Chakra's Design Tokens embedded
- 📖 Chakra's components documentation embedded
- 📚 Interactive documentation
- 🌗 Dark mode support (coming soon)
Design Tokens
Yogi takes the design tokens as in Chakra-UI as well as advanced ones:
- Typography
- Colors
- Spacing
- Sizes
- Shadows
- Border & Radius
- Z-indexes
and make them automatically documented and visually discoverable.
Components
Yogi comes with 40+ components to get started: menu, dialog, buttons, checkbox, cards, 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, go to the Backlight website 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 Yogi card, this will create a project based on this starter kit for you.
Duplicate in Backlight
Make sure you have a Backlight Workspace, then go to yogi-starter on backlight and click the Duplicate button in the top right corner to fork it.
Documentation
Design System Documentation
Yogi is shipped with a good documentation basis which starts in the 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.