Setting the file. One moment.
Subchapter 5.6
resources/component-catalog.mdMarkdown12 KBView on GitHub
Complete reference of all available shadcn/ui components, organized by category.
Note: This catalog lists dependencies based on Radix UI. If you are using , the command will handle the correct dependencies automatically.
addCollapsible content sections.
npx shadcn@latest add accordionUse cases: FAQs, settings panels, navigation menus
Key props: type (single/multiple), collapsible
Dependencies: @radix-ui/react-accordion
Container for grouping related content.
npx shadcn@latest add cardSub-components: CardHeader, CardTitle, CardDescription, CardContent, CardFooter Use cases: Product cards, profile cards, dashboard widgets Dependencies: None
Visual divider between content sections.
npx shadcn@latest add separatorProps: orientation (horizontal/vertical), decorative
Dependencies: @radix-ui/react-separator
Organize content into multiple panels, one visible at a time.
npx shadcn@latest add tabsSub-components: TabsList, TabsTrigger, TabsContent Use cases: Settings pages, dashboards, multi-step forms Dependencies: @radix-ui/react-tabs
Show/hide content with smooth animation.
npx shadcn@latest add collapsibleProps: open, onOpenChange, disabled
Dependencies: @radix-ui/react-collapsible
Clickable button with variants and sizes.
npx shadcn@latest add buttonVariants: default, destructive, outline, secondary, ghost, link Sizes: default, sm, lg, icon Dependencies: @radix-ui/react-slot
Text input field.
npx shadcn@latest add inputTypes: text, email, password, number, tel, url Use cases: Forms, search bars, filters Dependencies: None
Accessible label for form fields.
npx shadcn@latest add labelUse with: All form inputs for accessibility Dependencies: @radix-ui/react-label
Multi-line text input.
npx shadcn@latest add textareaProps: rows, cols, resize (via className)
Dependencies: None
Binary toggle control.
npx shadcn@latest add checkboxProps: checked, onCheckedChange, disabled
Dependencies: @radix-ui/react-checkbox
Select one option from a set.
npx shadcn@latest add radio-groupSub-components: RadioGroupItem Dependencies: @radix-ui/react-radio-group
Dropdown selection control.
npx shadcn@latest add selectSub-components: SelectTrigger, SelectContent, SelectItem, SelectValue Use cases: Country selectors, category filters Dependencies: @radix-ui/react-select
Binary toggle with visual feedback.
npx shadcn@latest add switchProps: checked, onCheckedChange, disabled
Use cases: Settings toggles, feature flags
Dependencies: @radix-ui/react-switch
Select value from a range.
npx shadcn@latest add sliderProps: min, max, step, value, onValueChange
Use cases: Volume controls, filters, settings
Dependencies: @radix-ui/react-slider
Comprehensive form component with validation.
npx shadcn@latest add formSub-components: FormField, FormItem, FormLabel, FormControl, FormDescription, FormMessage Best used with: react-hook-form, zod Dependencies: @radix-ui/react-label, @radix-ui/react-slot
Display structured data in rows and columns.
npx shadcn@latest add tableSub-components: TableHeader, TableBody, TableHead, TableRow, TableCell, TableFooter, TableCaption Best used with: @tanstack/react-table Dependencies: None
Highlight status or category.
npx shadcn@latest add badgeVariants: default, secondary, destructive, outline Use cases: Status indicators, tags, notifications Dependencies: None
Display user profile images with fallback.
npx shadcn@latest add avatarSub-components: AvatarImage, AvatarFallback Dependencies: @radix-ui/react-avatar
Visual indicator of task completion.
npx shadcn@latest add progressProps: value (0-100)
Dependencies: @radix-ui/react-progress
Loading placeholder with animation.
npx shadcn@latest add skeletonUse cases: Content loading states Dependencies: None
Date selection interface.
npx shadcn@latest add calendarProps: mode (single/multiple/range), selected, onSelect
Dependencies: react-day-picker
Modal dialog overlay.
npx shadcn@latest add dialogSub-components: DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription Use cases: Confirmations, forms, detailed views Dependencies: @radix-ui/react-dialog
Side panel that slides in from edge.
npx shadcn@latest add sheetSides: top, right, bottom, left Sub-components: SheetTrigger, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription Use cases: Navigation menus, filters, settings Dependencies: @radix-ui/react-dialog
Floating content container.
npx shadcn@latest add popoverSub-components: PopoverTrigger, PopoverContent Use cases: Tooltips with actions, mini forms Dependencies: @radix-ui/react-popover
Contextual information on hover.
npx shadcn@latest add tooltipSub-components: TooltipProvider, TooltipTrigger, TooltipContent
Props: side, sideOffset, delayDuration
Dependencies: @radix-ui/react-tooltip
Context menu with actions.
npx shadcn@latest add dropdown-menuSub-components: DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuSeparator, DropdownMenuLabel Use cases: Action menus, settings Dependencies: @radix-ui/react-dropdown-menu
Right-click menu.
npx shadcn@latest add context-menuSub-components: Similar to DropdownMenu Use cases: Right-click actions, advanced UIs Dependencies: @radix-ui/react-context-menu
Horizontal menu bar.
npx shadcn@latest add menubarSub-components: MenubarMenu, MenubarTrigger, MenubarContent, MenubarItem Use cases: Application menus (File, Edit, View) Dependencies: @radix-ui/react-menubar
Modal dialog for important confirmations.
npx shadcn@latest add alert-dialogSub-components: AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel Use cases: Delete confirmations, destructive actions Dependencies: @radix-ui/react-alert-dialog
Content card revealed on hover.
npx shadcn@latest add hover-cardSub-components: HoverCardTrigger, HoverCardContent Use cases: User previews, detailed information Dependencies: @radix-ui/react-hover-card
Accessible navigation with dropdowns.
npx shadcn@latest add navigation-menuSub-components: NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink Use cases: Main site navigation Dependencies: @radix-ui/react-navigation-menu
Show current page location in hierarchy.
npx shadcn@latest add breadcrumbSub-components: BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator Use cases: Multi-level navigation Dependencies: None
Navigate through pages of content.
npx shadcn@latest add paginationSub-components: PaginationContent, PaginationItem, PaginationLink, PaginationPrevious, PaginationNext, PaginationEllipsis Dependencies: None
Display important messages.
npx shadcn@latest add alertVariants: default, destructive Sub-components: AlertTitle, AlertDescription Use cases: Error messages, warnings, info Dependencies: None
Temporary notification message.
npx shadcn@latest add toastProps: title, description, action, variant
Usage: Via useToast() hook
Dependencies: @radix-ui/react-toast
Alternative toast implementation.
npx shadcn@latest add sonnerBetter for: Rich notifications, multiple toasts Dependencies: sonner
Command palette with search and keyboard navigation.
npx shadcn@latest add commandSub-components: CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandSeparator Use cases: Command palettes, search interfaces Dependencies: cmdk
Searchable select dropdown.
npx shadcn@latest add comboboxUse cases: Autocomplete, country selectors Dependencies: cmdk (via command)
Maintain consistent width-height ratio.
npx shadcn@latest add aspect-ratioProps: ratio (e.g., 16/9, 4/3)
Dependencies: @radix-ui/react-aspect-ratio
Custom scrollbar styling.
npx shadcn@latest add scroll-areaUse cases: Custom scrollable areas Dependencies: @radix-ui/react-scroll-area
Resizable panel layout.
npx shadcn@latest add resizableSub-components: ResizablePanelGroup, ResizablePanel, ResizableHandle Use cases: Split views, adjustable layouts Dependencies: react-resizable-panels
Select dates with calendar popup.
npx shadcn@latest add date-pickerVariants: Single date, date range Dependencies: react-day-picker, date-fns
Slideshow component.
npx shadcn@latest add carouselSub-components: CarouselContent, CarouselItem, CarouselPrevious, CarouselNext Dependencies: embla-carousel-react
Bottom drawer for mobile interfaces.
npx shadcn@latest add drawerBest for: Mobile-first designs Dependencies: vaul
npx shadcn@latest add form input label button
npm install react-hook-form zod @hookform/resolversnpx shadcn@latest add table button dropdown-menu
npm install @tanstack/react-tablenpx shadcn@latest add card tabs badge avatarnpx shadcn@latest add card input label button tabs| Component | Category | Complexity | Dependencies |
|---|---|---|---|
| Button | Form | Simple | radix-slot |
| Input | Form | Simple | None |
| Card | Layout | Simple | None |
| Dialog | Overlay | Medium | radix-dialog |
| Table | Data | Simple | None |
| Form | Form | Complex | radix-label/slot |
| Command | Search | Complex | cmdk |
| Calendar | Date | Medium | react-day-picker |
Common component bundles:
# Essential forms
npx shadcn@latest add form input label button select checkbox
# Data display
npx shadcn@latest add table badge avatar progress skeleton
# Overlay/modal components
npx shadcn@latest add dialog sheet popover tooltip alert-dialog
# Navigation
npx shadcn@latest add navigation-menu breadcrumb pagination
# Layout
npx shadcn@latest add card accordion tabs separatorTo update components to the latest version:
# Re-add component (will prompt to overwrite)
npx shadcn@latest add button
# Or use diff command to see changes
npx shadcn@latest diff button