YOGI is a React Design System starter-kit for Backlight, based on Chakra UI. Building a Design System from scratch is a really hard and tedious task and as we love the Developers’ community we made our mission to built starter-kits for every possible technology, so we built YOGI: you can now start your React Design System based on Chakra UI in Backlight!
- ♻️ Open source
- 🤘 Based on Chakra UI’s components
- 🔥 Design Tokens in System-UI
- 🧩 40+ accessible components
- 📚 Interactive documentation
- 🎨 Figma library
The starter kit is built around nine main tokens: Colors, Typography, Size, Space, Shadows, Radii, Border, Z-index and Theme
YOGI comes with 40+ components to get started: menu, dialog, buttons , checkbox, cards, everything to cover the basics and more.
CSF Stories are available for every component allowing you to code your components in isolation and check all variations.
Written in MDX, the documentation is available next to the code to ensure a shallow learning curve as well as an easy onboarding for anyone joining the project. The documentation includes interactive playgrounds.
YOGI Figma library is available next to the code to ensure Developers-Designers alignment. We built the library based on Chakra UI Figma Kit
- ▶️ Explore YOGI now on Backlight.dev
- 👩💻 Source code available on Backlight and GitHub
- 📦 npm package [missing link] to try YOGI unchanged.
Check all other Backlight’s starter kits.