{
  "name": "dsgn",
  "items": [
    {
      "name": "utils",
      "type": "registry:lib",
      "description": "cn() class-name merge helper used by every component in the registry.",
      "registryDependencies": []
    },
    {
      "name": "button",
      "type": "registry:ui",
      "description": "Button with 9 variants (primary/secondary/accent/glow/soft/outline/ghost/link/destructive) and 8 sizes (xs-xl plus 3 icon sizes) via class-variance-authority, left/right icon slots, a non-reflowing loading state, and asChild composition via Radix Slot.",
      "registryDependencies": [
        "utils"
      ]
    },
    {
      "name": "card",
      "type": "registry:ui",
      "description": "Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter.",
      "registryDependencies": [
        "utils"
      ]
    },
    {
      "name": "badge",
      "type": "registry:ui",
      "description": "Badge with variant props via class-variance-authority.",
      "registryDependencies": [
        "utils"
      ]
    },
    {
      "name": "input",
      "type": "registry:ui",
      "description": "Styled text input wrapping the native <input> element.",
      "registryDependencies": [
        "utils"
      ]
    },
    {
      "name": "label",
      "type": "registry:ui",
      "description": "Label built on Radix Label. Used standalone or as the labeling piece of Form.",
      "registryDependencies": [
        "utils"
      ]
    },
    {
      "name": "form",
      "type": "registry:ui",
      "description": "Form, FormField, FormItem, FormLabel, FormControl, FormDescription, FormMessage -- built on react-hook-form's FormProvider + Controller + useFormContext, with Radix Slot wiring FormControl to whatever input it wraps. Resolver-agnostic: works with zodResolver (recommended), valibot, or a hand-rolled resolver passed to your own useForm() call.",
      "registryDependencies": [
        "utils",
        "label"
      ]
    },
    {
      "name": "command",
      "type": "registry:ui",
      "description": "A ⌘K command palette (Command, CommandDialog, CommandInput, CommandList, CommandGroup, CommandItem, CommandShortcut) built on cmdk, with its own dialog chrome so it doesn't require a separate Dialog primitive.",
      "registryDependencies": [
        "utils"
      ]
    },
    {
      "name": "textarea",
      "type": "registry:ui",
      "description": "Styled multi-line text input wrapping the native <textarea> element.",
      "registryDependencies": [
        "utils"
      ]
    },
    {
      "name": "switch",
      "type": "registry:ui",
      "description": "Toggle switch built on Radix Switch, with a thumb that stays legible against both checked and unchecked track colors in either theme.",
      "registryDependencies": [
        "utils"
      ]
    },
    {
      "name": "tooltip",
      "type": "registry:ui",
      "description": "Tooltip, TooltipProvider, TooltipTrigger, TooltipContent built on Radix Tooltip.",
      "registryDependencies": [
        "utils"
      ]
    },
    {
      "name": "tabs",
      "type": "registry:ui",
      "description": "Tabs, TabsList, TabsTrigger, TabsContent built on Radix Tabs, styled as a pill-segmented control.",
      "registryDependencies": [
        "utils"
      ]
    },
    {
      "name": "select",
      "type": "registry:ui",
      "description": "Select, SelectTrigger, SelectContent, SelectItem, SelectValue, SelectGroup built on Radix Select.",
      "registryDependencies": [
        "utils"
      ]
    },
    {
      "name": "dialog",
      "type": "registry:ui",
      "description": "Dialog, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, DialogClose built on Radix Dialog.",
      "registryDependencies": [
        "utils"
      ]
    },
    {
      "name": "alert",
      "type": "registry:ui",
      "description": "Alert, AlertTitle, AlertDescription with default/destructive variants via class-variance-authority.",
      "registryDependencies": [
        "utils"
      ]
    },
    {
      "name": "avatar",
      "type": "registry:ui",
      "description": "Avatar, AvatarImage, AvatarFallback built on Radix Avatar.",
      "registryDependencies": [
        "utils"
      ]
    },
    {
      "name": "checkbox",
      "type": "registry:ui",
      "description": "Checkbox built on Radix Checkbox.",
      "registryDependencies": [
        "utils"
      ]
    },
    {
      "name": "radio-group",
      "type": "registry:ui",
      "description": "RadioGroup, RadioGroupItem built on Radix Radio Group.",
      "registryDependencies": [
        "utils"
      ]
    },
    {
      "name": "separator",
      "type": "registry:ui",
      "description": "Separator (horizontal or vertical divider) built on Radix Separator.",
      "registryDependencies": [
        "utils"
      ]
    },
    {
      "name": "progress",
      "type": "registry:ui",
      "description": "Progress bar built on Radix Progress.",
      "registryDependencies": [
        "utils"
      ]
    },
    {
      "name": "accordion",
      "type": "registry:ui",
      "description": "Accordion, AccordionItem, AccordionTrigger, AccordionContent built on Radix Accordion. Requires --ease-fluid plus two keyframes in your global CSS for the expand/collapse animation and the trigger icon rotation (accordion-down/accordion-up, animating to/from Radix's --radix-accordion-content-height) — dsgn add does not inject these; without them the ease-fluid/animate-accordion-* utility classes compile to nothing and the accordion snaps open with no animation. See design.dhruvchoudhary.com's own apps/site/app/globals.css for the exact --ease-fluid value, the two --animate-accordion-* lines, and the two @keyframes blocks to copy — or skills/dsgn/reference/component-registry.md's Accordion entry for the same snippet inline.",
      "registryDependencies": [
        "utils"
      ]
    },
    {
      "name": "popover",
      "type": "registry:ui",
      "description": "Popover, PopoverTrigger, PopoverContent, PopoverAnchor built on Radix Popover.",
      "registryDependencies": [
        "utils"
      ]
    },
    {
      "name": "dropdown-menu",
      "type": "registry:ui",
      "description": "DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut built on Radix Dropdown Menu.",
      "registryDependencies": [
        "utils"
      ]
    },
    {
      "name": "table",
      "type": "registry:ui",
      "description": "Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption -- styled native <table> elements, no primitive dependency.",
      "registryDependencies": [
        "utils"
      ]
    },
    {
      "name": "skeleton",
      "type": "registry:ui",
      "description": "A pulsing placeholder for content that hasn't loaded yet.",
      "registryDependencies": [
        "utils"
      ]
    },
    {
      "name": "empty-state",
      "type": "registry:ui",
      "description": "The \"no rows yet\" / \"no results\" state -- a dashed placeholder with an icon, title, description, and optional action.",
      "registryDependencies": [
        "utils"
      ]
    },
    {
      "name": "breadcrumb",
      "type": "registry:ui",
      "description": "Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis -- plain semantic nav/ol markup, no primitive library dependency. BreadcrumbLink's hover transition uses --ease-fluid; without it in your global CSS the ease-fluid utility compiles to nothing and the transition silently falls back to the browser default easing (a minor visual difference, not a broken build) -- see the Accordion entry for the exact value.",
      "registryDependencies": [
        "utils"
      ]
    },
    {
      "name": "pagination",
      "type": "registry:ui",
      "description": "Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationPrevious, PaginationNext, PaginationEllipsis -- built on Button's own variants, no primitive library dependency.",
      "registryDependencies": [
        "utils",
        "button"
      ]
    },
    {
      "name": "alert-dialog",
      "type": "registry:ui",
      "description": "AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel -- built on Radix Alert Dialog. Distinct from Dialog: forces an explicit confirm/cancel choice, can't be dismissed by clicking outside, for destructive actions.",
      "registryDependencies": [
        "utils",
        "button"
      ]
    },
    {
      "name": "sheet",
      "type": "registry:ui",
      "description": "Sheet, SheetTrigger, SheetContent (side: top/right/bottom/left), SheetHeader, SheetFooter, SheetTitle, SheetDescription -- built on Radix Dialog (no new primitive dependency), edge-anchored instead of centered.",
      "registryDependencies": [
        "utils"
      ]
    },
    {
      "name": "combobox",
      "type": "registry:ui",
      "description": "Combobox -- a searchable select, composed from Popover + Command + Button (no new primitive dependency). Controlled: options/value/onValueChange.",
      "registryDependencies": [
        "utils",
        "button",
        "popover",
        "command"
      ]
    },
    {
      "name": "toast",
      "type": "registry:ui",
      "description": "Toast, ToastProvider, ToastViewport, ToastTitle, ToastDescription, ToastClose, ToastAction (toast.tsx) + an imperative toast() API (use-toast.ts) + a <Toaster /> to mount once near the app root (toaster.tsx). Built on Radix Toast.",
      "registryDependencies": [
        "utils"
      ]
    },
    {
      "name": "toggle-group",
      "type": "registry:ui",
      "description": "ToggleGroup, ToggleGroupItem -- a segmented control, built on Radix Toggle Group. type=\"single\" or \"multiple\" selection.",
      "registryDependencies": [
        "utils"
      ]
    },
    {
      "name": "slider",
      "type": "registry:ui",
      "description": "Slider -- built on Radix Slider. One Thumb per value in the value/defaultValue array, so the same component covers both single-handle and range sliders.",
      "registryDependencies": [
        "utils"
      ]
    },
    {
      "name": "collapsible",
      "type": "registry:ui",
      "description": "Collapsible, CollapsibleTrigger, CollapsibleContent -- a single show/hide section, built on Radix Collapsible. Distinct from accordion, which manages multiple items.",
      "registryDependencies": []
    },
    {
      "name": "toggle",
      "type": "registry:ui",
      "description": "Toggle -- a single pressed/unpressed button, built on Radix Toggle. The singular sibling of toggle-group.",
      "registryDependencies": [
        "utils"
      ]
    },
    {
      "name": "hover-card",
      "type": "registry:ui",
      "description": "HoverCard, HoverCardTrigger, HoverCardContent -- a hover-triggered preview panel, built on Radix Hover Card.",
      "registryDependencies": [
        "utils"
      ]
    },
    {
      "name": "scroll-area",
      "type": "registry:ui",
      "description": "ScrollArea, ScrollBar -- custom-styled scrollbars for a fixed-height panel, built on Radix Scroll Area.",
      "registryDependencies": [
        "utils"
      ]
    },
    {
      "name": "context-menu",
      "type": "registry:ui",
      "description": "ContextMenu and sub-parts -- a right-click menu, built on Radix Context Menu. Same shape as dropdown-menu.",
      "registryDependencies": [
        "utils"
      ]
    },
    {
      "name": "calendar",
      "type": "registry:ui",
      "description": "Calendar -- built on react-day-picker v10, styled to dsgn's border/radius/token conventions (border-border, bg-accent, text-accent-foreground, bg-muted). Supports single/range/multiple selection modes via react-day-picker's own props.",
      "registryDependencies": [
        "utils",
        "button"
      ]
    },
    {
      "name": "date-picker",
      "type": "registry:ui",
      "description": "DatePicker -- a single-date picker composed from Popover + Button + Calendar (no new primitive dependency). Controlled: value/onValueChange.",
      "registryDependencies": [
        "utils",
        "popover",
        "button",
        "calendar"
      ]
    },
    {
      "name": "data-table",
      "type": "registry:ui",
      "description": "DataTable -- a sortable, filterable, paginated table composed from Table + Button + Input and @tanstack/react-table (v8 line -- see the in-file note on why, next to its ColumnDef-based ColumnDef/columns+data API). Generic over columns/data via TanStack's ColumnDef, not tied to any specific dataset shape.",
      "registryDependencies": [
        "utils",
        "table",
        "button",
        "input"
      ]
    },
    {
      "name": "drawer",
      "type": "registry:ui",
      "description": "Drawer, DrawerTrigger, DrawerContent, DrawerHeader, DrawerFooter, DrawerTitle, DrawerDescription, DrawerClose -- a bottom-sheet with real drag-to-dismiss gesture behavior, built on vaul. Distinct from Sheet, which is Radix Dialog repositioned to an edge with no gesture support.",
      "registryDependencies": [
        "utils"
      ]
    },
    {
      "name": "navigation-menu",
      "type": "registry:ui",
      "description": "NavigationMenu and sub-parts -- a top-level site nav with flyout panels, built on Radix Navigation Menu, styled consistently with dropdown-menu/context-menu.",
      "registryDependencies": [
        "utils"
      ]
    },
    {
      "name": "menubar",
      "type": "registry:ui",
      "description": "Menubar and sub-parts -- a desktop-app-style top menu bar, built on Radix Menubar. Same compound shape as dropdown-menu/context-menu.",
      "registryDependencies": [
        "utils"
      ]
    },
    {
      "name": "multi-select",
      "type": "registry:ui",
      "description": "MultiSelect -- a tags-input style multi-value select, composed from Popover + Command + Badge + Button (no new primitive dependency). Controlled: options/value/onValueChange.",
      "registryDependencies": [
        "utils",
        "popover",
        "command",
        "badge",
        "button"
      ]
    },
    {
      "name": "carousel",
      "type": "registry:ui",
      "description": "Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext -- built on embla-carousel-react, with prev/next controls composed from Button (no new primitive-library dependency for the arrows). Keyboard arrow-key navigation built in.",
      "registryDependencies": [
        "utils",
        "button"
      ]
    },
    {
      "name": "resizable",
      "type": "registry:ui",
      "description": "ResizablePanelGroup, ResizablePanel, ResizableHandle -- built on react-resizable-panels 4.x (see the in-file note on its renamed Group/Panel/Separator API vs. the PanelGroup/Panel/PanelResizeHandle shape most docs still reference). ResizableHandle takes an optional withHandle prop for a visible grip.",
      "registryDependencies": [
        "utils"
      ]
    },
    {
      "name": "input-otp",
      "type": "registry:ui",
      "description": "InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator -- a one-time-passcode input built on the input-otp npm package (OTPInput + its RenderProps context), styled slot-by-slot.",
      "registryDependencies": [
        "utils"
      ]
    },
    {
      "name": "kbd",
      "type": "registry:ui",
      "description": "Kbd -- a styled <kbd> wrapper for rendering a keyboard shortcut, no primitive-library dependency.",
      "registryDependencies": [
        "utils"
      ]
    },
    {
      "name": "file-upload",
      "type": "registry:ui",
      "description": "FileUpload -- a drag-and-drop + click-to-browse dropzone with a per-file list and optional progress bars, composed from Button + Progress. Controlled (value/onValueChange) and presentational only: it never performs the actual upload, since transport is app-specific.",
      "registryDependencies": [
        "utils",
        "button",
        "progress"
      ]
    },
    {
      "name": "stepper",
      "type": "registry:ui",
      "description": "Stepper -- a numbered/checked multi-step progress indicator with per-step label/description, horizontal or vertical via an orientation prop. No primitive-library dependency.",
      "registryDependencies": [
        "utils"
      ]
    },
    {
      "name": "timeline",
      "type": "registry:ui",
      "description": "Timeline -- a vertical timeline with dot/icon markers connected by a line, each entry taking a title/timestamp/description. No primitive-library dependency.",
      "registryDependencies": [
        "utils"
      ]
    },
    {
      "name": "recipe-auth-form",
      "type": "registry:block",
      "description": "Recipe -- a real sign-in form composed from Card + Input + Checkbox + Button. Installed via `dsgn add recipe:auth-form`.",
      "registryDependencies": [
        "card",
        "input",
        "checkbox",
        "button"
      ]
    },
    {
      "name": "recipe-settings-panel",
      "type": "registry:block",
      "description": "Recipe -- a preferences panel composed from Card + Switch + Select + Separator + Button. Installed via `dsgn add recipe:settings-panel`.",
      "registryDependencies": [
        "card",
        "switch",
        "select",
        "separator",
        "button"
      ]
    },
    {
      "name": "recipe-pricing-tiers",
      "type": "registry:block",
      "description": "Recipe -- a 3-tier pricing layout composed from Card + Badge + Button. Installed via `dsgn add recipe:pricing-tiers`.",
      "registryDependencies": [
        "card",
        "badge",
        "button"
      ]
    },
    {
      "name": "recipe-empty-state-cta",
      "type": "registry:block",
      "description": "Recipe -- a \"no projects yet\" panel composed from EmptyState + Button. Installed via `dsgn add recipe:empty-state-cta`.",
      "registryDependencies": [
        "empty-state",
        "button"
      ]
    },
    {
      "name": "recipe-billing-summary",
      "type": "registry:block",
      "description": "Recipe -- a plan/usage summary composed from Card + Badge + Progress + Button. Installed via `dsgn add recipe:billing-summary`.",
      "registryDependencies": [
        "card",
        "badge",
        "progress",
        "button"
      ]
    },
    {
      "name": "recipe-team-members",
      "type": "registry:block",
      "description": "Recipe -- a team members table with per-row role badge and actions menu, composed from Table + Avatar + Badge + DropdownMenu + Button. Installed via `dsgn add recipe:team-members`.",
      "registryDependencies": [
        "table",
        "avatar",
        "badge",
        "dropdown-menu",
        "button"
      ]
    },
    {
      "name": "recipe-notification-list",
      "type": "registry:block",
      "description": "Recipe -- an unread-count notification feed composed from Card + Avatar + Badge. Installed via `dsgn add recipe:notification-list`.",
      "registryDependencies": [
        "card",
        "avatar",
        "badge"
      ]
    },
    {
      "name": "recipe-onboarding-checklist",
      "type": "registry:block",
      "description": "Recipe -- a step checklist with progress, composed from Card + Progress + Checkbox. Installed via `dsgn add recipe:onboarding-checklist`.",
      "registryDependencies": [
        "card",
        "progress",
        "checkbox"
      ]
    },
    {
      "name": "recipe-stat-tiles",
      "type": "registry:block",
      "description": "Recipe -- a responsive KPI tile grid with colored trend badges, composed from Card + Badge. Installed via `dsgn add recipe:stat-tiles`.",
      "registryDependencies": [
        "card",
        "badge"
      ]
    },
    {
      "name": "recipe-testimonial-marquee",
      "type": "registry:block",
      "description": "Recipe -- a hover-pausing auto-scrolling row of quote cards, composed from Card + Avatar with a self-contained CSS keyframe animation. Installed via `dsgn add recipe:testimonial-marquee`.",
      "registryDependencies": [
        "card",
        "avatar"
      ]
    },
    {
      "name": "rating",
      "type": "registry:ui",
      "description": "Star (or configurable icon) rating -- read-only display with fractional fill via a clipped overlay, plus a controlled interactive input mode with hover-preview and arrow-key support. Interactive mode uses role=\"radiogroup\"/\"radio\" (a discrete 1-N choice, not a continuous range). No new dependency -- inline SVG star icon.",
      "registryDependencies": [
        "utils"
      ]
    },
    {
      "name": "color-picker",
      "type": "registry:ui",
      "description": "A color swatch trigger that opens a Popover containing a native <input type=\"color\"> (real browser color-picker UI, no hand-rolled HSV wheel), a row of preset swatches, and a hex text input. Controlled: value/onValueChange.",
      "registryDependencies": [
        "popover",
        "input",
        "button"
      ]
    },
    {
      "name": "avatar-group",
      "type": "registry:ui",
      "description": "A row of overlapping Avatars (negative-margin stacking, ring-background separation) with a max prop that collapses overflow into a trailing \"+N\" avatar-styled badge.",
      "registryDependencies": [
        "avatar"
      ]
    },
    {
      "name": "command-palette",
      "type": "registry:ui",
      "description": "CommandPaletteProvider + useCommandPalette() + CommandPalette -- a generic, reusable global ⌘K/Ctrl+K command palette wired on top of Command's own CommandDialog chrome. The provider owns open/closed state and the keyboard shortcut; CommandPalette renders the dialog from an items list.",
      "registryDependencies": [
        "command"
      ]
    }
  ]
}