Styleframe Logo

Manual Vite Installation

Installation instructions for a custom Vite setup with styleframe. Get started with styleframe in your Vite project

Install styleframe in your project

Install all styleframe packages as development dependencies to your project. We've released each package separately to allow for better tree-shaking and version control.

pnpm install -D styleframe @styleframe/cli @styleframe/core @styleframe/license @styleframe/loader @styleframe/plugin @styleframe/pro @styleframe/theme @styleframe/transpiler
pnpm install @styleframe/runtime

Add styleframe to Vite

Next, add styleframe to your Vite configuration file.

vite.config.ts
import { defineConfig } from 'vite';
import styleframe from 'styleframe/plugin/vite';

export default defineConfig({
  plugins: [styleframe()],
});

Configure TypeScript

Styleframe generates TypeScript declarations for type-safe imports. Update your tsconfig.json to include the generated files:

tsconfig.json
{
  "compilerOptions": {
    "moduleResolution": "bundler",
    "noEmit": true
  },
  "include": [
    "styleframe.config.ts",
    "*.styleframe.ts",
    ".styleframe/**/*.d.ts"
  ]
}

Add the generated directory to your .gitignore:

.gitignore
.styleframe/

Import styleframe in your project

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

main.ts
import 'virtual:styleframe.css';

Create a styleframe theme file

Create a styleframe.config.ts theme file in your project's root directory.

styleframe.config.ts
import { styleframe } from 'styleframe';

const s = styleframe();
const { variable, selector, ref } = s;

const colorPrimary = variable('color-primary', '#007bff');

selector('body', {
    background: ref(colorPrimary),
});

export default s;

Enjoy using styleframe

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

Create a Design System with styleframe in under 15 minutes.