@21st-dev/variant-picker

Development-only local selector for named UI directions. Import it from a development-only module so production bundlers can remove it:

import {
  TwentyFirstVariantPicker,
  variantPickerTextFallback,
} from "@21st-dev/variant-picker"

export function VariantPreview() {
  if (process.env.NODE_ENV !== "development") return null
  return (
    <TwentyFirstVariantPicker
      group="Pricing hierarchy"
      variants={[
        { id: "focused", name: "Focused", description: "One primary plan" },
        { id: "compare", name: "Compare", description: "Dense feature grid" },
      ]}
      renderVariant={(variant) =>
        variant.id === "focused" ? <FocusedPricing /> : <ComparePricing />
      }
    />
  )
}

The component also hard-stops when NODE_ENV is production, even if an integration accidentally imports it from a production module.

The package root uses conditional exports: development builds receive the picker and production builds receive a no-op entry with the same types. Vite and other bundlers that set the standard development condition work without configuration. If a development bundler does not set that condition, import @21st-dev/variant-picker/development from a development-only module.

Selection persists in local storage and emits 21st:variant-selected. Copy prompt copies a paste-ready instruction for the active direction, emits 21st:variant-finalized, and briefly confirms the copy. Override buildPrompt when the host needs different wording, or call variantSelectionPrompt() directly. Use variantPickerTextFallback() when the host cannot render local UI.

The picker renders as a compact bottom toolbar with previous/next controls, a tabular 1 / N counter, an accessible direction menu, Lucide icons, numeric shortcuts, and the Copy prompt action. Arrow keys cycle directions. It adapts to narrow and coarse-pointer screens, follows the browser color scheme, and has no hosted script or stylesheet dependency.