https://github.com/sugarcube-sh/sugarcube
Design tokens in, CSS and components out.
https://github.com/sugarcube-sh/sugarcube
cli component-library css cube-css design-systems design-tokens design-tokens-format-module react vite-plugin
Last synced: 5 days ago
JSON representation
Design tokens in, CSS and components out.
- Host: GitHub
- URL: https://github.com/sugarcube-sh/sugarcube
- Owner: sugarcube-sh
- License: mit
- Created: 2026-02-10T09:16:47.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2026-06-21T03:18:48.000Z (18 days ago)
- Last Synced: 2026-06-21T05:10:33.501Z (18 days ago)
- Topics: cli, component-library, css, cube-css, design-systems, design-tokens, design-tokens-format-module, react, vite-plugin
- Language: TypeScript
- Homepage: https://sugarcube.sh
- Size: 1.97 MB
- Stars: 114
- Watchers: 3
- Forks: 4
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
Awesome Lists containing this project
README
sugarcube
Design tokens in, CSS & components out
---
Sugarcube is a tool for building front ends on [DTCG design tokens](https://www.designtokens.org/). It connects your tokens to CSS variables, utility classes, CUBE CSS, and copy-to-own components — via the Vite plugin or CLI.
## Quick start
```bash
npx @sugarcube-sh/cli init
```
This walks you through setup: starter tokens, CUBE CSS, components, and Vite plugin. The CLI is installed locally, so you can use `sugarcube` going forward.
**With the Vite plugin:**
```ts
// vite.config.ts
import sugarcube from "@sugarcube-sh/vite";
export default {
plugins: [sugarcube()],
};
```
```ts
import "virtual:sugarcube.css";
```
**Without the Vite plugin:**
```bash
sugarcube generate
```
Or add it to your npm scripts:
```json
{
"scripts": {
"styles:generate": "sugarcube generate",
"styles:generate:watch": "sugarcube generate --watch",
"tokens:validate": "sugarcube validate"
}
}
```
## Documentation
[sugarcube.sh/docs](https://sugarcube.sh/docs)
## Packages
| Package | Description |
|---------|-------------|
| [`@sugarcube-sh/cli`](https://npmx.dev/package/@sugarcube-sh/cli) | CLI for initialization, generation, and components |
| [`@sugarcube-sh/vite`](https://npmx.dev/package/@sugarcube-sh/vite) | Vite plugin with HMR |
| [`@sugarcube-sh/core`](https://npmx.dev/package/@sugarcube-sh/core) | Core token processing |
## License
See [LICENSE.md](./LICENSE.md).