shadcn/ui Cheat Sheet: Components, CLI Commands and Hooks (2026 Guide)

In 2026, the frontend development will be characterized by performance, flexibility, and scalability. Developers do not seek strict UI libraries that require them to stick to existing styles or sizeable component systems. Rather, they like systems that have complete control, composable systems, and clean architecture.

It is where shadcn/ui has set its roots as a leading power.

This is a great shadcn/ui cheat sheet that will become a convenient resource in case you are working on production-grade applications using React or Next.js. Setting up, CLI commands, components, form architecture, App Router integration, reusable patterns – it’s all at a single location.

What is shadcn/ui and why developers use it in 2026?

shadcn/ui is not a more traditional component library. It is a library of well-crafted and accessible elements that are created with Radix UI primitives and designed with Tailwind CSS; however, rather than requiring you to install them as a dependency, you paste the component source code directly into your project.

That is the difference that makes the difference.

Controlling the code is in contrast with the traditional UI libraries (where you import components in node modules). Components can be modified, extended, and refactored without struggling with abstraction layers.

The reasons Developers would rather use shadcn/ui in 2026.

• Full Code Ownership – You control the component code. No vendor lock-in.
• Tailwind-First Styling – Utility-based styling scales have consistency and are easily themed.
• Accessibility by Default – Based on Radix primitives, making use of keyboard navigation and ARIA support.
• The ultimate Modern Architecture – Compatible with Server Components, Client Components, and integrates smoothly with frameworks like Next.js, Vite and other latest React environments.
• Design System Friendly – Suited to work on custom design systems by teams that do not need to recreate base components.

In short, shadcn/ui offers the flexibility of custom components and the speed of a component library.

shadcn/ui quick setup cheat sheet

Getting started is straightforward if you follow the correct structure.

Step 1: Create a Next.js project

npx create-next-app@latest my-app
cd my-app  

Make sure you enable:

• TypeScript
• App Router
• Tailwind CSS

Step 2: Initialize shadcn/ui

npx shadcn@latest init  

During setup, you’ll choose:

• Framework (Next.js, Vite, etc.)
  other frameworks like Vite are not needed here since the project is already Next.js
• TypeScript configuration
• Component directory
• Tailwind configuration

The CLI will:

• Add utility helpers like cn()
• Install dependencies
• Create a components/ui folder

Step 3: Add Components

npx shadcn@latest add button

The component will now exist inside your project directory.

That’s it. No heavy UI packages. No global styling conflicts.

shadcn/ui CLI commands cheat sheet

The CLI is what makes shadcn/ui efficient in real-world workflows.

Here’s your practical command reference.

Initialize Project

shadcn init

Sets up configuration and dependencies.

Add a Component

shadcn add button

Add Multiple Components

shadcn add button card dialog

Add All Components

shadcn add --all

Overwrite Existing Component

shadcn add button --overwrite

Use Specific Registry

shadcn add button --registry

Install with pnpm or yarn

pnpm dlx shadcn@latest add input

In team environments, avoid –all. Add components only when needed to keep your codebase lean.

Core shadcn/ui components cheat sheet

shadcn/ui includes essential UI primitives that cover 90% of production use cases.
Below are the most frequently used components.

Button Component

One of the most malleable shadcn/ui UI primitives is the Button component. It promotes various versions, dimensions, and conditions.
Installation

pnpm dlx shadcn@latest add button

Import

import { Button } from "@/components/ui/button"

Variants

<Button variant="default">Default</Button>
<Button variant="destructive">Destructive</Button>
<Button variant="outline">Outline</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>

Sizes

<Button size="default">Default</Button>
<Button size="sm">Small</Button>
<Button size="lg">Large</Button>

Button with Icon

<Button>
<Mail className="mr-2 h-4 w-4" />
Login with Email
</Button>

Loading State

<Button disabled>
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
Please wait
</Button>

Card Component

The Card component helps structure content blocks such as dashboards, profile sections, and analytics panels.

Installation

pnpm dlx shadcn@latest add card

Import

import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

Usage Example

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card Description</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Card Content</p>
  </CardContent>
  <CardFooter>
    <p>Card Footer</p>
  </CardFooter>
</Card>

This compound structure allows modular layout composition.

Dialog (Modal)

The Dialog component provides accessible modal interactions.

Installation

pnpm dlx shadcn@latest add dialog

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"

import { Button } from "@/components/ui/button"

Example

<Dialog>
  <DialogTrigger asChild>
    <Button variant="outline">Open Dialog</Button>
  </DialogTrigger>
  <DialogContent className="sm:max-w-[425px]">
    <DialogHeader>
      <DialogTitle>Edit profile</DialogTitle>
      <DialogDescription>
        Make changes to your profile here.
      </DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <Button type="submit">Save changes</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Form Component (React Hook Form + Zod)

shadcn/ui integrates seamlessly with React Hook Form and Zod for schema validation.

Installation

pnpm dlx shadcn@latest add form

Example Setup

const formSchema = z.object({
  username: z.string().min(2).max(50),
})

Implementation

<Form {...form}>
  <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
    <FormField
      control={form.control}
      name="username"
      render={({ field }) => (
        <FormItem>
          <FormLabel>Username</FormLabel>
          <FormControl>
            <Input placeholder="Enter username" {...field} />
          </FormControl>
          <FormMessage />
        </FormItem>
      )}
    />
    <Button type="submit">Submit</Button>
  </form>
</Form>

This structure ensures accessibility, validation clarity, and consistent styling.

Dropdown Menu

Useful for account menus, action lists, and contextual navigation.

Installation

pnpm dlx shadcn@latest add dropdown-menu

Example

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button variant="outline">Open Menu</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuLabel>My Account</DropdownMenuLabel>
    <DropdownMenuSeparator />
    <DropdownMenuItem>Profile</DropdownMenuItem>
    <DropdownMenuItem>Billing</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Tabs Component

Ideal for switching between content views.

Installation

pnpm dlx shadcn@latest add tabs

Example

<Tabs defaultValue="account" className="w-[400px]">
  <TabsList>
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="password">Password</TabsTrigger>
  </TabsList>
  <TabsContent value="account">Account settings here.</TabsContent>
  <TabsContent value="password">Password settings here.</TabsContent>
</Tabs>

Toast Notifications

For real-time feedback and system notifications.

Installation

pnpm dlx shadcn@latest add toast

Add <Toaster /> in your root layout:

<Toaster />

Trigger a toast:

const { toast } = useToast()

toast({
  title: "Scheduled",
  description: "Friday at 5:57 PM",
})

Data Display Components

Table

Used for invoices, dashboards, and structured datasets.

Installation

pnpm dlx shadcn@latest add table

Example

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Invoice</TableHead>
      <TableHead>Status</TableHead>
      <TableHead>Amount</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>INV001</TableCell>
      <TableCell>Paid</TableCell>
      <TableCell>$250</TableCell>
    </TableRow>
  </TableBody>
</Table>

Calendar

Ideal for booking systems and date selection.

Installation

pnpm dlx shadcn@latest add calendar

<Calendar
  mode="single"
  selected={date}
  onSelect={setDate}
  className="rounded-md border"
/>

Essential Form Inputs

Input

pnpm dlx shadcn@latest add input

<Input type="email" placeholder="Email" />
<Input disabled placeholder="Disabled input" />

Select

pnpm dlx shadcn@latest add select

<Select>
  <SelectTrigger>
    <SelectValue placeholder="Select option" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="apple">Apple</SelectItem>
    <SelectItem value="banana">Banana</SelectItem>
  </SelectContent>
</Select>

Checkbox

pnpm dlx shadcn@latest add checkbox

<Checkbox id="terms" />
<label htmlFor="terms">Accept terms</label>

Radio Group

pnpm dlx shadcn@latest add radio-group

<RadioGroup defaultValue="one">
  <RadioGroupItem value="one" id="one" />
  <Label htmlFor="one">Option One</Label>
</RadioGroup>

Customization & Extension best practices

Modify variants in source code

Because you own the components, you can extend variants directly.

variant: {
  default: "...",
  custom: "bg-purple-600 text-white hover:bg-purple-700",
}

Extend with Tailwind utility classes

<Button className="bg-gradient-to-r from-pink-500 to-purple-500">
  Gradient Button
</Button>

Use the cn() utility

className={cn(
  "base-styles",
  condition && "conditional-style",
  className
)}

This ensures clean class merging.

React Hook Form Integration Example (Login Form)

const formSchema = z.object({
  email: z.string().email(),
  password: z.string().min(8),
})

<Form {...form}>
  <form onSubmit={form.handleSubmit(onSubmit)}>
    <FormField
      name="email"
      render={({ field }) => (
        <FormItem>
          <FormLabel>Email</FormLabel>
          <FormControl>
            <Input {...field} />
          </FormControl>
          <FormMessage />
        </FormItem>
      )}
    />
    <Button type="submit">Submit</Button>
  </form>
</Form>

Dark mode support

shadcn/ui supports dark mode automatically when paired with next-themes.

Theme Provider

<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
  {children}
</ThemeProvider>

Toggle Button

<Button onClick={() => setTheme("dark")}>
  Toggle Theme
</Button>

Dark styles apply automatically via Tailwind’s dark: variants.

It is not only the power of the shadcn/ui components but its architecture that allows developers freedom in architecture. You are not restricted to a UI system, but you are creating your own design system based on primitives tested over time.

This is why shadcn/ui is still among the most popular UI ecosystems for developers in 2026.

shadcn/ui + Next.js App Router (2026 Critical)

In 2026, Next.js App Router is the standard architecture.

shadcn/ui works exceptionally well within this model.

Server vs Client Components

Most shadcn/ui components are interactive and require:

“use client”

Add this at the top of files using:

• Dialog
• Sheet
• Dropdown
• Form interactions

Recommended folder structure

app/
 layout.tsx
 page.tsx
components/
 ui/
 shared/
lib/
 utils.ts

Keep UI components in components/ui.

Shared components in components/shared.

The cn() utility

shadcn setup includes a cn() helper:

import { cn } from "@/lib/utils"

Used for:

• Conditional Tailwind classes
• Merging classNames
• Variant handling

Theming & Dark Mode

shadcn/ui works beautifully with Tailwind CSS theme extensions.

You can:

• Define CSS variables
• Extend Tailwind colors
• Create dark/light variants
• Add custom tokens

Example:

<html className="dark">

This makes building SaaS dashboards incredibly scalable.

Reusable patterns in production

In real-world apps, you don’t just drop components — you build systems.

Here are professional-grade patterns.

Component variants pattern

Use class-variance-authority (cva) for scalable variants.

const buttonVariants = cva(
 "base styles",
 {
   variants: {
     variant: {
       default: "...",
       outline: "...",
     },
   },
 }
)

Layout wrapper components

Create wrapper components like:

• DashboardLayout
• AuthLayout
• AdminLayout

Reuse structural UI consistently.

Compound component pattern

For example:

<Card>
 <CardHeader />
 <CardContent />
</Card>

This pattern improves composability.

Centralized design tokens

Define spacing, typography, and colors in Tailwind config.

Avoid inline styling inconsistencies.

Feature-Based organization

Instead of dumping everything inside components/, structure by feature:

features/
  auth/
  dashboard/
  settings/

Then import shadcn UI components inside the features.

This scales much better in large codebases.

The Bottom line

shadcn/ui is not a simple UI toolkit, but it is a philosophy of frontend in the modern day. It combines component ownership, Tailwind efficiency, and composable architecture in a single potent system.

In 2026, when you are developing serious React applications, you will no longer be able to afford not to know how to use shadcn/ui, but it will be a competitive edge.

FAQs