Add your first component.

Install the plugin

Add Vitrine as a development dependency in your app.

Add it to Vite

Place vitrine() next to the React plugin in vite.config.ts. It only runs during vite serve and adds nothing to your production build.

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import vitrine from "vite-plugin-react-vitrine";

export default defineConfig({
  plugins: [react(), vitrine()],
});

Mark a component

Put the comment directly above an exported component. The export name becomes its label in the gallery.

/** @preview */
export function Button() {
  return <button>Save</button>;
}

Open the gallery

Start your dev server as usual, then open /__vitrine on the same origin.