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:

• Install styleframe as a development dependency to your project
• Add the styleframe plugin to Vite, if possible
• Create a new styleframe.config.ts file

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.