Getting started with Vite Styleguidist
1. Install Styleguidist
npm install --save-dev vite-styleguidist
While 1.0 is in beta there is no stable version, and a plain install resolves to whatever npm’s latest tag points at (the maintainer moves it to the newest prerelease after each release, but it can lag). Install from the next dist-tag to get the newest beta for sure: npm install --save-dev vite-styleguidist@next.
Styleguidist needs React 16.14 or newer and Node.js 22.12 or newer (Node 23 is not supported; 24 and later are), see Compatibility. It comes with Vite to compile your components, you don’t need a bundler in your project.
Vite Styleguidist is a maintained fork of React Styleguidist. If you are upgrading from react-styleguidist 13.x, see the migration guide.
2. Configure your style guide
If your components live in src/components (or src/Components) you can skip this step. Styleguidist finds them, understands JSX, TypeScript, CSS and static assets, and reuses your vite.config.js when you have one.
- Point Styleguidist to your React components
- Tell Styleguidist how to load your app’s code, if the defaults aren’t enough
3. Start your style guide
- Run
npx styleguidist serverto start a style guide dev server. - Run
npx styleguidist buildto build a production HTML version.
We recommend adding these commands to your package.json.
4. Start documenting your components
See how to document your components.