Yogi card marked "Powered by" Chakra UI, React, emotion, and System-UI

Introducing Yogi - a Chakra UI Design System

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!

YOGI features:

  • ♻️ Open source
  • 🤘 Based on Chakra UI’s components
  • 🔥 Design Tokens in System-UI
  • 🧩 40+ accessible components
  • 📚 Interactive documentation
  • 🎨 Figma library

Design Tokens

The starter kit is built around nine main tokens: Colors, Typography, Size, Space, Shadows, Radii, Border, Z-index and Theme

The Radii Design Tokens code and preview in Yogi at Backlight.dev


YOGI comes with 40+ components to get started: menu, dialog, buttons , checkbox, cards, everything to cover the basics and more.

The list of components in Yogi


CSF Stories are available for every component allowing you to code your components in isolation and check all variations.

The radio component in Yogi with code and stories preview at Backlight.dev


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.

The checkbox component documentation in Yogi

FIGMA integration

YOGI Figma library is available next to the code to ensure Developers-Designers alignment. We built the library based on Chakra UI Figma Kit

The Figma integration preview at Backlight showing the button component variants

Further reading

Check all other Backlight’s starter kits.