{"_id":"@21st-dev/variant-picker","_rev":"3-d8983c4a0f5698691e91f3a96c7e5322","name":"@21st-dev/variant-picker","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.0":{"name":"@21st-dev/variant-picker","version":"0.1.0","license":"MIT","_id":"@21st-dev/variant-picker@0.1.0","maintainers":[{"name":"serafimcloud","email":"serafimcloud@gmail.com"},{"name":"bunasq","email":"realsergeybunas@gmail.com"},{"name":"danverr","email":"ddmaryakhin@mail.ru"}],"dist":{"shasum":"3cc8578ccd3203c65ffbc175095efff4f66dee50","tarball":"https://registry.npmjs.org/@21st-dev/variant-picker/-/variant-picker-0.1.0.tgz","fileCount":4,"integrity":"sha512-5pCya39LGb/wJJ99PLADcNXu9CD/uP+s/d6BCjbRMMqBOmVqq9rzUoLFi1dgKDjWTWadZM0QJxjC6FEdBdLglA==","signatures":[{"sig":"MEQCIAnnFJEWafq1Ae/fH5ScqbiQ9OO5/6GIyMSMkl9BNtn6AiBtvuhU3VsmVc5oJf55rA1YW382eVl8SoyPp+z1Oso1Mw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":9788},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"scripts":{"test":"vitest run","build":"tsup src/index.tsx --format esm --dts --clean --external react","ts:check":"tsc -p tsconfig.json","prepublishOnly":"npm run build"},"_npmUser":{"name":"serafimcloud","email":"serafimcloud@gmail.com"},"_npmVersion":"11.3.0","description":"Development-only local picker for comparing and selecting named 21st UI variants.","directories":{},"sideEffects":false,"_nodeVersion":"24.2.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","vitest":"^3.0.0","typescript":"^5.4.5","@types/react":"^19.1.1"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/variant-picker_0.1.0_1784845604959_0.060437314734903325","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@21st-dev/variant-picker","version":"0.1.1","license":"MIT","_id":"@21st-dev/variant-picker@0.1.1","maintainers":[{"name":"serafimcloud","email":"serafimcloud@gmail.com"},{"name":"bunasq","email":"realsergeybunas@gmail.com"},{"name":"danverr","email":"ddmaryakhin@mail.ru"}],"dist":{"shasum":"115b48c8feded078fe4a459fe7831f088063d67a","tarball":"https://registry.npmjs.org/@21st-dev/variant-picker/-/variant-picker-0.1.1.tgz","fileCount":6,"integrity":"sha512-lFOlWlOFDGZdCwUOltXfd26hX10Wj7AdYFa/3Qk8Vb94zB0MolKedZCN38cmPvFDIK4KspK2uarv1fbJcLDPYg==","signatures":[{"sig":"MEUCIQCHCfRgVp45P1/v8W3mydjfr4vpSDGKymsJ6wEiFYzppAIgW388dsXEOtRSRq5jQYH/tdIoRAOSzyn1IvgNvwSkECg=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":25945},"main":"./dist/noop.js","type":"module","types":"./dist/index.d.ts","module":"./dist/noop.js","exports":{".":{"types":"./dist/index.d.ts","default":"./dist/noop.js","development":"./dist/index.js"},"./development":{"types":"./dist/index.d.ts","import":"./dist/index.js","default":"./dist/index.js"}},"scripts":{"test":"npm run build && vitest run","build":"tsup src/index.tsx src/noop.tsx --format esm --dts --clean --external react","ts:check":"tsc -p tsconfig.json","prepublishOnly":"npm run build"},"_npmUser":{"name":"serafimcloud","email":"serafimcloud@gmail.com"},"_npmVersion":"11.3.0","description":"Development-only local picker for comparing and selecting named 21st UI variants.","directories":{},"sideEffects":false,"_nodeVersion":"24.2.0","dependencies":{"lucide-react":"^0.446.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","vite":"^6.3.5","vitest":"^3.0.0","typescript":"^5.4.5","@types/react":"^19.1.1"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/variant-picker_0.1.1_1784861932535_0.18380546648189267","host":"s3://npm-registry-packages-npm-production"}}},"time":{"created":"2026-07-23T22:26:44.771Z","modified":"2026-09-09T20:33:25.932Z","0.1.0":"2026-07-23T22:26:45.105Z","0.1.1":"2026-07-24T02:58:52.681Z"},"license":"MIT","description":"Development-only local picker for comparing and selecting named 21st UI variants.","maintainers":[{"email":"serafimcloud@gmail.com","name":"serafimcloud"},{"email":"realsergeybunas@gmail.com","name":"bunasq"}],"readme":"# @21st-dev/variant-picker\n\nDevelopment-only local selector for named UI directions. Import it from a\ndevelopment-only module so production bundlers can remove it:\n\n```tsx\nimport {\n  TwentyFirstVariantPicker,\n  variantPickerTextFallback,\n} from \"@21st-dev/variant-picker\"\n\nexport function VariantPreview() {\n  if (process.env.NODE_ENV !== \"development\") return null\n  return (\n    <TwentyFirstVariantPicker\n      group=\"Pricing hierarchy\"\n      variants={[\n        { id: \"focused\", name: \"Focused\", description: \"One primary plan\" },\n        { id: \"compare\", name: \"Compare\", description: \"Dense feature grid\" },\n      ]}\n      renderVariant={(variant) =>\n        variant.id === \"focused\" ? <FocusedPricing /> : <ComparePricing />\n      }\n    />\n  )\n}\n```\n\nThe component also hard-stops when `NODE_ENV` is `production`, even if an\nintegration accidentally imports it from a production module.\n\nThe package root uses conditional exports: development builds receive the\npicker and production builds receive a no-op entry with the same types. Vite\nand other bundlers that set the standard `development` condition work without\nconfiguration. If a development bundler does not set that condition, import\n`@21st-dev/variant-picker/development` from a development-only module.\n\nSelection persists in local storage and emits `21st:variant-selected`.\n`Copy prompt` copies a paste-ready instruction for the active direction,\nemits `21st:variant-finalized`, and briefly confirms the copy. Override\n`buildPrompt` when the host needs different wording, or call\n`variantSelectionPrompt()` directly. Use `variantPickerTextFallback()` when\nthe host cannot render local UI.\n\nThe picker renders as a compact bottom toolbar with previous/next controls, a\ntabular `1 / N` counter, an accessible direction menu, Lucide icons, numeric\nshortcuts, and the `Copy prompt` action. Arrow keys cycle directions. It adapts\nto narrow and coarse-pointer screens, follows the browser color scheme, and has\nno hosted script or stylesheet dependency.\n","readmeFilename":"README.md"}