08ce228df1
Some checks failed
DSS Project Analysis / dss-context-update (push) Has been cancelled
- Remove legacy admin-ui/js/ vanilla JS components - Add .dss/ directory with core tokens, skins, themes - Add Storybook configuration and generated stories - Add DSS management scripts (dss-services, dss-init, dss-setup, dss-reset) - Add MCP command definitions for DSS plugin - Add Figma sync architecture and scripts - Update pre-commit hooks with documentation validation - Fix JSON trailing commas in skin files 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
838 lines
24 KiB
JSON
838 lines
24 KiB
JSON
{
|
|
"_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"
|
|
]
|
|
}
|
|
}
|