shadcn/ui

Create accessible page structure with headings, landmarks, forms, buttons, links, and meaningful labels. This establishes the HTML patterns that shadcn/ui components enhance rather than replace.

Style interfaces with selectors, the box model, spacing, color, typography, Flexbox, Grid, responsive rules, and visual states. Practice translating a simple design into a stable page layout.

Use variables, functions, arrays, objects, modules, promises, and event handling in component code. Add TypeScript types for props, form values, variants, and reusable data structures.

Build components with JSX, props, state, events, hooks, context, and composition. The chapter also covers controlled components, rendering lists, and choosing where state should live.

Style React components with utility classes, responsive modifiers, state variants, and the current Tailwind CSS configuration model. Build a small interface while keeping class names readable and reusable.

Trace the move from packaged component libraries to headless primitives and copy-owned component code. See why shadcn/ui combines accessible primitives, Tailwind CSS, a CLI, and local source ownership instead of acting like a traditional npm component library.

Create a supported React project, configure path aliases, and initialize shadcn/ui with the appropriate package manager. Compare the setup considerations for Next.js, Vite, and other supported frameworks.

Use the shadcn CLI to initialize configuration, search registries, inspect items, and add or update components. Read components.json and control aliases, paths, styling choices, icon libraries, and registry sources.

Read the source of an installed component and identify forwarded props, refs, primitive parts, slots, data attributes, and Tailwind classes. Modify local code safely without losing the component’s public contract.

Work with the accessible behavior supplied by Radix UI and Base UI, including focus management, keyboard interaction, portals, and state attributes. Choose a primitive backend deliberately and account for differences when adapting component code.

Combine component props with className values using cn, clsx, and tailwind-merge. Define typed visual variants with class-variance-authority and extend components without creating conflicting class combinations.

Define semantic colors, spacing, radii, typography, and other design tokens with CSS variables and Tailwind CSS. Customize the current OKLCH-based theme while preserving readable contrast and consistent component states.

Implement light, dark, and system themes without hydration flashes or unreadable intermediate states. Add a theme switcher and verify colors across interactive, disabled, destructive, and muted states.

Assemble headings, text, separators, cards, badges, avatars, aspect ratios, and skeletons into clear content layouts. Practice turning repeated visual structures into small application-specific components.

Use Button, Toggle, Toggle Group, Checkbox, Radio Group, Switch, Slider, and Input OTP components. Handle controlled state, disabled behavior, labels, keyboard input, and domain-specific variants.

Create layered interfaces with Dialog, Alert Dialog, Sheet, Drawer, Popover, Hover Card, and Tooltip. Manage triggers, portals, focus return, dismissal rules, mobile behavior, and nested overlays.

Organize dense content with Accordion, Collapsible, Tabs, Scroll Area, and Resizable panels. Preserve keyboard access and responsive behavior while controlling open and selected states.

Build application navigation with Navigation Menu, Menubar, Dropdown Menu, Context Menu, Breadcrumb, Pagination, and Tabs. Connect component state to routes and provide clear keyboard and screen-reader behavior.

Design forms with Label, Input, Textarea, Select, Checkbox, Radio Group, and field composition patterns. Compare native form submission, controlled React state, React Hook Form, and TanStack Form.

Define schemas with Zod, connect validation to form state, and present field-level and form-level errors accessibly. Handle coercion, optional values, dependent fields, server errors, and safe submitted data.

Build calendars, date pickers, date ranges, and time-related fields using Calendar and Popover patterns. Address parsing, formatting, locale, time zones, disabled dates, and keyboard selection.

Communicate loading, success, warnings, and failure with Alert, Progress, Spinner, Skeleton, and Sonner toasts. Match each feedback pattern to the duration, urgency, and recoverability of an operation.

Build searchable action menus with Command and cmdk patterns. Add grouped results, keyboard shortcuts, empty states, async search, and a dialog-based application command palette.

Create sortable, filterable, selectable, paginated data tables with shadcn/ui and TanStack Table. Add column visibility, row actions, server-side data operations, responsive layouts, and accessible labels.

Present application data with the shadcn/ui chart system and Recharts. Configure semantic chart colors, tooltips, legends, responsive containers, accessibility text, and reusable chart composition.

Create desktop and mobile application shells with the Sidebar component, headers, navigation groups, collapsible sections, and persistent state. Connect the shell to routing, authentication state, and responsive breakpoints.

Use shadcn/ui blocks as editable starting points for dashboards, authentication screens, sidebars, and other larger compositions. Evaluate generated structure, remove unnecessary code, and adapt blocks to real data and product requirements.

Connect components to client state, URL state, server data, mutations, optimistic updates, and error recovery. Design loading and empty states so the interface remains useful throughout an asynchronous request.

Place interactive components correctly across server and client boundaries in frameworks that support React Server Components. Prevent serialization, hydration, portal, and browser-API errors while keeping client bundles focused.

Apply accessible names, descriptions, focus order, keyboard interaction, landmarks, contrast, reduced motion, and error announcements. Test components with browser accessibility tools, keyboard-only navigation, and automated checks.

Adapt layouts and components for small screens, touch input, long text, translated content, right-to-left direction, and locale-specific formats. Verify that overlays, navigation, tables, and forms remain usable across these conditions.

Add purposeful transitions and motion while respecting reduced-motion preferences. Coordinate CSS animations with component state attributes and avoid effects that interfere with focus, portals, or perceived performance.

Reduce client JavaScript, avoid unnecessary rerenders, and control the cost of icons, charts, tables, and third-party primitives. Measure bundle size, rendering behavior, layout shifts, and interaction responsiveness before optimizing.

Write unit and integration tests for rendering, variants, keyboard behavior, forms, dialogs, and async states with Testing Library. Add visual component cases in Storybook or an equivalent environment and use end-to-end tests for critical workflows.

Create registry items that distribute components, hooks, utilities, CSS, dependencies, and configuration through the shadcn CLI. Define registry metadata, build registry output, test installation, and publish versioned items for a team or community.

Share shadcn/ui components across applications without losing source ownership or theme consistency. Structure packages, aliases, dependencies, tokens, and registry items for workspaces and monorepos.

Connect supported AI coding tools to shadcn registries through the Model Context Protocol. Use registry-aware assistance to locate and install components, then review generated code for correctness, accessibility, security, and project conventions.

Assess the risks of registry sources, generated commands, npm dependencies, copied code, and future component updates. Pin trusted sources, review diffs, audit packages, protect secrets, and establish approval rules for shared projects.

Track upstream changes without treating local components as disposable generated files. Compare versions, review CLI diffs, migrate themes or primitive backends, preserve intentional customizations, and document local deviations.

Take a product request from wireframe and component selection through theme setup, implementation, data integration, validation, accessibility review, testing, performance checks, and deployment. Deliver a complete responsive application with forms, navigation, overlays, feedback, and data display.

Map shadcn/ui skills to frontend engineering, design systems, product engineering, accessibility, and component-library work. Build proof-of-skill artifacts, choose useful adjacent certifications where relevant, contribute through registries or open source, and follow releases, documentation, and ecosystem changes.