Vitrine

A component gallery for React and Vite

Your components,on display.

Add one comment above an export. Vitrine renders it in a live gallery beside your editor through your Vite dev server.

Get the VS Code extension
Button.tsx
import { Button } from "./Button";
Save
No. 01PrimaryInputs
toneprimarydangerghost
children"Save"
disabled

Select a preview to update the gallery

How it works

Start with one comment.

Components render in your own Vite setup, with your aliases, plugins, CSS and HMR.

  1. No. 01Mark a preview/** @preview */

    Add the comment above an exported component. The preview stays with its source.

  2. No. 02Run the servervite dev

    Add the plugin and start your dev server as usual. Vitrine only runs during development.

  3. No. 03Open the gallery/__vitrine

    Use it in a browser, or beside your editor with the VS Code extension.

Features

Work with previews more easily.

  • Props controlsfrom your types

    Controls are generated from prop types, including types imported from other files.

    interface ButtonProps {
  tone: "primary" | "danger";
  disabled?: boolean;
}

  • Variantspreview()

    Name a few sets of props and switch between them in the gallery.

    preview(Button, {
  variants: {
    primary: { args: { tone: "primary" } },
    danger: { args: { tone: "danger" } },
  },
});

  • Follows your cursorVS Code

    Move onto a @preview export and the panel switches to it.

  • Groupsname="Inputs/Button"

    A slash in the name files the preview into a sidebar group.

    /** @preview name="Inputs/Button" */
export const Primary = () => <Button />;

Compatibility

Fits the setup you already have.

Supports React 18 and 19 and Vite 6.4 and later. Previews use your Vite config, so aliases, CSS and plugins behave as they do in your app.

FAQ

Common questions.

Does Vitrine change my production build?

No. The plugin only runs during vite serve and adds nothing to your build output.

Do I need the VS Code extension?

No. The gallery works in any browser at /__vitrine. The extension adds a side panel that follows your cursor.

Why does a .vitrine folder appear in my project?

The plugin writes its port there so the extension can find your dev server. The folder ignores itself, so it never shows up in commits.

Something is not working. Where do I report it?

Open an issue on GitHub with your React and Vite versions