shadcn/ui

Install, configure, and theme shadcn/ui components for your Next.js or React project. Learn to initialize, add components, and customize styling.

Explore the shadcn Button component, its variants, sizes, loading states, and how to implement icon buttons for diverse UI actions.

Learn to implement shadcn Dialog (modal) components. Discover how to manage triggers, control state, embed forms, and ensure accessibility.

Integrate shadcn/ui forms with React Hook Form and Zod for validation. Learn to build accessible forms with labels, descriptions, and error messages.

Build a shadcn Data Table with TanStack Table. Implement sorting, filtering, and pagination for efficient data display and management.

Integrate a command palette, search, and keyboard navigation into your app with the shadcn Command component, powered by cmdk.

Implement toast notifications in shadcn/ui using Sonner. Learn to display success, error, loading, and custom toasts for user feedback.

shadcn Sidebar component - responsive navigation with collapsible sections, mobile drawer, and persistent state.

A single-page roundup of every highlight bullet from the 8 pages in the shadcn/ui section, grouped by source page so you can scan all 48 takeaways without opening each article individually.