https://github.com/divriots/starter-yogi
https://github.com/divriots/starter-yogi
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/divriots/starter-yogi
- Owner: divriots
- License: mit
- Created: 2021-02-18T07:08:08.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-03-25T10:43:52.000Z (about 4 years ago)
- Last Synced: 2025-05-04T07:45:58.253Z (about 1 year ago)
- Language: TypeScript
- Size: 1.06 MB
- Stars: 13
- Watchers: 8
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://backlight.dev/review/sNbJipmRTmslL3f8RZaO)
[](https://github.com/divriots/starter-yogi)
# Yogi Starter Kit
for Backlight
Yogi is a Design System Starter Kit based on [chakra](https://chakra-ui.com/). 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](https://chakra-ui.com/docs/theming/theme) 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](https://backlight.dev/) 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 **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](https://backlight.dev/edit/sNbJipmRTmslL3f8RZaO/) 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](https://backlight.dev/doc/sNbJipmRTmslL3f8RZaO/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.