Vite Installation

Initialize styleframe in your project

Use the CLI to initialize styleframe in your project. Make sure you have a vite.config.ts file in your project root.

pnpx styleframe init
pnpm install

yarn create styleframe
yarn install

npx styleframe init
npm install

bunx styleframe init
bun install

Using the CLI command above, it will:

• Add all styleframe packages to your project dependencies
• Create a new styleframe.config.ts file
• Create or update tsconfig.json with styleframe includes
• Add the styleframe plugin to Vite, if possible

Import styleframe in your project

Open your main.ts file and import the auto-generated virtual module:

import 'virtual:styleframe.css';

Enjoy using styleframe

Enjoy writing modern, maintainable, composable theme files using styleframe!

Create a Design System with styleframe in under 15 minutes.