Vite

Installation

npm i @fumadocs/story

Add the Tailwind CSS preset.

Tailwind CSS

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

Add the Vite plugin:

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:

lib/story.ts

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

export const { defineStory } = defineStoryFactory();

Now create your first story:

import { defineStory } from '@/lib/story';
import { MyComponent } from './my-component';

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

The .story 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.

Render a Story

Now you can render the story like:

index.mdx

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

<story.WithControl />

Installation

Create a Story

Render a Story

On this page