> **Version 10.4 (beta)** — **React** / **TypeScript**
> Also available:
- `?renderer=angular` for angular, preact
- `?language=js` for JavaScript
- `?codeOnly=true` for code snippets only
- other versions: Version 10.3 (latest) (`/docs/get-started/frameworks/preact-vite.md`), Version 9 (`/docs/9/get-started/frameworks/preact-vite.md`), Version 8 (`/docs/8/get-started/frameworks/preact-vite.md`)

# Storybook for Preact with Vite

Storybook for Preact & Vite is a [framework](https://storybook.js.org/docs/10.4/contribute/framework.md) that makes it easy to develop and test UI components in isolation for [Preact](https://preactjs.com/) applications built with [Vite](https://vitejs.dev/).

## Install

To install Storybook in an existing Preact project, run this command in your project's root directory:

```shell
npm create storybook@latest
```

```shell
pnpm create storybook@latest
```

```shell
yarn create storybook
```

You can then get started [writing stories](https://storybook.js.org/docs/10.4/get-started/whats-a-story.md), [running tests](https://storybook.js.org/docs/10.4/writing-tests.md) and [documenting your components](https://storybook.js.org/docs/10.4/writing-docs.md). For more control over the installation process, refer to the [installation guide](https://storybook.js.org/docs/10.4/get-started/install.md).

### Requirements

## Run Storybook

To run Storybook for a particular project, run the following:

```shell
npm run storybook
```

```shell
pnpm run storybook
```

```shell
yarn storybook
```

To build Storybook, run:

```shell
npm run build-storybook
```

```shell
pnpm run build-storybook
```

```shell
yarn build-storybook
```

You will find the output in the configured `outputDir` (default is `storybook-static`).

## FAQ

### How do I manually install the Preact framework?

First, install the framework:

Then, update your `.storybook/main.js|ts` to change the framework property:

## API

### Options

You can pass an options object for additional configuration if needed:

#### `builder`

Type: `Record<string, any>`

Configure options for the [framework's builder](https://storybook.js.org/docs/10.4/api/main-config/main-config-framework.md#optionsbuilder). For this framework, available options can be found in the [Vite builder docs](https://storybook.js.org/docs/10.4/builders/vite.md).