A Vite plugin for React

Your components,on display.

Add /** @preview */ above a component. It appears in a live gallery, rendered by the Vite dev server you already run. Nothing changes in your production build.

Try the live demo

Button.tsx

import { Button } from "./Button";

Save

No. 01PrimaryInputs

toneprimarydangerghost

children"Save"

disabled

Select a preview to update the gallery

Why Vitrine

Stop clicking through your app to check one toast.

localhost:5173/loginlocalhost:5173/productslocalhost:5173/cartlocalhost:5173/checkoutlocalhost:5173/checkout/payment

Payment declined. Try another card.

5clicks to see one toast

And it's gone after three seconds.

Log in, fill the cart, enter a card and make the payment fail on purpose. Then start over for the warning and the long message.

preview(Toast, {
  variants: {
    success: { args: { tone: "success" } },
    error: { args: { tone: "error" } },
    warning: { args: { tone: "warning" } },
    long: { args: { message: "We couldn't…" } },
  },
});

Payment complete

Payment declined. Try another card.

Your card expires next month

We couldn't process your payment because the card issuer declined the transaction.

0clicks. Every case you wrote is already there.

Write the cases next to the component with preview(). They stay on screen, and every save updates them.

What changes

Add it for yourself.
Your team feels it too.

Fewer screenshots, fewer screen shares, fewer “can you run it on your machine?”

For you

```
plugins: [
  react(),
  vitrine(),
]
```
One line in your configvite.config.ts
Add it to the Vite config you already have. Aliases and CSS just work, and your production build stays the same.
Components before pagesargs
Build and check a component with sample props before the page or the API exists.
Props from your typesTypeScript
Controls are generated from your component's props, so there is nothing to keep in sync by hand.
```
/** @preview */
export const Danger = …
```
Follows your cursorVS Code, optional
In VS Code the panel switches to the preview you are editing. The browser gallery works fine on its own.

And your team stops asking you

# design

Mina DesignerHow does the publish button look when it's disabled?

YouHere's exactly that state:localhost:5173/__vitrine#preview=Button&args={"disabled":true}

localhost:5173/__vitrine

Publishdisabled: true

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;
}

toneprimary

childrenSave

disabled

PrimaryDanger

Delete

Theme lightdarkLocale en

Ada ParkFollow

InputsButtonCheckboxFeedbackAlert

Viewport Mobile

375pxSave

primary, smSaveprimary, mdSaveprimary, lgSavedanger, smSavedanger, mdSavedanger, lgSave

Post published Undo

12:04:31 onUndo [event click]12:04:33 onDismiss [event click]

CompareSnapshot 1

Snapshot 1SaveCurrentSave changes

/** @preview */export const Primary = Button;/** @preview */export const Danger = Button;

/__vitrine#preview=src%2FButton.tsx%23Button&variant=danger

Delete

Link copied

$ npx vitrine-static buildvitrine-static/index.htmlvitrine-static/frame.htmlvitrine-static/assets/Gallery written to vitrine-static

How it works

Start with one comment.

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

Components.tsx

/** @preview */
export const Button = () => <button>Publish</button>;
 
/** @preview */
export const Badge = () => <span>New</span>;

/__vitrineLive

No. 01Mark a preview/** @preview */
Add the comment above an exported component. The preview stays with its source.
No. 02Run the servervite dev
Add the plugin and start your dev server as usual. Vitrine only runs during development.
No. 03Open the gallery/__vitrine
Use it in a browser, or beside your editor with the VS Code extension.

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. The static gallery is built by a separate command.

Can I deploy the gallery?

Yes. Add vitrine-plugin-static and run vitrine-static build to get a folder you can upload to any static host.

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.