Using Sugarcube with Astro

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

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

2. Import your generated CSS in your Astro layout:

---
// Your component imports
---
<link rel="stylesheet" href="/styles/global/variables/tokens.variables.css">

For the best development experience, we recommend using our Vite plugin. Since Astro uses Vite as its build tool, this integration is seamless.

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 Astro configuration:

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

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

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

<div class="card">
  <h2 style="color: var(--text-primary)">Hello World</h2>
  <p style="background-color: var(--surface-primary)">This is using Sugarcube tokens!</p>
</div>

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