Next.js

Installation

npm i @fumadocs/story

Add the Tailwind CSS preset:

Tailwind CSS

@import '@fumadocs/story/css/preset.css';

Add the Webpack/Turbopack plugin:

next.config.mts

import type { NextConfig } from 'next';
import { createNextStory } from '@fumadocs/story/next';

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

const withStory = createNextStory();

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

Create a Story

Create a story factory to store your global settings:

lib/story.ts

import { defineStoryFactory } from '@fumadocs/story/next/client';

export const { defineStory } = defineStoryFactory();

Now create your first story:

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: {},
  },
});

The .story suffix is required

The build-time plugin will only transform files matching *.story.{js,jsx,ts,tsx}, you can configure this from createNextStory().

Now you can render the story like:

index.mdx

import { story } from '@/components/my-component.story';

## Overview

Preview for component:

<story.WithControl />

Installation

Create a Story

On this page