Get started with sugarcube

Sugarcube is a toolkit that helps you implement your design system in code. It automatically detects your project structure, sets up design tokens, and generates CSS variables and utility classes with zero configuration required.

Your design tokens are processed into CSS variables and written to CSS files. These files power your layouts and components, with changes reflected instantly through automatic CSS regeneration.

This creates a consistent, maintainable front-end and unlocks powerful theming capabilities.

Read more about what problems sugarcube solves and the philosophy behind the project in the principles section.

Or, to see the kinds of sites sugarcube makes trivial to build, activate the theme switcher in the top right corner of the page.

Quick start

  1. Initialize sugarcube

    In the root of your project, run the init command:

    pnpm dlx make-sugarcube@latest init
    npx make-sugarcube@latest init
    yarn make-sugarcube@latest init
    bunx --bun make-sugarcube@latest init

    That’s it! Sugarcube will:

    • Auto-detect your project framework (Next.js, Astro, Vite, etc.)
    • Detect existing design tokens or install a starter kit
    • Generate CSS variables, utility classes, and the _sugarcube.css index file
    • Install CUBE CSS architecture
    • Create a minimal config file
    • Automatically install and configure the appropriate build plugin

    No interactive prompts, no complex setup. Sugarcube figures out the best defaults for your project automatically.

  2. Import your CSS

    Import the generated CSS file(s) into your project:

    // src/main.jsx
    import '@/src/styles/_sugarcube.css'
    // src/app/layout.jsx
    import '@/src/styles/_sugarcube.css'
    ---
    // src/layouts/Layout.astro
    import '@/src/styles/_sugarcube.css'
    ---
    <!-- index.html -->
    <link rel="stylesheet" href="/styles/_sugarcube.css">

    These examples show common frameworks, but you can use sugarcube in any project.

  3. Start your build process

    Run your development server:

    pnpm run dev
    npm run dev
    yarn run dev
    bun run dev

    The build plugin is already installed and configured! Your CSS will automatically regenerate when you change tokens.

  4. What’s next?

    Your Sugarcube setup is complete! Here are some things you can do:

    • Customize tokens - Edit the JSON files in src/design-tokens/
    • Add components - Run make-sugarcube components to add UI components
    • Explore CUBE CSS - Check out the generated CSS architecture
    • Learn more - Read our guides on design tokens and CUBE CSS

Next steps