Plugins

Sugarcube provides plugins to automatically regenerate your CSS when your design tokens change. Choose the plugin that matches your project’s build tool:

Framework-Specific Guides

  • Next.js - Using Sugarcube with Next.js (Pages Router and App Router)
  • Astro - Using Sugarcube with Astro
  • 11ty - Using Sugarcube with 11ty (Vite or PostCSS)
  • Vite - Using Sugarcube with standalone Vite projects
  • PostCSS - Using Sugarcube with standalone PostCSS projects

Available Plugins

Vite Plugin

The Vite plugin integrates with Vite’s development server and build process. It’s used by:

  • Standalone Vite projects
  • Astro projects
  • 11ty projects using the Vite plugin

PostCSS Plugin

The PostCSS plugin integrates with any build tool that supports PostCSS plugins. It’s used by:

  • Next.js projects
  • 11ty projects using PostCSS
  • Any project with PostCSS support
  • Standalone projects using PostCSS with a build tool like npm scripts, Gulp, or webpack