shadcn/ui cheatsheet

Quick reference for shadcn/ui commands to add and manage components in your project

Getting Started

Initialize shadcn in your project

Sets up shadcn/ui configuration in your Next.js, Vite, or React project

npx shadcn@latest init
Adding Components

Add a single component

Replace [component-name] with: button, card, dialog, form, input, select, table, accordion, calendar, dropdown-menu, navigation-menu, tooltip, etc.

npx shadcn@latest add [component-name]

Add multiple components at once

Space-separated list of component names

npx shadcn@latest add button card dialog

Add all available components

Installs every shadcn/ui component

npx shadcn@latest add --all

Sync/update all components from your ui folder

Updates all existing components to latest versions, skipping any that are not in the official registry

ls src/components/ui/*.tsx | xargs -n 1 basename -s .tsx | xargs -I {} sh -c 'npx shadcn@latest add {} --overwrite --yes || true'
Utility Commands

Check for updates

Shows differences between local components and registry versions

npx shadcn@latest diff

Update a component

Overwrites the existing component with the latest version

npx shadcn@latest add button --overwrite

List available components

Shows interactive list of all available components

npx shadcn@latest add
Configuration

Use default configuration

Initialize with default settings without prompts

npx shadcn@latest init -d

Specify components path

Set custom path for components

npx shadcn@latest init --components-path ./components

Use specific style

Choose between "default" and "new-york" styles

npx shadcn@latest init --style new-york
Theming

Generate theme colors

Adds theme configuration files

npx shadcn@latest add theme

Add theme switcher

Adds a component to toggle between light and dark modes

npx shadcn@latest add theme-switcher
Best Practices

Update components regularly

Keep your components up to date with latest improvements

npx shadcn@latest add [component] --overwrite

Check component dependencies

Preview what will be installed without making changes

npx shadcn@latest add [component] --dry-run

Add components silently

Skip confirmation prompts for automated workflows

npx shadcn@latest add [component] --yes
Note: This cheatsheet provides quick access to the most common shadcn/ui commands. shadcn/ui is a collection of re-usable components built with Radix UI and Tailwind CSS that you can copy and paste into your apps. The components are not published as an npm package - you own the code.
Free shadcn/ui Cheatsheet - Quick Reference for CLI Commands