@storybook/react-vite

Setup Storybook with Vite

This command initializes a new Storybook configuration in your React project using Vite as the builder. It sets up the necessary files and dependencies to get started with Storybook and Vite.

npx sb init --builder @storybook/react-vite

Writing Stories

This code demonstrates how to write a story for a Button component in a React project. It defines a default export with metadata about the component and creates a template for the story. The `Primary` story is an instance of the template with specific arguments.

import React from 'react';
import { Button } from './Button';

export default {
  title: 'Example/Button',
  component: Button,
};

const Template = (args) => <Button {...args} />;

export const Primary = Template.bind({});
Primary.args = {
  primary: true,
  label: 'Button',
};

Running Storybook

This command starts the Storybook development server, allowing you to view and interact with your stories in the browser. It uses Vite for fast builds and hot module replacement.

npm run storybook