shadcn/ui Highlights Summary

Every highlight bullet from the 8 pages in this section, gathered on one page and grouped by the page it came from.

shadcn/ui Setup

• shadcn is not a package, it copies editable source into components/ui
• Run npx shadcn@latest init to generate components.json and the cn utility
• The cn() helper merges clsx output through tailwind-merge to resolve conflicts
• Theming uses oklch CSS variables defined under :root and .dark blocks
• next-themes with attribute='class' toggles the .dark class for dark mode
• Re-running add overwrites a component, losing any local customizations

Button

• Button uses class-variance-authority to map variant and size to Tailwind classes
• asChild uses Radix Slot to merge button props onto a child element
• Icon-only buttons need aria-label so screen readers announce a meaningful name
• Buttons inside forms default to type submit, so set type button explicitly
• Pair useFormStatus pending state with a spinner for server action submits
• Extract the variant union via VariantProps of typeof buttonVariants for typing

Dialog

• Controlled dialogs use open and onOpenChange to close after async submission
• Built on @radix-ui/react-dialog, providing focus trap, ESC, and portal rendering
• asChild merges trigger props onto a single child like a Button
• Reset form state inside onOpenChange since content stays mounted between opens
• Add max-h-[85vh] overflow-y-auto to DialogContent to fix mobile overflow
• Prevent dismissal with onInteractOutside and onEscapeKeyDown preventDefault handlers

Form

• Combines react-hook-form, Zod, and the zodResolver bridge for typed validation
• FormItem generates an id wiring label, control, and message via aria-describedby
• Select needs onValueChange and defaultValue, not a spread field object
• Switch wires checked and onCheckedChange instead of spreading field props
• Use z.coerce.number() because number inputs always return string values
• FormControl must wrap exactly one child to clone ARIA attributes correctly

Data Table

• useReactTable takes data, columns, and tree-shakeable row-model feature plugins
• flexRender renders a column definition that may be string, component, or function
• Define columns outside the component or memoize to avoid infinite re-renders
• Manage sorting, filters, and pagination as external React state passed to the table
• Use manualPagination with pageCount for server-side paging without getPaginationRowModel
• row.original and row.getValue stay fully typed through the generic ColumnDef

Command

• Command is built on cmdk, a headless composable command menu by Paco Coursey
• CommandDialog wraps Command in a Dialog for Cmd+K modal palettes
• onSelect receives a lowercased value, so look up original data by ID
• Set shouldFilter false for async API search and filter server-side
• CommandItem filters by text content, so icon-only items need a value prop
• Wrap Command in a Popover to build a searchable combobox select

Toast

• Add <Toaster /> to the root layout or toast() calls silently do nothing
• toast() is a plain function, callable from handlers and server action callbacks
• toast.promise auto-transitions through loading, success, and error states
• Reuse a returned toast id to update an existing toast in place
• richColors gives typed toasts colored backgrounds needing dark-mode testing
• Sonner replaces the deprecated shadcn toast, installed via add sonner

Sidebar

• SidebarProvider must wrap both Sidebar and main to manage the flex layout
• collapsible='icon' shrinks to icons, hiding text via group-data collapsible selectors
• Open state persists in a cookie, needing a server-rendered layout to read it
• useSidebar() exposes state, open, setOpen, toggleSidebar, and isMobile
• Combine Collapsible with pathname.startsWith to auto-open the active sub-menu
• Use asChild with Next.js Link to avoid invalid button-wrapping-anchor markup