UI Variant Prototype

Temporary workflow for comparing visual/layout options in the running app, then collapsing to a single implementation when the user picks a winner.

Stack: Any React setup (Vite SPA, Next.js, Remix, etc.). Examples below use shadcn/ui and Tailwind for the toggle UI — swap for the app's own component library and styling — and whatever state management the app already uses (Jotai, Zustand, Redux, React Context — see Preview state).

Everything below is client-side code. If the app uses React Server Components (e.g. Next.js App Router), add 'use client' at the top of each preview file; in other setups, omit it.

When to use

• User wants to see 2–5 layout options side-by-side in context (not Figma-only).
• The decision is presentational (spacing, typography, tile vs inline, icon treatment)—not business logic.
• You will delete preview machinery after one variant ships.

Do not use for: API design, routing, or long-lived feature flags.

File layout

Colocate under the owning feature folder (route _components, app-components, etc.):