{
  "_meta": {
    "description": "shadcn/ui Component Registry - All 59 components with variants and tokens",
    "version": "1.0.0",
    "source": "https://ui.shadcn.com/docs/components",
    "lastUpdated": "2025-12-10"
  },

  "components": {
    "accordion": {
      "name": "Accordion",
      "category": "data-display",
      "description": "A vertically stacked set of interactive headings that reveal content sections",
      "radixPrimitive": "@radix-ui/react-accordion",
      "variants": {},
      "tokens": {
        "background": "var(--color-background)",
        "border": "var(--color-border)",
        "text": "var(--color-foreground)"
      }
    },

    "alert": {
      "name": "Alert",
      "category": "feedback",
      "description": "Displays a callout for user attention",
      "variants": {
        "variant": ["default", "destructive"]
      },
      "tokens": {
        "background": "var(--color-background)",
        "border": "var(--color-border)",
        "foreground": "var(--color-foreground)",
        "destructive": "var(--color-destructive)"
      }
    },

    "alert-dialog": {
      "name": "Alert Dialog",
      "category": "overlay",
      "description": "A modal dialog that interrupts user flow with important information",
      "radixPrimitive": "@radix-ui/react-alert-dialog",
      "tokens": {
        "overlay": "var(--color-background)/80",
        "background": "var(--color-background)",
        "border": "var(--color-border)"
      }
    },

    "aspect-ratio": {
      "name": "Aspect Ratio",
      "category": "layout",
      "description": "Displays content with a desired aspect ratio",
      "radixPrimitive": "@radix-ui/react-aspect-ratio"
    },

    "avatar": {
      "name": "Avatar",
      "category": "data-display",
      "description": "An image element with a fallback for user profile images",
      "radixPrimitive": "@radix-ui/react-avatar",
      "variants": {
        "size": ["sm", "md", "lg"]
      },
      "tokens": {
        "background": "var(--color-muted)",
        "fallback": "var(--color-muted-foreground)"
      }
    },

    "badge": {
      "name": "Badge",
      "category": "data-display",
      "description": "Displays a badge or label",
      "variants": {
        "variant": ["default", "secondary", "destructive", "outline"]
      },
      "tokens": {
        "default": {
          "background": "var(--color-primary)",
          "text": "var(--color-primary-foreground)"
        },
        "secondary": {
          "background": "var(--color-secondary)",
          "text": "var(--color-secondary-foreground)"
        },
        "destructive": {
          "background": "var(--color-destructive)",
          "text": "var(--color-destructive-foreground)"
        },
        "outline": {
          "border": "var(--color-border)",
          "text": "var(--color-foreground)"
        }
      }
    },

    "breadcrumb": {
      "name": "Breadcrumb",
      "category": "navigation",
      "description": "Displays the path to the current page in a hierarchy",
      "tokens": {
        "text": "var(--color-muted-foreground)",
        "active": "var(--color-foreground)",
        "separator": "var(--color-muted-foreground)"
      }
    },

    "button": {
      "name": "Button",
      "category": "form",
      "description": "Displays a button or a component that looks like a button",
      "variants": {
        "variant": ["default", "destructive", "outline", "secondary", "ghost", "link"],
        "size": ["default", "sm", "lg", "icon", "icon-sm", "icon-lg"]
      },
      "tokens": {
        "default": {
          "background": "var(--color-primary)",
          "text": "var(--color-primary-foreground)",
          "hover": "var(--color-primary)/90"
        },
        "destructive": {
          "background": "var(--color-destructive)",
          "text": "var(--color-destructive-foreground)",
          "hover": "var(--color-destructive)/90"
        },
        "outline": {
          "border": "var(--color-input)",
          "background": "var(--color-background)",
          "text": "var(--color-foreground)",
          "hover": "var(--color-accent)"
        },
        "secondary": {
          "background": "var(--color-secondary)",
          "text": "var(--color-secondary-foreground)",
          "hover": "var(--color-secondary)/80"
        },
        "ghost": {
          "text": "var(--color-foreground)",
          "hover": "var(--color-accent)"
        },
        "link": {
          "text": "var(--color-primary)"
        }
      },
      "sizing": {
        "default": { "height": "2.5rem", "px": "1rem", "py": "0.5rem" },
        "sm": { "height": "2rem", "px": "0.75rem" },
        "lg": { "height": "3rem", "px": "2rem" },
        "icon": { "size": "2.5rem" },
        "icon-sm": { "size": "2rem" },
        "icon-lg": { "size": "2.75rem" }
      }
    },

    "button-group": {
      "name": "Button Group",
      "category": "form",
      "description": "Groups multiple buttons together",
      "tokens": {
        "gap": "var(--spacing-1)"
      }
    },

    "calendar": {
      "name": "Calendar",
      "category": "form",
      "description": "A date picker component with monthly/yearly views",
      "dependencies": ["react-day-picker"],
      "tokens": {
        "background": "var(--color-background)",
        "text": "var(--color-foreground)",
        "selected": "var(--color-primary)",
        "today": "var(--color-accent)"
      }
    },

    "card": {
      "name": "Card",
      "category": "layout",
      "description": "Displays a card with header, content, and footer",
      "subComponents": ["CardHeader", "CardTitle", "CardDescription", "CardContent", "CardFooter"],
      "tokens": {
        "background": "var(--color-card)",
        "foreground": "var(--color-card-foreground)",
        "border": "var(--color-border)",
        "shadow": "var(--shadow-sm)"
      }
    },

    "carousel": {
      "name": "Carousel",
      "category": "data-display",
      "description": "A carousel with embla-carousel",
      "dependencies": ["embla-carousel-react"],
      "tokens": {
        "button": "var(--color-background)",
        "indicator": "var(--color-muted)"
      }
    },

    "chart": {
      "name": "Chart",
      "category": "data-display",
      "description": "Beautiful charts using Recharts",
      "dependencies": ["recharts"],
      "tokens": {
        "colors": ["var(--chart-1)", "var(--chart-2)", "var(--chart-3)", "var(--chart-4)", "var(--chart-5)"]
      }
    },

    "checkbox": {
      "name": "Checkbox",
      "category": "form",
      "description": "A control that allows toggling between checked and unchecked",
      "radixPrimitive": "@radix-ui/react-checkbox",
      "tokens": {
        "border": "var(--color-primary)",
        "checked": "var(--color-primary)",
        "checkmark": "var(--color-primary-foreground)"
      }
    },

    "collapsible": {
      "name": "Collapsible",
      "category": "data-display",
      "description": "An interactive component that expands/collapses content",
      "radixPrimitive": "@radix-ui/react-collapsible"
    },

    "combobox": {
      "name": "Combobox",
      "category": "form",
      "description": "Autocomplete input with command palette",
      "composedOf": ["command", "popover"],
      "tokens": {
        "input": "var(--color-input)",
        "background": "var(--color-popover)",
        "text": "var(--color-popover-foreground)"
      }
    },

    "command": {
      "name": "Command",
      "category": "form",
      "description": "Command palette with search and filtering",
      "dependencies": ["cmdk"],
      "tokens": {
        "background": "var(--color-popover)",
        "text": "var(--color-popover-foreground)",
        "separator": "var(--color-border)"
      }
    },

    "context-menu": {
      "name": "Context Menu",
      "category": "overlay",
      "description": "Right-click context menu with keyboard support",
      "radixPrimitive": "@radix-ui/react-context-menu",
      "tokens": {
        "background": "var(--color-popover)",
        "text": "var(--color-popover-foreground)",
        "hover": "var(--color-accent)"
      }
    },

    "data-table": {
      "name": "Data Table",
      "category": "data-display",
      "description": "Powerful table with sorting, filtering, pagination",
      "dependencies": ["@tanstack/react-table"],
      "composedOf": ["table", "dropdown-menu", "button", "input"],
      "tokens": {
        "header": "var(--color-muted)",
        "row": "var(--color-background)",
        "rowHover": "var(--color-muted)/50",
        "border": "var(--color-border)"
      }
    },

    "date-picker": {
      "name": "Date Picker",
      "category": "form",
      "description": "A date picker built with calendar and popover",
      "composedOf": ["calendar", "popover", "button"],
      "tokens": {
        "input": "var(--color-input)",
        "background": "var(--color-popover)"
      }
    },

    "dialog": {
      "name": "Dialog",
      "category": "overlay",
      "description": "A modal dialog for content display",
      "radixPrimitive": "@radix-ui/react-dialog",
      "subComponents": ["DialogTrigger", "DialogContent", "DialogHeader", "DialogFooter", "DialogTitle", "DialogDescription"],
      "tokens": {
        "overlay": "var(--color-background)/80",
        "background": "var(--color-background)",
        "border": "var(--color-border)"
      }
    },

    "drawer": {
      "name": "Drawer",
      "category": "overlay",
      "description": "A drawer component extending dialog",
      "dependencies": ["vaul"],
      "tokens": {
        "background": "var(--color-background)",
        "handle": "var(--color-muted)"
      }
    },

    "dropdown-menu": {
      "name": "Dropdown Menu",
      "category": "overlay",
      "description": "Menu displayed on trigger interaction",
      "radixPrimitive": "@radix-ui/react-dropdown-menu",
      "tokens": {
        "background": "var(--color-popover)",
        "text": "var(--color-popover-foreground)",
        "hover": "var(--color-accent)",
        "separator": "var(--color-border)"
      }
    },

    "empty": {
      "name": "Empty",
      "category": "feedback",
      "description": "Empty state display",
      "tokens": {
        "icon": "var(--color-muted-foreground)",
        "text": "var(--color-muted-foreground)"
      }
    },

    "field": {
      "name": "Field",
      "category": "form",
      "description": "Form field wrapper with label and error",
      "composedOf": ["label", "input"],
      "tokens": {
        "label": "var(--color-foreground)",
        "error": "var(--color-destructive)"
      }
    },

    "form": {
      "name": "Form",
      "category": "form",
      "description": "Form component with react-hook-form integration",
      "dependencies": ["react-hook-form", "@hookform/resolvers", "zod"],
      "tokens": {
        "label": "var(--color-foreground)",
        "description": "var(--color-muted-foreground)",
        "error": "var(--color-destructive)"
      }
    },

    "hover-card": {
      "name": "Hover Card",
      "category": "overlay",
      "description": "Content appearing on hover",
      "radixPrimitive": "@radix-ui/react-hover-card",
      "tokens": {
        "background": "var(--color-popover)",
        "text": "var(--color-popover-foreground)",
        "border": "var(--color-border)"
      }
    },

    "input": {
      "name": "Input",
      "category": "form",
      "description": "Text input field",
      "tokens": {
        "background": "var(--color-background)",
        "border": "var(--color-input)",
        "text": "var(--color-foreground)",
        "placeholder": "var(--color-muted-foreground)",
        "focus": "var(--color-ring)"
      }
    },

    "input-group": {
      "name": "Input Group",
      "category": "form",
      "description": "Group of inputs with addons",
      "tokens": {
        "addon": "var(--color-muted)"
      }
    },

    "input-otp": {
      "name": "Input OTP",
      "category": "form",
      "description": "One-time password input",
      "dependencies": ["input-otp"],
      "tokens": {
        "border": "var(--color-input)",
        "focus": "var(--color-ring)"
      }
    },

    "item": {
      "name": "Item",
      "category": "data-display",
      "description": "Generic list item component"
    },

    "kbd": {
      "name": "Kbd",
      "category": "data-display",
      "description": "Keyboard key display",
      "tokens": {
        "background": "var(--color-muted)",
        "text": "var(--color-muted-foreground)",
        "border": "var(--color-border)"
      }
    },

    "label": {
      "name": "Label",
      "category": "form",
      "description": "Text label for form elements",
      "radixPrimitive": "@radix-ui/react-label",
      "tokens": {
        "text": "var(--color-foreground)"
      }
    },

    "menubar": {
      "name": "Menubar",
      "category": "navigation",
      "description": "Horizontal menu with dropdowns",
      "radixPrimitive": "@radix-ui/react-menubar",
      "tokens": {
        "background": "var(--color-background)",
        "text": "var(--color-foreground)",
        "hover": "var(--color-accent)"
      }
    },

    "native-select": {
      "name": "Native Select",
      "category": "form",
      "description": "Native HTML select element with styling",
      "tokens": {
        "background": "var(--color-background)",
        "border": "var(--color-input)",
        "text": "var(--color-foreground)"
      }
    },

    "navigation-menu": {
      "name": "Navigation Menu",
      "category": "navigation",
      "description": "Website navigation with mega menus",
      "radixPrimitive": "@radix-ui/react-navigation-menu",
      "tokens": {
        "background": "var(--color-background)",
        "text": "var(--color-foreground)",
        "hover": "var(--color-accent)",
        "indicator": "var(--color-primary)"
      }
    },

    "pagination": {
      "name": "Pagination",
      "category": "navigation",
      "description": "Page navigation with previous/next",
      "tokens": {
        "text": "var(--color-foreground)",
        "active": "var(--color-primary)",
        "disabled": "var(--color-muted-foreground)"
      }
    },

    "popover": {
      "name": "Popover",
      "category": "overlay",
      "description": "Floating content panel",
      "radixPrimitive": "@radix-ui/react-popover",
      "tokens": {
        "background": "var(--color-popover)",
        "text": "var(--color-popover-foreground)",
        "border": "var(--color-border)"
      }
    },

    "progress": {
      "name": "Progress",
      "category": "feedback",
      "description": "Progress indicator bar",
      "radixPrimitive": "@radix-ui/react-progress",
      "tokens": {
        "background": "var(--color-secondary)",
        "indicator": "var(--color-primary)"
      }
    },

    "radio-group": {
      "name": "Radio Group",
      "category": "form",
      "description": "Set of mutually exclusive options",
      "radixPrimitive": "@radix-ui/react-radio-group",
      "tokens": {
        "border": "var(--color-primary)",
        "checked": "var(--color-primary)"
      }
    },

    "resizable": {
      "name": "Resizable",
      "category": "layout",
      "description": "Resizable panel groups",
      "dependencies": ["react-resizable-panels"],
      "tokens": {
        "handle": "var(--color-border)"
      }
    },

    "scroll-area": {
      "name": "Scroll Area",
      "category": "layout",
      "description": "Custom scrollbar styling",
      "radixPrimitive": "@radix-ui/react-scroll-area",
      "tokens": {
        "thumb": "var(--color-border)",
        "track": "var(--color-muted)"
      }
    },

    "select": {
      "name": "Select",
      "category": "form",
      "description": "Custom select dropdown",
      "radixPrimitive": "@radix-ui/react-select",
      "tokens": {
        "trigger": {
          "background": "var(--color-background)",
          "border": "var(--color-input)",
          "text": "var(--color-foreground)"
        },
        "content": {
          "background": "var(--color-popover)",
          "text": "var(--color-popover-foreground)"
        },
        "item": {
          "hover": "var(--color-accent)"
        }
      }
    },

    "separator": {
      "name": "Separator",
      "category": "layout",
      "description": "Visual divider",
      "radixPrimitive": "@radix-ui/react-separator",
      "variants": {
        "orientation": ["horizontal", "vertical"]
      },
      "tokens": {
        "color": "var(--color-border)"
      }
    },

    "sheet": {
      "name": "Sheet",
      "category": "overlay",
      "description": "Side panel overlay",
      "radixPrimitive": "@radix-ui/react-dialog",
      "variants": {
        "side": ["top", "right", "bottom", "left"]
      },
      "tokens": {
        "overlay": "var(--color-background)/80",
        "background": "var(--color-background)",
        "border": "var(--color-border)"
      }
    },

    "sidebar": {
      "name": "Sidebar",
      "category": "navigation",
      "description": "Application sidebar with collapsible sections",
      "tokens": {
        "background": "var(--color-sidebar-background)",
        "text": "var(--color-sidebar-foreground)",
        "hover": "var(--color-sidebar-accent)",
        "border": "var(--color-sidebar-border)"
      }
    },

    "skeleton": {
      "name": "Skeleton",
      "category": "feedback",
      "description": "Loading placeholder",
      "tokens": {
        "background": "var(--color-muted)"
      }
    },

    "slider": {
      "name": "Slider",
      "category": "form",
      "description": "Range slider input",
      "radixPrimitive": "@radix-ui/react-slider",
      "tokens": {
        "track": "var(--color-secondary)",
        "range": "var(--color-primary)",
        "thumb": "var(--color-background)"
      }
    },

    "sonner": {
      "name": "Sonner",
      "category": "feedback",
      "description": "Toast notifications with sonner",
      "dependencies": ["sonner"],
      "tokens": {
        "background": "var(--color-background)",
        "text": "var(--color-foreground)",
        "border": "var(--color-border)"
      }
    },

    "spinner": {
      "name": "Spinner",
      "category": "feedback",
      "description": "Loading spinner animation",
      "tokens": {
        "color": "var(--color-primary)"
      }
    },

    "switch": {
      "name": "Switch",
      "category": "form",
      "description": "Toggle switch control",
      "radixPrimitive": "@radix-ui/react-switch",
      "tokens": {
        "background": "var(--color-input)",
        "checked": "var(--color-primary)",
        "thumb": "var(--color-background)"
      }
    },

    "table": {
      "name": "Table",
      "category": "data-display",
      "description": "Styled HTML table",
      "subComponents": ["TableHeader", "TableBody", "TableFooter", "TableRow", "TableHead", "TableCell", "TableCaption"],
      "tokens": {
        "header": "var(--color-muted)",
        "row": "var(--color-background)",
        "rowHover": "var(--color-muted)/50",
        "border": "var(--color-border)"
      }
    },

    "tabs": {
      "name": "Tabs",
      "category": "navigation",
      "description": "Tabbed interface",
      "radixPrimitive": "@radix-ui/react-tabs",
      "tokens": {
        "list": "var(--color-muted)",
        "trigger": "var(--color-muted-foreground)",
        "triggerActive": "var(--color-foreground)",
        "content": "var(--color-background)"
      }
    },

    "textarea": {
      "name": "Textarea",
      "category": "form",
      "description": "Multi-line text input",
      "tokens": {
        "background": "var(--color-background)",
        "border": "var(--color-input)",
        "text": "var(--color-foreground)",
        "placeholder": "var(--color-muted-foreground)",
        "focus": "var(--color-ring)"
      }
    },

    "toast": {
      "name": "Toast",
      "category": "feedback",
      "description": "Toast notification component",
      "radixPrimitive": "@radix-ui/react-toast",
      "variants": {
        "variant": ["default", "destructive"]
      },
      "tokens": {
        "background": "var(--color-background)",
        "text": "var(--color-foreground)",
        "border": "var(--color-border)",
        "destructive": "var(--color-destructive)"
      }
    },

    "toggle": {
      "name": "Toggle",
      "category": "form",
      "description": "Two-state button",
      "radixPrimitive": "@radix-ui/react-toggle",
      "variants": {
        "variant": ["default", "outline"],
        "size": ["default", "sm", "lg"]
      },
      "tokens": {
        "background": "var(--color-transparent)",
        "hover": "var(--color-muted)",
        "active": "var(--color-accent)"
      }
    },

    "toggle-group": {
      "name": "Toggle Group",
      "category": "form",
      "description": "Group of toggle buttons",
      "radixPrimitive": "@radix-ui/react-toggle-group",
      "tokens": {
        "background": "var(--color-muted)",
        "active": "var(--color-background)"
      }
    },

    "tooltip": {
      "name": "Tooltip",
      "category": "overlay",
      "description": "Informative popup on hover",
      "radixPrimitive": "@radix-ui/react-tooltip",
      "tokens": {
        "background": "var(--color-popover)",
        "text": "var(--color-popover-foreground)"
      }
    },

    "typography": {
      "name": "Typography",
      "category": "data-display",
      "description": "Text styling components",
      "subComponents": ["H1", "H2", "H3", "H4", "P", "Lead", "Large", "Small", "Muted", "Blockquote", "InlineCode"],
      "tokens": {
        "heading": "var(--color-foreground)",
        "body": "var(--color-foreground)",
        "muted": "var(--color-muted-foreground)",
        "code": "var(--color-foreground)"
      }
    }
  },

  "categories": {
    "form": {
      "name": "Form Components",
      "description": "Input controls and form elements",
      "components": ["button", "button-group", "calendar", "checkbox", "combobox", "command", "date-picker", "field", "form", "input", "input-group", "input-otp", "label", "native-select", "radio-group", "select", "slider", "switch", "textarea", "toggle", "toggle-group"]
    },
    "data-display": {
      "name": "Data Display",
      "description": "Components for displaying data",
      "components": ["accordion", "avatar", "badge", "carousel", "chart", "collapsible", "data-table", "item", "kbd", "table", "typography"]
    },
    "feedback": {
      "name": "Feedback",
      "description": "User feedback components",
      "components": ["alert", "empty", "progress", "skeleton", "sonner", "spinner", "toast"]
    },
    "navigation": {
      "name": "Navigation",
      "description": "Navigation components",
      "components": ["breadcrumb", "menubar", "navigation-menu", "pagination", "sidebar", "tabs"]
    },
    "overlay": {
      "name": "Overlay",
      "description": "Modal and overlay components",
      "components": ["alert-dialog", "context-menu", "dialog", "drawer", "dropdown-menu", "hover-card", "popover", "sheet", "tooltip"]
    },
    "layout": {
      "name": "Layout",
      "description": "Layout and structure components",
      "components": ["aspect-ratio", "card", "resizable", "scroll-area", "separator"]
    }
  },

  "dependencies": {
    "core": ["class-variance-authority", "clsx", "tailwind-merge"],
    "radix": [
      "@radix-ui/react-accordion",
      "@radix-ui/react-alert-dialog",
      "@radix-ui/react-aspect-ratio",
      "@radix-ui/react-avatar",
      "@radix-ui/react-checkbox",
      "@radix-ui/react-collapsible",
      "@radix-ui/react-context-menu",
      "@radix-ui/react-dialog",
      "@radix-ui/react-dropdown-menu",
      "@radix-ui/react-hover-card",
      "@radix-ui/react-label",
      "@radix-ui/react-menubar",
      "@radix-ui/react-navigation-menu",
      "@radix-ui/react-popover",
      "@radix-ui/react-progress",
      "@radix-ui/react-radio-group",
      "@radix-ui/react-scroll-area",
      "@radix-ui/react-select",
      "@radix-ui/react-separator",
      "@radix-ui/react-slider",
      "@radix-ui/react-switch",
      "@radix-ui/react-tabs",
      "@radix-ui/react-toast",
      "@radix-ui/react-toggle",
      "@radix-ui/react-toggle-group",
      "@radix-ui/react-tooltip"
    ],
    "additional": [
      "cmdk",
      "embla-carousel-react",
      "input-otp",
      "react-day-picker",
      "react-hook-form",
      "@hookform/resolvers",
      "react-resizable-panels",
      "recharts",
      "sonner",
      "vaul",
      "zod",
      "@tanstack/react-table"
    ]
  }
}