Smithery is now a part of Arcade.dev! Read more in our announcement here
Definitive reference and behavioral guide for the shadcn/ui ecosystem...
This skill provides the definitive behavior and workflow for interacting with the shadcn/ui ecosystem. shadcn/ui is a collection of beautifully-designed, accessible components and a code distribution platform built with TypeScript, Tailwind CSS, and Radix UI primitives.
components/ui). They are meant to be customized, not treated as black-box dependencies.lucide-react for all icons unless otherwise specified.You have access to shadcn MCP server tools. Always use these tools proactively:
shadcn_search_items_in_registries to find components.shadcn_get_item_examples_from_registries (e.g., sidebar-demo, chart-demo, data-table-demo) to understand implementation. This is critical for complex components.shadcn_get_add_command_for_items to get the CLI command.shadcn_get_audit_checklist after generating code.components.json. If missing, run npx shadcn@latest init.@latest CLI which handles the new CSS-variable-based configuration in globals.css (instead of tailwind.config.js).npx shadcn@latest add <component_name>.ui.shadcn.com/blocks.SidebarProvider, Sidebar, SidebarContent, etc. Always fetch the latest example as the API is highly specific.ChartConfig for theming and ChartContainer for responsive sizing.react-hook-form + zod. See forms.md.globals.css.next-themes for Next.js. See dark-mode.md.@/lib/utils)@/lib/utils exists and contains the cn helper.tsconfig.json or jsconfig.json (usually "@/*": ["./*"] or "@/*": ["./src/*"]).globals.css is correctly importing the shadcn theme variables.ThemeProvider has suppressHydrationWarning on the <html> tag.framer-motion for some animations or lucide-react for icons).npm install.globals.css file contains the @layer base styles and CSS variables (e.g., --background, --primary).@theme block syntax.