---
title: Next.js
description: Configure Fumadocs Story on Next.js.
---

## Installation

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

Add the Tailwind CSS preset:

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

Add the Webpack/Turbopack plugin:

```ts title="next.config.mts"
import type { NextConfig } from 'next';
// [!code ++]
import { createNextStory } from '@fumadocs/story/next';

const config: NextConfig = {
  // ...
};

// [!code ++]
const withStory = createNextStory();

// wrap the config with `withStory()`
// if you have other plugins like `withMDX()`, keep it like `withStory(withMDX(config))` [!code highlight]
export default withStory(config);
```

### Create a Story

Create a story factory to store your global settings:

```ts title="lib/story.ts"
import { defineStoryFactory } from '@fumadocs/story/next/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({
  // the passed component must be a client component
  Component: MyComponent,
  args: {
    // default props (recommended)
    initial: {},
  },
});
```

```tsx tab="my-component.tsx"
'use client';

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 build-time plugin will only transform files matching `*.story.{js,jsx,ts,tsx}`, you can configure this from `createNextStory()`.
</Callout>

Now you can render the story like:

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

## Overview

Preview for component:

<story.WithControl />
```
