---
title: Vite
description: Configure Fumadocs Story for Vite-based frameworks.
---

## Installation

```npm
npm i @fumadocs/story
```

Add the Tailwind CSS preset.

```css title="Tailwind CSS"
/* [!code ++] */
@import '@fumadocs/story/css/preset.css';
```

Add the Vite plugin:

```ts title="vite.config.ts"
import { defineConfig } from 'vite';
import story from '@fumadocs/story/vite';

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

### Create a Story

Create a story factory to store your global settings:

```ts title="lib/story.ts"
import { defineStoryFactory } from '@fumadocs/story/vite/client';

export const { defineStory } = defineStoryFactory();
```

Now create your first story:

```tsx tab="my-component.story.tsx"
import { defineStory } from '@/lib/story';
import { MyComponent } from './my-component';

export const story = defineStory({
  Component: MyComponent,
  args: {
    // default props (recommended)
    initial: {},
  },
});
```

```tsx tab="my-component.tsx"
export interface MyComponentProps {
  title?: string;
}

export function MyComponent({ title }: MyComponentProps) {
  return <p>{title}</p>;
}
```

<Callout type='warn' title={<>The <code>.story</code> suffix is required</>}>
  The Vite plugin will only transform files matching `*.story.{js,jsx,ts,tsx}`, you can also configure filters from the Vite plugin.
</Callout>

### Render a Story

Now you can render the story like:

```mdx title="index.mdx"
import { story } from '@/components/my-component.story';

<story.WithControl />
```
