Storybook for DNA components

This guide provides instructions on how to set up Storybook for DNA components in a Vite project. Storybook is a powerful tool for developing and testing UI components in isolation, and it can be easily integrated with DNA components to enhance your development workflow.

Install

npm

npm i -D storybook @chialab/storybook-dna-vite

yarn

yarn add -D storybook @chialab/storybook-dna-vite

pnpm

pnpm add -D storybook @chialab/storybook-dna-vite

Usage

Please refer to the Storybook documentation for general installation and setup instructions. Once you have it is installed, you can configure Storybook to use the @chialab/storybook-dna-vite framework by creating a .storybook/main.js file with the following content:

.storybook/main.js

export default {
    framework: {
        name: '@chialab/storybook-dna-vite',
        options: {},
    },
    docs: {
        autodocs: 'tag',
    },
};