Loading source
Pulling the file list, source metadata, and syntax-aware rendering for this listing.
Source from repo
Integrate and customize shadcn/ui components—discovery, installation, theming, and Radix/Base UI best practices
Files
Skill
Size
Entrypoint
Format
Open file
Syntax-highlighted preview of this file as included in the skill package.
resources/component-catalog.md
1# shadcn/ui Component Catalog2Complete reference of all available shadcn/ui components, organized by category.4> **Note**: This catalog lists dependencies based on **Radix UI**. If you are using **Base UI**, the `add` command will handle the correct dependencies automatically.6## Layout Components8### Accordion10Collapsible content sections.11```bash12npx shadcn@latest add accordion13```14**Use cases**: FAQs, settings panels, navigation menus15**Key props**: `type` (single/multiple), `collapsible`16**Dependencies**: @radix-ui/react-accordion17### Card19Container for grouping related content.20```bash21npx shadcn@latest add card22```23**Sub-components**: CardHeader, CardTitle, CardDescription, CardContent, CardFooter24**Use cases**: Product cards, profile cards, dashboard widgets25**Dependencies**: None26### Separator28Visual divider between content sections.29```bash30npx shadcn@latest add separator31```32**Props**: `orientation` (horizontal/vertical), `decorative`33**Dependencies**: @radix-ui/react-separator34### Tabs36Organize content into multiple panels, one visible at a time.37```bash38npx shadcn@latest add tabs39```40**Sub-components**: TabsList, TabsTrigger, TabsContent41**Use cases**: Settings pages, dashboards, multi-step forms42**Dependencies**: @radix-ui/react-tabs43### Collapsible45Show/hide content with smooth animation.46```bash47npx shadcn@latest add collapsible48```49**Props**: `open`, `onOpenChange`, `disabled`50**Dependencies**: @radix-ui/react-collapsible51## Form Components53### Button55Clickable button with variants and sizes.56```bash57npx shadcn@latest add button58```59**Variants**: default, destructive, outline, secondary, ghost, link60**Sizes**: default, sm, lg, icon61**Dependencies**: @radix-ui/react-slot62### Input64Text input field.65```bash66npx shadcn@latest add input67```68**Types**: text, email, password, number, tel, url69**Use cases**: Forms, search bars, filters70**Dependencies**: None71### Label73Accessible label for form fields.74```bash75npx shadcn@latest add label76```77**Use with**: All form inputs for accessibility78**Dependencies**: @radix-ui/react-label79### Textarea81Multi-line text input.82```bash83npx shadcn@latest add textarea84```85**Props**: `rows`, `cols`, `resize` (via className)86**Dependencies**: None87### Checkbox89Binary toggle control.90```bash91npx shadcn@latest add checkbox92```93**Props**: `checked`, `onCheckedChange`, `disabled`94**Dependencies**: @radix-ui/react-checkbox95### Radio Group97Select one option from a set.98```bash99npx shadcn@latest add radio-group100```101**Sub-components**: RadioGroupItem102**Dependencies**: @radix-ui/react-radio-group103### Select105Dropdown selection control.106```bash107npx shadcn@latest add select108```109**Sub-components**: SelectTrigger, SelectContent, SelectItem, SelectValue110**Use cases**: Country selectors, category filters111**Dependencies**: @radix-ui/react-select112### Switch114Binary toggle with visual feedback.115```bash116npx shadcn@latest add switch117```118**Props**: `checked`, `onCheckedChange`, `disabled`119**Use cases**: Settings toggles, feature flags120**Dependencies**: @radix-ui/react-switch121### Slider123Select value from a range.124```bash125npx shadcn@latest add slider126```127**Props**: `min`, `max`, `step`, `value`, `onValueChange`128**Use cases**: Volume controls, filters, settings129**Dependencies**: @radix-ui/react-slider130### Form132Comprehensive form component with validation.133```bash134npx shadcn@latest add form135```136**Sub-components**: FormField, FormItem, FormLabel, FormControl, FormDescription, FormMessage137**Best used with**: react-hook-form, zod138**Dependencies**: @radix-ui/react-label, @radix-ui/react-slot139## Data Display141### Table143Display structured data in rows and columns.144```bash145npx shadcn@latest add table146```147**Sub-components**: TableHeader, TableBody, TableHead, TableRow, TableCell, TableFooter, TableCaption148**Best used with**: @tanstack/react-table149**Dependencies**: None150### Badge152Highlight status or category.153```bash154npx shadcn@latest add badge155```156**Variants**: default, secondary, destructive, outline157**Use cases**: Status indicators, tags, notifications158**Dependencies**: None159### Avatar161Display user profile images with fallback.162```bash163npx shadcn@latest add avatar164```165**Sub-components**: AvatarImage, AvatarFallback166**Dependencies**: @radix-ui/react-avatar167### Progress169Visual indicator of task completion.170```bash171npx shadcn@latest add progress172```173**Props**: `value` (0-100)174**Dependencies**: @radix-ui/react-progress175### Skeleton177Loading placeholder with animation.178```bash179npx shadcn@latest add skeleton180```181**Use cases**: Content loading states182**Dependencies**: None183### Calendar185Date selection interface.186```bash187npx shadcn@latest add calendar188```189**Props**: `mode` (single/multiple/range), `selected`, `onSelect`190**Dependencies**: react-day-picker191## Overlay Components193### Dialog195Modal dialog overlay.196```bash197npx shadcn@latest add dialog198```199**Sub-components**: DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription200**Use cases**: Confirmations, forms, detailed views201**Dependencies**: @radix-ui/react-dialog202### Sheet204Side panel that slides in from edge.205```bash206npx shadcn@latest add sheet207```208**Sides**: top, right, bottom, left209**Sub-components**: SheetTrigger, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription210**Use cases**: Navigation menus, filters, settings211**Dependencies**: @radix-ui/react-dialog212### Popover214Floating content container.215```bash216npx shadcn@latest add popover217```218**Sub-components**: PopoverTrigger, PopoverContent219**Use cases**: Tooltips with actions, mini forms220**Dependencies**: @radix-ui/react-popover221### Tooltip223Contextual information on hover.224```bash225npx shadcn@latest add tooltip226```227**Sub-components**: TooltipProvider, TooltipTrigger, TooltipContent228**Props**: `side`, `sideOffset`, `delayDuration`229**Dependencies**: @radix-ui/react-tooltip230### Dropdown Menu232Context menu with actions.233```bash234npx shadcn@latest add dropdown-menu235```236**Sub-components**: DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuSeparator, DropdownMenuLabel237**Use cases**: Action menus, settings238**Dependencies**: @radix-ui/react-dropdown-menu239### Context Menu241Right-click menu.242```bash243npx shadcn@latest add context-menu244```245**Sub-components**: Similar to DropdownMenu246**Use cases**: Right-click actions, advanced UIs247**Dependencies**: @radix-ui/react-context-menu248### Menubar250Horizontal menu bar.251```bash252npx shadcn@latest add menubar253```254**Sub-components**: MenubarMenu, MenubarTrigger, MenubarContent, MenubarItem255**Use cases**: Application menus (File, Edit, View)256**Dependencies**: @radix-ui/react-menubar257### Alert Dialog259Modal dialog for important confirmations.260```bash261npx shadcn@latest add alert-dialog262```263**Sub-components**: AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel264**Use cases**: Delete confirmations, destructive actions265**Dependencies**: @radix-ui/react-alert-dialog266### Hover Card268Content card revealed on hover.269```bash270npx shadcn@latest add hover-card271```272**Sub-components**: HoverCardTrigger, HoverCardContent273**Use cases**: User previews, detailed information274**Dependencies**: @radix-ui/react-hover-card275## Navigation277### Navigation Menu279Accessible navigation with dropdowns.280```bash281npx shadcn@latest add navigation-menu282```283**Sub-components**: NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink284**Use cases**: Main site navigation285**Dependencies**: @radix-ui/react-navigation-menu286### Breadcrumb288Show current page location in hierarchy.289```bash290npx shadcn@latest add breadcrumb291```292**Sub-components**: BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator293**Use cases**: Multi-level navigation294**Dependencies**: None295### Pagination297Navigate through pages of content.298```bash299npx shadcn@latest add pagination300```301**Sub-components**: PaginationContent, PaginationItem, PaginationLink, PaginationPrevious, PaginationNext, PaginationEllipsis302**Dependencies**: None303## Feedback Components305### Alert307Display important messages.308```bash309npx shadcn@latest add alert310```311**Variants**: default, destructive312**Sub-components**: AlertTitle, AlertDescription313**Use cases**: Error messages, warnings, info314**Dependencies**: None315### Toast317Temporary notification message.318```bash319npx shadcn@latest add toast320```321**Props**: `title`, `description`, `action`, `variant`322**Usage**: Via `useToast()` hook323**Dependencies**: @radix-ui/react-toast324### Sonner326Alternative toast implementation.327```bash328npx shadcn@latest add sonner329```330**Better for**: Rich notifications, multiple toasts331**Dependencies**: sonner332## Command & Search334### Command336Command palette with search and keyboard navigation.337```bash338npx shadcn@latest add command339```340**Sub-components**: CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandSeparator341**Use cases**: Command palettes, search interfaces342**Dependencies**: cmdk343### Combobox345Searchable select dropdown.346```bash347npx shadcn@latest add combobox348```349**Use cases**: Autocomplete, country selectors350**Dependencies**: cmdk (via command)351## Utility Components353### Aspect Ratio355Maintain consistent width-height ratio.356```bash357npx shadcn@latest add aspect-ratio358```359**Props**: `ratio` (e.g., 16/9, 4/3)360**Dependencies**: @radix-ui/react-aspect-ratio361### Scroll Area363Custom scrollbar styling.364```bash365npx shadcn@latest add scroll-area366```367**Use cases**: Custom scrollable areas368**Dependencies**: @radix-ui/react-scroll-area369### Resizable371Resizable panel layout.372```bash373npx shadcn@latest add resizable374```375**Sub-components**: ResizablePanelGroup, ResizablePanel, ResizableHandle376**Use cases**: Split views, adjustable layouts377**Dependencies**: react-resizable-panels378## Date & Time380### Date Picker382Select dates with calendar popup.383```bash384npx shadcn@latest add date-picker385```386**Variants**: Single date, date range387**Dependencies**: react-day-picker, date-fns388## Advanced Components390### Carousel392Slideshow component.393```bash394npx shadcn@latest add carousel395```396**Sub-components**: CarouselContent, CarouselItem, CarouselPrevious, CarouselNext397**Dependencies**: embla-carousel-react398### Drawer400Bottom drawer for mobile interfaces.401```bash402npx shadcn@latest add drawer403```404**Best for**: Mobile-first designs405**Dependencies**: vaul406## Component Composition Patterns408### Form + Validation Pattern410```bash411npx shadcn@latest add form input label button412npm install react-hook-form zod @hookform/resolvers413```414### Data Table Pattern416```bash417npx shadcn@latest add table button dropdown-menu418npm install @tanstack/react-table419```420### Dashboard Layout Pattern422```bash423npx shadcn@latest add card tabs badge avatar424```425### Authentication Pattern427```bash428npx shadcn@latest add card input label button tabs429```430## Quick Reference432| Component | Category | Complexity | Dependencies |434|-----------|----------|------------|--------------|435| Button | Form | Simple | radix-slot |436| Input | Form | Simple | None |437| Card | Layout | Simple | None |438| Dialog | Overlay | Medium | radix-dialog |439| Table | Data | Simple | None |440| Form | Form | Complex | radix-label/slot |441| Command | Search | Complex | cmdk |442| Calendar | Date | Medium | react-day-picker |443## Installation Shortcuts445Common component bundles:447```bash449# Essential forms450npx shadcn@latest add form input label button select checkbox451# Data display453npx shadcn@latest add table badge avatar progress skeleton454# Overlay/modal components456npx shadcn@latest add dialog sheet popover tooltip alert-dialog457# Navigation459npx shadcn@latest add navigation-menu breadcrumb pagination460# Layout462npx shadcn@latest add card accordion tabs separator463```464## Component Updates466To update components to the latest version:468```bash470# Re-add component (will prompt to overwrite)471npx shadcn@latest add button472# Or use diff command to see changes474npx shadcn@latest diff button475```476## Further Reading478- [Official Component Docs](https://ui.shadcn.com/docs/components)480- [Component Examples](https://ui.shadcn.com/examples)481- [Radix UI Primitives](https://www.radix-ui.com/primitives)482