{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "live-component-rail",
  "type": "registry:component",
  "title": "Live component rail",
  "description": "A rail of live component cards, including buttons, a badge, a switch and a destructive action, that rise into view with a quick stagger on scroll.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "https://ui.minidev.pro/r/badge.json",
    "https://ui.minidev.pro/r/button.json",
    "https://ui.minidev.pro/r/input.json",
    "https://ui.minidev.pro/r/switch.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/premium/live-component-rail.tsx",
      "type": "registry:ui",
      "target": "components/ui/live-component-rail.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { motion, useReducedMotion } from \"motion/react\"\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Switch } from \"@/components/ui/switch\"\nimport { Input } from \"@/components/ui/input\"\n\nfunction LiveComponentRail({ className }: { className?: string }) {\n  const reduce = useReducedMotion()\n  const cards = [\n    { label: \"Button\", node: <Button>Primary</Button> },\n    { label: \"Badge\", node: <Badge>Hairline</Badge> },\n    { label: \"Switch\", node: <Switch defaultChecked aria-label=\"Demo switch\" /> },\n    { label: \"Input\", node: <Input placeholder=\"Search registry…\" className=\"w-40\" /> },\n    { label: \"Outline\", node: <Button variant=\"outline\">Secondary</Button> },\n    { label: \"Danger\", node: <Button variant=\"destructive\" size=\"sm\">Delete</Button> },\n  ]\n  return (\n    <section\n      data-slot=\"live-component-rail\"\n      data-tier=\"premium\"\n      className={cn(\"min-w-0 max-w-full space-y-4 overflow-hidden\", className)}\n    >\n      <div className=\"flex min-w-0 items-end justify-between gap-4\">\n        <div className=\"min-w-0\">\n          <p className=\"text-xs font-medium uppercase tracking-[0.01em] text-fg-muted\">Live primitives</p>\n          <h3 className=\"mt-1 text-xl font-medium tracking-[-0.014em] text-fg\">\n            Same free kit the Premium moments sit on\n          </h3>\n        </div>\n      </div>\n      <div className=\"relative min-w-0 max-w-full overflow-hidden rounded-2xl border border-border bg-sunken p-4\">\n        <div className=\"flex gap-4 overflow-x-auto overscroll-x-contain pb-2\" tabIndex={0} aria-label=\"Component rail\">\n          {cards.map((c, i) => (\n            <motion.div\n              key={c.label}\n              initial={reduce ? false : { y: 12 }}\n              whileInView={{ y: 0 }}\n              viewport={{ once: true }}\n              transition={{ delay: i * 0.04, duration: 0.25 }}\n              className=\"flex w-[160px] shrink-0 flex-col gap-3 rounded-xl border border-border bg-surface p-4 shadow-highlight\"\n            >\n              <p className=\"text-[11px] font-medium uppercase tracking-[0.01em] text-fg-muted\">{c.label}</p>\n              <div className=\"flex min-h-10 items-center\">{c.node}</div>\n            </motion.div>\n          ))}\n        </div>\n      </div>\n    </section>\n  )\n}\nexport { LiveComponentRail }\n"
    }
  ]
}