shadcn/ui Components
How to use Button, Input, Card, Dialog, Select, and more — with real code examples
How to Read This Page
For each component you'll find:
- What it looks like and what it's used for
- The basic import
- The most common usage patterns
- The props you'll change most often
You don't need to memorise any of this. You refer to it while building. After using a component two or three times, you'll remember the pattern automatically.
Button
The most used component in any app. Comes with multiple visual variants and handles loading, disabled, and icon states cleanly.
Variants
| Variant | When to use |
|---|---|
default | Primary actions — "Submit", "Save", "Create" |
outline | Secondary actions — "Cancel", "Back" |
ghost | Tertiary actions — nav links, icon buttons |
destructive | Dangerous actions — "Delete", "Remove" |
link | Text that behaves like a link |
secondary | Alternative primary — "Add to cart" |
Usage
Customising with Tailwind
Add extra Tailwind classes via className to override or extend:
Input
A styled text input field. Always pair it with a label for accessibility.
When using inputs inside forms (which you almost always will), use the Form, FormField, FormItem, FormLabel, FormControl, and FormMessage components instead. They handle error display and validation automatically. See the Form section below.
Card
A container with consistent padding and border. Use for grouping related content.
Dialog (Modal)
A popup overlay for confirmations, forms, and detailed views. Handles backdrop, keyboard dismissal (Escape key), and focus trapping automatically.
Controlling a Dialog Programmatically
When you need to open or close a dialog from code (not just a button click):
Select (Dropdown)
A keyboard-accessible dropdown. Use for choosing from a predefined list of options.
Form (with React Hook Form)
The Form components integrate directly with React Hook Form and Zod. They handle validation errors, accessible labels, and field state automatically.
Claude Code writes this for you. The Form + React Hook Form + Zod pattern is complex to set up manually. Ask Claude: "Create a form for adding a new client with name, email, phone, and GST number fields, using shadcn Form components and Zod validation." You'll get the complete, working code.
Badge
Small label for status indicators, categories, and counts.
Table
Structured data display. Use for lists of records.
Combining Components
Real UIs combine multiple components. Here's a complete card with a data table inside:
This is the pattern you'll use for admin dashboard tables, client portals, and data-heavy screens. Once you've written it a few times, you'll have it memorised.