Using Sugarcube with Vite

This guide covers how to use Sugarcube with standalone Vite projects. For a complete introduction to Sugarcube, including initialization and basic usage, see our quick start guide and using Sugarcube documentation.

If you’re using a framework that uses Vite (like Astro or 11ty), see their respective guides.

Basic Setup

  1. Initialize Sugarcube in your project:
pnpm dlx make-sugarcube@latest init
npx make-sugarcube@latest init
yarn make-sugarcube@latest init
bunx --bun make-sugarcube@latest init
  1. Import your generated CSS in your Vite project:
src/main.js
import './styles/global/variables/tokens.variables.css'

Optional Plugin

For the best development experience, we recommend using our Vite plugin. This will automatically regenerate your CSS when you make changes to your design tokens.

pnpm add @sugarcube-org/vite
npm install @sugarcube-org/vite
yarn add @sugarcube-org/vite
bun add @sugarcube-org/vite

Add the plugin to your Vite configuration:

vite.config.js
import { defineConfig } from 'vite'
import sugarcube from '@sugarcube-org/vite'


export default defineConfig({
  plugins: [sugarcube()]
})

Using Your Tokens

Now you can use your token-generated CSS variables in your project:

body {
  background-color: var(--surface-primary);
  color: var(--text-primary);
}

Try changing a value in your token files - with the plugin installed, you’ll see the changes instantly in your browser!