f6bcc86881
New skills: - next-best-practices: Next.js 15+ RSC, async patterns, self-hosting (vercel-labs) - better-auth-best-practices: Official Better-Auth with Drizzle adapter (better-auth) - verification-before-completion: Evidence-based completion claims (obra/superpowers) - shadcn-ui: Component patterns with Tailwind v4 adaptation note (developer-kit) - writing-skills: TDD methodology for skill authoring (obra/superpowers) README reorganized by category with Mosaic Stack alignment section. Total: 9 skills (4 existing + 5 new). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
51 KiB
Create TanStack Start Project with shadcn/ui
Source: https://ui.shadcn.com/docs/installation/tanstack
Initialize a new TanStack Start project with Tailwind CSS and shadcn/ui add-ons pre-configured. This command sets up the project structure and installs necessary dependencies in one command.
npm create @tanstack/start@latest --tailwind --add-ons shadcn
Install All shadcn/ui Components
Source: https://ui.shadcn.com/docs/installation/tanstack
Bulk install all available shadcn/ui components into your project at once. This is useful when you want access to the entire component library without adding components individually.
npx shadcn@latest add --all
Manually Install Radix UI Select Dependency
Source: https://ui.shadcn.com/docs/components/select
This command shows how to install the core @radix-ui/react-select primitive package. This manual installation is necessary if you prefer not to use the Shadcn UI CLI for component setup.
npm install @radix-ui/react-select
Install Progress Component Dependencies
Source: https://ui.shadcn.com/docs/components/progress
This section provides instructions for installing the Progress component and its core dependencies. It covers both using the Shadcn UI CLI for automated setup and manual installation via npm for the underlying Radix UI component.
npx shadcn@latest add progress
npm install @radix-ui/react-progress
Serve shadcn Registry with Next.js Development Server
Source: https://ui.shadcn.com/docs/registry/getting-started
This command starts the Next.js development server, which will serve your shadcn registry files if your project is configured with Next.js. The registry items will be accessible via specific URLs under /r/ after the build process.
npm run dev
Install shadcn CLI via npm
Source: https://ui.shadcn.com/docs/registry/getting-started
This command installs the latest version of the shadcn command-line interface (CLI) globally or as a dev dependency in your project. The CLI is essential for building and managing shadcn component registries and components.
npm install shadcn@latest
Create New Laravel Project with React
Source: https://ui.shadcn.com/docs/installation/laravel
Initialize a new Laravel project with Inertia and React using the Laravel installer. This command creates a fresh Laravel application with React pre-configured for use with Inertia.js.
laravel new my-app --react
Install Shadcn UI Input OTP Component (CLI & Manual)
Source: https://ui.shadcn.com/docs/components/input-otp
Provides instructions for adding the Input OTP component to a project. Users can choose between the Shadcn UI CLI for automated setup or manual installation by adding the core input-otp dependency via npm and then integrating the component files.
npx shadcn@latest add input-otp
npm install input-otp
Install Aspect Ratio Component via CLI
Source: https://ui.shadcn.com/docs/components/aspect-ratio
Installs the aspect-ratio component and its dependencies using the shadcn CLI. This is the quickest installation method that automatically handles dependency installation and file setup.
npx shadcn@latest add aspect-ratio
Install Dropdown Menu Component with NPM
Source: https://ui.shadcn.com/docs/components/dropdown-menu
Installation command for adding the dropdown menu component to a project using shadcn/ui CLI tool. This is the recommended method for quick setup with automatic dependency management.
npx shadcn@latest add dropdown-menu
Define Universal Registry Item for Multi-File Template (shadcn/ui)
Source: https://ui.shadcn.com/docs/registry/examples
This JSON configuration defines a shadcn/ui registry item named 'my-custom-start-template' that installs multiple files. It includes two files, each with an explicit target path, demonstrating how to create a universal starter template that can be installed without framework detection or components.json.
{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "my-custom-start-template",
"type": "registry:item",
"dependencies": ["better-auth"],
"files": [
{
"path": "/path/to/file-01.json",
"type": "registry:file",
"target": "~/file-01.json",
"content": "..."
},
{
"path": "/path/to/file-02.vue",
"type": "registry:file",
"target": "~/pages/file-02.vue",
"content": "..."
}
]
}
Add shadcn/ui Button Component
Source: https://ui.shadcn.com/docs/installation/tanstack
Install the Button component from shadcn/ui into your TanStack Start project. This command downloads and configures the component in your project's component directory.
npx shadcn@latest add button
Install Form Component via Shadcn CLI
Source: https://ui.shadcn.com/docs/components/form
This command provides the recommended method for installing the Shadcn UI form component using its command-line interface. Executing this command automates the addition of the form component and its dependencies to your project, simplifying the setup process.
npx shadcn@latest add form
Basic Navigation Menu Setup - React TSX
Source: https://ui.shadcn.com/docs/components/navigation-menu
Minimal example demonstrating the basic structure of a Navigation Menu with one menu item, trigger, and content link. Serves as a foundation for more complex navigation patterns.
Item OneLink
Multiple Registry Setup with Mixed Authentication
Source: https://ui.shadcn.com/docs/components-json
Complete example showing how to configure multiple registries with different authentication methods and parameters. Demonstrates public registries, private registries with bearer tokens, and team registries with versioning and environment variables.
{
"registries": {
"@shadcn": "https://ui.shadcn.com/r/{name}.json",
"@company-ui": {
"url": "https://registry.company.com/ui/{name}.json",
"headers": {
"Authorization": "Bearer ${COMPANY_TOKEN}"
}
},
"@team": {
"url": "https://team.company.com/{name}.json",
"params": {
"team": "frontend",
"version": "${REGISTRY_VERSION}"
}
}
}
}
Add Component Definition to shadcn registry.json
Source: https://ui.shadcn.com/docs/registry/getting-started
This JSON snippet shows how to register a component, like hello-world, within the registry.json file. It includes metadata such as name, type, title, description, and defines the component's file path and type, ensuring it conforms to the registry item schema.
{
"$schema": "https://ui.shadcn.com/schema/registry.json",
"name": "acme",
"homepage": "https://acme.com",
"items": [
{
"name": "hello-world",
"type": "registry:block",
"title": "Hello World",
"description": "A simple hello world component.",
"files": [
{
"path": "registry/new-york/hello-world/hello-world.tsx",
"type": "registry:component"
}
]
}
]
}
Install Project Dependencies using npm
Source: https://ui.shadcn.com/docs/installation/manual
This bash command installs a set of essential npm packages for the project. These dependencies include utilities for styling (class-variance-authority, clsx, tailwind-merge), icon library (lucide-react), and animation effects (tw-animate-css).
npm install class-variance-authority clsx tailwind-merge lucide-react tw-animate-css
Install React Resizable Panels Dependency Manually
Source: https://ui.shadcn.com/docs/components/resizable
This npm command installs the core react-resizable-panels library, which the Resizable component is built upon. It is a prerequisite for manual setup and provides the underlying functionality for resizable UI elements.
npm install react-resizable-panels
Install Shadcn UI Skeleton component using CLI
Source: https://ui.shadcn.com/docs/components/skeleton
Provides the command-line instruction to add the Skeleton component to your project if you are using Shadcn UI's CLI. This automates the setup process for the component.
npx shadcn@latest add skeleton
Install Dependencies with pnpm
Source: https://ui.shadcn.com/docs/blocks
Installs project dependencies using pnpm package manager. Required before starting development on the block.
pnpm install
Install Pagination Component - Bash CLI
Source: https://ui.shadcn.com/docs/components/pagination
Command-line installation of the pagination component using the shadcn CLI tool. This is the recommended installation method for projects using shadcn/ui.
npx shadcn@latest add pagination
Install Sonner Dependencies Manually
Source: https://ui.shadcn.com/docs/components/sonner
Manual installation command that installs Sonner and next-themes packages required for manual setup. Use this approach when you prefer to manually configure the component instead of using the CLI.
npm install sonner next-themes
Install Radix UI Separator Dependency via npm
Source: https://ui.shadcn.com/docs/components/separator
Install the core Radix UI React Separator dependency required for manual setup. Use this command when manually installing the component instead of using the CLI.
npm install @radix-ui/react-separator
Install Checkbox Component via CLI - Bash
Source: https://ui.shadcn.com/docs/components/checkbox
Command-line installation method for adding the checkbox component to a shadcn/ui project. Automatically handles component setup and dependency installation.
npx shadcn@latest add checkbox
Install Aspect Ratio Dependencies Manually
Source: https://ui.shadcn.com/docs/components/aspect-ratio
Manually installs the required Radix UI aspect-ratio dependency. Use this approach when you prefer manual setup or when the CLI method is not suitable for your project.
npm install @radix-ui/react-aspect-ratio
Install Input Component via CLI
Source: https://ui.shadcn.com/docs/components/input
Install the Input component using the shadcn CLI tool. This command downloads and sets up the component in your project's components directory with all necessary dependencies.
npx shadcn@latest add input
Create Remix Project with create-remix
Source: https://ui.shadcn.com/docs/installation/remix
Initialize a new Remix project using the create-remix command-line tool. This sets up the basic Remix application structure and dependencies.
npx create-remix@latest my-app
Install Shadcn UI Context Menu component via CLI (Bash)
Source: https://ui.shadcn.com/docs/components/context-menu
This command demonstrates how to easily add the Shadcn UI Context Menu component to your project using the npx shadcn@latest add command-line utility. This method automates the setup and configuration of the component.
npx shadcn@latest add context-menu
Install Vaul Dependency for Manual Setup
Source: https://ui.shadcn.com/docs/components/drawer
Manually install the Vaul package as a dependency when setting up the Drawer component without the CLI. Vaul is the underlying library that powers the Drawer functionality.
npm install vaul
Install Recharts Dependency via npm
Source: https://ui.shadcn.com/docs/components/chart
Installs the Recharts library as a project dependency for manual setup. Required when not using the CLI installation method.
npm install recharts
Install Shadcn UI Command Component
Source: https://ui.shadcn.com/docs/components/command
This section provides instructions for installing the Command menu component, offering both an automated CLI approach and a manual method. The CLI command automatically adds the component, while the manual installation requires installing the 'cmdk' package and then copying the component source code separately.
npx shadcn@latest add command
npm install cmdk
Install Components from Multiple Namespaced Registries
Source: https://ui.shadcn.com/docs/changelog
Use the @registry/name format to install components from different namespaced registries in a single command. Components are automatically resolved and installed from the correct registry sources.
npx shadcn add @acme/button @internal/auth-system
Install Block and Override Primitives in shadcn/ui
Source: https://ui.shadcn.com/docs/registry/examples
Configure a registry item to install a block from shadcn/ui and override default primitives with custom implementations from remote registries. This enables centralized dependency management for component hierarchies.
{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "custom-login",
"type": "registry:block",
"registryDependencies": [
"login-01",
"https://example.com/r/button.json",
"https://example.com/r/input.json",
"https://example.com/r/label.json"
]
}
Define Initial shadcn registry.json Structure
Source: https://ui.shadcn.com/docs/registry/getting-started
This JSON snippet illustrates the basic structure for a registry.json file, which serves as the entry point for a shadcn component registry. It includes the schema reference, registry name, homepage URL, and an empty array for registry items, conforming to the specified registry schema.
{
"$schema": "https://ui.shadcn.com/schema/registry.json",
"name": "acme",
"homepage": "https://acme.com",
"items": [
// ...
]
}
List All Components from a Registry
Source: https://ui.shadcn.com/docs/changelog
Display all available components from a specified namespaced registry. Useful for discovering available components before installation.
npx shadcn list @acme
Execute shadcn Registry Build Script
Source: https://ui.shadcn.com/docs/registry/getting-started
This command runs the registry:build script defined in package.json. Executing this script triggers the shadcn CLI to generate the registry JSON files, typically placed in a public/r directory by default.
npm run registry:build
Install Shadcn UI Select Component via CLI
Source: https://ui.shadcn.com/docs/components/select
This command illustrates the quickest way to add the Shadcn UI Select component to your project. It utilizes the npx shadcn@latest add utility to automatically install dependencies and configure the component.
npx shadcn@latest add select
Configure shadcn Build Script in package.json
Source: https://ui.shadcn.com/docs/registry/getting-started
This JSON snippet updates the package.json file by adding a registry:build script. This script executes the shadcn build command, which is used to generate the necessary JSON files for the component registry.
{
"scripts": {
"registry:build": "shadcn build"
}
}
Install Resources from Namespaced Registries
Source: https://ui.shadcn.com/docs/components-json
Install components and resources using the namespace syntax after configuring registries. Supports installing from public registries, private authenticated registries, and multiple resources in a single command.
# Install from a configured registry
npx shadcn@latest add @v0/dashboard
# Install from private registry
npx shadcn@latest add @private/button
# Install multiple resources
npx shadcn@latest add @acme/header @internal/auth-utils
Install Kbd Component via CLI (shadcn/ui)
Source: https://ui.shadcn.com/docs/components/kbd
Provides the command-line interface instruction to add the Kbd component to a project using shadcn@latest. This is the recommended and easiest method for integrating the component.
npx shadcn@latest add kbd
Handle shadcn/ui Initialization with React 19 Peer Dependency Prompt (npm)
Source: https://ui.shadcn.com/docs/react-19
This bash snippet illustrates the interactive prompt from the shadcn/ui CLI when initializing a project (npx shadcn@latest init -d) while using React 19 with npm. It guides users to select a resolution strategy, either --force or --legacy-peer-deps, to address potential peer dependency conflicts during the shadcn/ui installation process.
It looks like you are using React 19.
Some packages may fail to install due to peer dependency issues (see https://ui.shadcn.com/react-19).
? How would you like to proceed? › - Use arrow-keys. Return to submit.
❯ Use --force
Use --legacy-peer-deps
Install shadcn/ui Label Component via CLI
Source: https://ui.shadcn.com/docs/components/label
This bash command uses the shadcn/ui CLI to quickly add the Label component to your project. It automates the process of fetching and integrating the component's files and dependencies, streamlining setup.
npx shadcn@latest add label
Add Components to Monorepo Workspace
Source: https://ui.shadcn.com/docs/monorepo
Add shadcn/ui components to your monorepo application by navigating to the app directory and running the add command. The CLI automatically determines component type and installs files to correct paths with proper import handling.
cd apps/web
npx shadcn@latest add [COMPONENT]
Install Shadcn UI Spinner Component via CLI (Bash)
Source: https://ui.shadcn.com/docs/components/spinner
Provides the command-line interface (CLI) instruction to add the Shadcn UI Spinner component to your project. This command automates the setup, including creating the component file and configuring necessary dependencies. Ensure you have the Shadcn UI CLI installed globally or locally before running this command.
npx shadcn@latest add spinner
Install Drawer Component via CLI
Source: https://ui.shadcn.com/docs/components/drawer
Install the shadcn Drawer component using the CLI tool. This is the recommended installation method that automatically sets up all dependencies and copies necessary files to your project.
npx shadcn@latest add drawer
Install Navigation Menu via CLI - shadcn/ui
Source: https://ui.shadcn.com/docs/components/navigation-menu
Quick installation command for adding the navigation-menu component to a shadcn/ui project using the CLI tool. Requires Node.js and npm to be installed.
npx shadcn@latest add navigation-menu
View Registry Component Before Installation
Source: https://ui.shadcn.com/docs/changelog
Preview a component from a namespaced registry without installing it. Displays component code and all dependencies upfront for review.
npx shadcn view @acme/auth-system
Install Shadcn Hover Card Component via CLI
Source: https://ui.shadcn.com/docs/components/hover-card
This command-line interface (CLI) snippet demonstrates how to add the Shadcn UI Hover Card component to your project using npx shadcn@latest add. This method automates the installation and setup process for the component, including copying necessary files and updating configurations.
npx shadcn@latest add hover-card
Install Toggle Group Dependencies via npm
Source: https://ui.shadcn.com/docs/components/toggle-group
Install the required Radix UI toggle group dependency manually using npm. Required for projects that prefer manual component setup.
npm install @radix-ui/react-toggle-group
Import and Use Button Component in TanStack Start
Source: https://ui.shadcn.com/docs/installation/tanstack
Import the Button component from the components/ui directory and render it in your application. This example shows basic usage within a React functional component in the app/routes/index.tsx file.
import { Button } from "@/components/ui/button"
function App() {
return (
Click me
)
}
Install Carousel Component via CLI
Source: https://ui.shadcn.com/docs/components/carousel
shadcn/ui CLI command to automatically install and configure the carousel component with all dependencies and file setup. Simplest method for adding the carousel to your project.
npx shadcn@latest add carousel
Install Resizable Component using Shadcn CLI
Source: https://ui.shadcn.com/docs/components/resizable
This command-line interface (CLI) snippet shows how to add the resizable component to a project using the shadcn utility. It simplifies the installation process by automatically configuring the component and its dependencies.
npx shadcn@latest add resizable
Install Menubar via CLI - Bash
Source: https://ui.shadcn.com/docs/components/menubar
Command to install the menubar component using the shadcn package manager CLI. This is the quickest installation method that automatically downloads and configures the component for your project.
npx shadcn@latest add menubar
Install Radio Group via CLI - Bash
Source: https://ui.shadcn.com/docs/components/radio-group
Command-line interface installation method for adding the radio-group component to a shadcn/ui project. This is the recommended approach as it automatically handles file copying and setup.
npx shadcn@latest add radio-group
Define reusable registry block with components
Source: https://ui.shadcn.com/docs/registry/examples
Create a registry block item that bundles multiple related files (pages and components) with their dependencies. This block specifies registry dependencies on other components and defines file paths with content references for installation into target locations in the project structure.
{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "login-01",
"type": "registry:block",
"description": "A simple login form.",
"registryDependencies": ["button", "card", "input", "label"],
"files": [
{
"path": "blocks/login-01/page.tsx",
"content": "import { LoginForm } ...",
"type": "registry:page",
"target": "app/login/page.tsx"
},
{
"path": "blocks/login-01/components/login-form.tsx",
"content": "...",
"type": "registry:component"
}
]
}
Install Radix UI Context Menu dependency manually (Bash)
Source: https://ui.shadcn.com/docs/components/context-menu
This command is part of the manual installation process, showing how to install the core @radix-ui/react-context-menu dependency using npm. This dependency provides the fundamental building blocks for the Shadcn UI Context Menu.
npm install @radix-ui/react-context-menu
Install Native Select component via CLI
Source: https://ui.shadcn.com/docs/components/native-select
Use the shadcn CLI to easily add the Native Select component to your project. This command will scaffold the necessary files and update dependencies automatically, streamlining the setup process.
npx shadcn@latest add native-select
Install Empty Component via CLI
Source: https://ui.shadcn.com/docs/components/empty
Command to install the Empty component using the shadcn package manager. Automatically adds the component and its dependencies to the project.
npx shadcn@latest add empty
Install shadcn Table component and TanStack React Table
Source: https://ui.shadcn.com/docs/components/data-table
Installation commands to add the Table component from shadcn and the TanStack React Table dependency to your project. These are prerequisites for building data tables with this guide.
npx shadcn@latest add table
npm install @tanstack/react-table
Install Switch Component via CLI
Source: https://ui.shadcn.com/docs/components/switch
Command-line installation method for adding the Switch component to a shadcn/ui project. Uses the official CLI tool to automatically download and configure the component with all required dependencies.
npx shadcn@latest add switch
Start Development Server with pnpm
Source: https://ui.shadcn.com/docs/blocks
Starts the development server for the www application at http://localhost:3333. Enables live preview of blocks during development.
pnpm www:dev
Install Shadcn UI Badge component via CLI (Bash)
Source: https://ui.shadcn.com/docs/components/badge
This command line interface snippet demonstrates how to add the Shadcn UI Badge component to a project using the npx shadcn utility. It simplifies the setup process by automating the component file generation.
npx shadcn@latest add badge
Interactive Configuration Questions for shadcn init
Source: https://ui.shadcn.com/docs/changelog
Configuration prompts displayed during the shadcn init setup process. Users answer questions about style, base color, CSS file location, CSS variables usage, Tailwind config path, component/utils import aliases, and React Server Components support.
Which style would you like to use? › Default
Which color would you like to use as base color? › Slate
Where is your global CSS file? › › app/globals.css
Do you want to use CSS variables for colors? › no / yes
Where is your tailwind.config.js located? › tailwind.config.js
Configure the import alias for components: › @/components
Configure the import alias for utils: › @/lib/utils
Are you using React Server Components? › no / yes
Item Component Installation - Bash
Source: https://ui.shadcn.com/docs/components/item
CLI command to install the Item component from shadcn. Requires Node.js and npm/pnpm package manager.
npx shadcn@latest add item
CLI Command: Initialize Project from Local File
Source: https://ui.shadcn.com/docs/changelog
The shadcn CLI now supports initializing projects from local JSON files. This command allows users to set up a project using a local template.json, enabling zero-setup development and local testing of registry items.
npx shadcn init ./template.json
Install Tailwind CSS and Autoprefixer
Source: https://ui.shadcn.com/docs/installation/remix
Install Tailwind CSS and Autoprefixer as development dependencies to enable styling support for shadcn/ui components in your Remix project.
npm install -D tailwindcss@latest autoprefixer@latest
Install Tooltip Dependencies via npm
Source: https://ui.shadcn.com/docs/components/tooltip
Manual installation of the Radix UI tooltip dependency. Required when not using the shadcn CLI installation method. Install this package before copying the tooltip component source.
npm install @radix-ui/react-tooltip
Install Shadcn UI Dialog component using CLI or npm
Source: https://ui.shadcn.com/docs/components/dialog
Instructions for installing the Shadcn UI Dialog component. Provides options for using the Shadcn CLI to add the component or manually installing the underlying Radix UI dependency.
npx shadcn@latest add dialog
npm install @radix-ui/react-dialog
Install Toggle Component via CLI
Source: https://ui.shadcn.com/docs/components/toggle
Install the Toggle component using the shadcn CLI tool. This command downloads and sets up the component with all dependencies in your project.
npx shadcn@latest add toggle
Install Sheet Component via CLI
Source: https://ui.shadcn.com/docs/components/sheet
Command to install the Sheet component and its dependencies using the shadcn CLI. This is the recommended installation method for projects using shadcn/ui.
npx shadcn@latest add sheet
Install Shadcn UI Popover component
Source: https://ui.shadcn.com/docs/components/popover
These commands provide two methods for installing the Popover component into your project. The CLI method uses npx shadcn to add the component automatically, while the manual method involves installing the core Radix UI dependency via npm and then copying the component source code. Ensure your project is set up to use shadcn/ui before installing components.
npx shadcn@latest add popover
npm install @radix-ui/react-popover
Install Sonner via CLI
Source: https://ui.shadcn.com/docs/components/sonner
Command-line installation method using shadcn-cli to add the Sonner component to a project. This is the quickest way to set up Sonner with all necessary dependencies.
npx shadcn@latest add sonner
Complete Bar Chart with XAxis Implementation
Source: https://ui.shadcn.com/docs/components/chart
Full React component example using the 'use client' directive for client-side rendering. Demonstrates a complete bar chart setup with sample data for desktop and mobile metrics across six months, including XAxis configuration with custom tick formatting.
"use client"
import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
import { ChartConfig, ChartContainer } from "@/components/ui/chart"
const chartData = [
{ month: "January", desktop: 186, mobile: 80 },
{ month: "February", desktop: 305, mobile: 200 },
{ month: "March", desktop: 237, mobile: 120 },
{ month: "April", desktop: 73, mobile: 190 },
{ month: "May", desktop: 209, mobile: 130 },
{ month: "June", desktop: 214, mobile: 140 },
]
const chartConfig = {
desktop: {
label: "Desktop",
color: "#2563eb",
},
mobile: {
label: "Mobile",
color: "#60a5fa",
},
} satisfies ChartConfig
export function Component() {
return (
value.slice(0, 3)}
/>
)
}
Environment Variables Setup
Source: https://ui.shadcn.com/docs/registry/authentication
Set registry authentication token in .env.local file. This stores the secret token that will be used for Bearer authentication when accessing private component registries.
REGISTRY_TOKEN=your_secret_token_here
Install Table Component via CLI
Source: https://ui.shadcn.com/docs/components/table
CLI command to install the shadcn/ui Table component using npx. This automatically adds the component to your project.
npx shadcn@latest add table
Install next-themes package
Source: https://ui.shadcn.com/docs/dark-mode/next
This command installs the next-themes package, a crucial dependency for implementing dark mode functionality in Next.js applications.
npm install next-themes
Install Separator Component via CLI
Source: https://ui.shadcn.com/docs/components/separator
Install the Separator component using the shadcn CLI tool. This command automatically downloads and sets up the component in your project with all required dependencies.
npx shadcn@latest add separator
Install Menubar Dependencies - Bash
Source: https://ui.shadcn.com/docs/components/menubar
Manual installation command for the Radix UI menubar dependency. Use this when manually setting up the component instead of using the CLI. Requires Node.js package manager (npm).
npm install @radix-ui/react-menubar
Install Tooltip via shadcn CLI
Source: https://ui.shadcn.com/docs/components/tooltip
Command-line installation method for adding the Tooltip component to a shadcn/ui project. This is the recommended approach for quickly adding pre-configured component files.
npx shadcn@latest add tooltip
Install Slider Component via CLI
Source: https://ui.shadcn.com/docs/components/slider
Command-line installation method for adding the Slider component to a shadcn/ui project. This is the quickest way to install the component and its dependencies.
npx shadcn@latest add slider
Install Shadcn Alert component via CLI
Source: https://ui.shadcn.com/docs/components/alert
This command provides a quick way to add the Shadcn Alert component to your project using the command-line interface. It leverages npx to execute the shadcn utility for component installation.
npx shadcn@latest add alert
Create a Basic shadcn Component in TSX
Source: https://ui.shadcn.com/docs/registry/getting-started
This TypeScript React (TSX) code defines a simple HelloWorld component that renders a button with 'Hello World' text. It imports the Button component from a local UI library, demonstrating how to structure a component intended for the shadcn registry.
import { Button } from "@/components/ui/button"
export function HelloWorld() {
return Hello World
}
Install Radix UI Switch Dependency
Source: https://ui.shadcn.com/docs/components/switch
NPM installation command for the Radix UI switch primitive dependency. Required when manually installing the Switch component without using the shadcn CLI tool.
npm install @radix-ui/react-switch
Button Size Variants Example
Source: https://ui.shadcn.com/docs/components/button
Comprehensive example showing all Button size options: sm, icon-sm, default, icon, lg, and icon-lg. Demonstrates text and icon buttons at different sizes.
import { ArrowUpRightIcon } from "lucide-react"
import { Button } from "@/components/ui/button"
export function ButtonSize() {
return (
Small
Default
Large
)
}
Create custom style extending shadcn/ui
Source: https://ui.shadcn.com/docs/registry/examples
Define a custom registry style that extends shadcn/ui by installing dependencies, adding registry dependencies (components and remote blocks), and configuring CSS variables for fonts and brand colors in light and dark modes. This configuration is applied when running npx shadcn init.
{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "example-style",
"type": "registry:style",
"dependencies": ["@tabler/icons-react"],
"registryDependencies": [
"login-01",
"calendar",
"https://example.com/r/editor.json"
],
"cssVars": {
"theme": {
"font-sans": "Inter, sans-serif"
},
"light": {
"brand": "20 14.3% 4.1%"
},
"dark": {
"brand": "20 14.3% 4.1%"
}
}
}
Example Shadcn UI Registry Configuration (JSON)
Source: https://ui.shadcn.com/docs/registry/registry-index
This JSON configuration demonstrates a valid structure for a Shadcn UI registry. It includes a schema reference, the registry's name and homepage, and an array of items, each representing a component or example with its type, title, description, and associated file paths. This structure adheres to the specified registry schema requirements.
{
"$schema": "https://ui.shadcn.com/schema/registry.json",
"name": "acme",
"homepage": "https://acme.com",
"items": [
{
"name": "login-form",
"type": "registry:component",
"title": "Login Form",
"description": "A login form component.",
"files": [
{
"path": "registry/new-york/auth/login-form.tsx",
"type": "registry:component"
}
]
},
{
"name": "example-login-form",
"type": "registry:component",
"title": "Example Login Form",
"description": "An example showing how to use the login form component.",
"files": [
{
"path": "registry/new-york/examples/example-login-form.tsx",
"type": "registry:component"
}
]
}
]
}
Manually install Radix UI Alert Dialog dependency with npm
Source: https://ui.shadcn.com/docs/components/alert-dialog
This bash command is used for manual installation of the Shadcn UI Alert Dialog component, specifically for installing its underlying Radix UI primitive. It adds the @radix-ui/react-alert-dialog package as a dependency to your project. This step is required before copying the component source code.
npm install @radix-ui/react-alert-dialog
Component Diff Output Example
Source: https://ui.shadcn.com/docs/changelog
Example output showing differences in a component's code. The diff displays additions and removals, showing what has changed in the upstream repository.
const alertVariants = cva(
- "relative w-full rounded-lg border",
+ "relative w-full pl-12 rounded-lg border"
)
Install Button Dependencies via npm
Source: https://ui.shadcn.com/docs/components/button
Manual installation of required dependencies for the Button component. Install the @radix-ui/react-slot package which provides slot composition functionality.
npm install @radix-ui/react-slot
CLI Error: Missing Registry Environment Variables
Source: https://ui.shadcn.com/docs/changelog
This example demonstrates the CLI's helpful error for missing environment variables required by a registry. It explicitly lists the necessary variables, like REGISTRY_TOKEN, and instructs users to set them in .env or .env.local files.
Registry "@private" requires the following environment variables:
• REGISTRY_TOKEN
Set the required environment variables to your .env or .env.local file.
Install Multiple Resources from Different Namespaces
Source: https://ui.shadcn.com/docs/registry/namespace
Install multiple resources from different namespaced registries in a single command. Supports combining resources from UI components, libraries, and AI prompts across various registries.
npx shadcn@latest add @acme/header @lib/auth-utils @ai/chatbot-rules
Define Universal Registry Item for ESLint Configuration (shadcn/ui)
Source: https://ui.shadcn.com/docs/registry/examples
This JSON configuration defines a shadcn/ui registry item named 'my-eslint-config' for a custom ESLint configuration. It specifies a single file with an explicit target path (~/.eslintrc.json), enabling universal installation of the ESLint config file without framework dependencies.
{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "my-eslint-config",
"type": "registry:item",
"files": [
{
"path": "/path/to/your/registry/default/custom-eslint.json",
"type": "registry:file",
"target": "~/.eslintrc.json",
"content": "..."
}
]
}
Configure Plugin with NPM Dependencies in shadcn UI
Source: https://ui.shadcn.com/docs/registry/examples
Shows how to include external npm packages as dependencies when using Tailwind CSS plugins. The dependencies array declares required packages, while the css object configures both the plugin and custom CSS layers. This pattern ensures all required packages are installed before the component is used.
{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "typography-component",
"type": "registry:item",
"dependencies": ["@tailwindcss/typography"],
"css": {
"@plugin "@tailwindcss/typography"": {},
"@layer components": {
".prose": {
"max-width": "65ch"
}
}
}
}
Install Shadcn Accordion Component (bash)
Source: https://ui.shadcn.com/docs/components/accordion
This snippet provides two methods for installing the Shadcn UI Accordion component. Users can either add the component directly using the Shadcn CLI or manually install the underlying Radix UI dependency via npm. Both methods prepare the project for using the Accordion component by adding necessary files and packages.
npx shadcn@latest add accordion
npm install @radix-ui/react-accordion
Install Navigation Menu Dependencies - npm
Source: https://ui.shadcn.com/docs/components/navigation-menu
Manual installation of required Radix UI navigation menu dependency. Use this approach when manually setting up the component instead of using the CLI.
npm install @radix-ui/react-navigation-menu
Configure Secure Custom Registry with Authorization Headers (JSON)
Source: https://ui.shadcn.com/docs/registry/namespace
Provides an example of configuring a custom company registry in components.json, including a URL and authorization headers with an environment variable. This setup demonstrates best practices for securely connecting to private registries, requiring explicit authentication.
{
"@company": {
"url": "https://registry.company.com/v1/{name}.json",
"headers": {
"Authorization": "Bearer ${COMPANY_TOKEN}",
"X-Registry-Version": "1.0"
}
}
}
Create components.json Configuration File for shadcn/ui
Source: https://ui.shadcn.com/docs/installation/manual
This JSON configuration file sets up the shadcn/ui component library with New York style, TypeScript/TSX support, Tailwind CSS styling with CSS variables, and path aliases for easier imports. Place this file in the root of your project directory to enable component scaffolding and configuration.
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "new-york",
"rsc": false,
"tsx": true,
"tailwind": {
"config": "",
"css": "src/styles/globals.css",
"baseColor": "neutral",
"cssVariables": true,
"prefix": ""
},
"aliases": {
"components": "@/components",
"utils": "@/lib/utils",
"ui": "@/components/ui",
"lib": "@/lib",
"hooks": "@/hooks"
},
"iconLibrary": "lucide"
}
Install Button Component via CLI
Source: https://ui.shadcn.com/docs/components/button
Quick installation of the Button component using the shadcn CLI tool. Automatically adds the button component and its dependencies to your project.
npx shadcn@latest add button
Install Tabs Dependencies via NPM - Bash
Source: https://ui.shadcn.com/docs/components/tabs
Manual npm installation of the Radix UI Tabs dependency. Use this method when manually adding the tabs component instead of using the CLI installer.
npm install @radix-ui/react-tabs
Install Checkbox Dependencies - Bash
Source: https://ui.shadcn.com/docs/components/checkbox
Manual installation command for the Radix UI checkbox dependency. Required when manually setting up the checkbox component without using the CLI.
npm install @radix-ui/react-checkbox
Add Components with add Command
Source: https://ui.shadcn.com/docs/cli
The add command installs specific components and their dependencies into your project. It supports single or multiple component installation, file overwriting, and path customization.
npx shadcn@latest add [component]
Usage: shadcn add [options] [components...]
add a component to your project
Arguments:
components name, url or local path to component
Options:
-y, --yes skip confirmation prompt. (default: false)
-o, --overwrite overwrite existing files. (default: false)
-c, --cwd the working directory. defaults to the current directory.
-a, --all add all available components (default: false)
-p, --path the path to add the component to.
-s, --silent mute output. (default: false)
--src-dir use the src directory when creating a new project. (default: false)
--no-src-dir do not use the src directory when creating a new project.
--css-variables use css variables for theming. (default: true)
--no-css-variables do not use css variables for theming.
-h, --help display help for command
Create new React project with Vite
Source: https://ui.shadcn.com/docs/installation/vite
Initializes a new React project using Vite. This command uses the latest version of Vite and allows selecting the 'React + TypeScript' template during the interactive setup process.
npm create vite@latest
Manually Install Radix UI Label npm Dependency
Source: https://ui.shadcn.com/docs/components/label
For manual installation of the shadcn/ui Label component, this npm command installs its core dependency, @radix-ui/react-label. This step is followed by copying the component's source code into your project and updating import paths.
npm install @radix-ui/react-label
Install Single Resource from Namespaced Registry
Source: https://ui.shadcn.com/docs/registry/namespace
Install a single resource from a configured namespace using the shadcn CLI. The syntax uses @namespace/resource-name format to specify which registry and resource to install.
npx shadcn@latest add @v0/dashboard
Add UI Components with add Command
Source: https://ui.shadcn.com/docs/changelog
Use the add command to install UI components from shadcn into your project. The CLI automatically resolves dependencies, formats components based on your components.json configuration, and installs them with correct import paths and styling methods.
npx shadcn@latest add
Install Button Group via CLI - Bash
Source: https://ui.shadcn.com/docs/components/button-group
Command-line installation script for the Button Group component using the shadcn package manager. This is the recommended installation method that automatically sets up the component with dependencies.
npx shadcn@latest add button-group
Radix UI Migration: Import Path Update Example
Source: https://ui.shadcn.com/docs/changelog
This diff example illustrates the effect of the radix migration command on component files. It shows how an import for AlertDialogPrimitive is changed from @radix-ui/react-dialog to the new radix-ui package.
- import * as AlertDialogPrimitive from "@radix-ui/react-dialog"
+ import { AlertDialog as AlertDialogPrimitive } from "radix-ui"
Initialize shadcn Project with init Command
Source: https://ui.shadcn.com/docs/cli
The init command sets up a new shadcn project by installing dependencies, adding the cn utility, and configuring CSS variables. It supports template selection, base color configuration, and directory structure options.
npx shadcn@latest init
Usage: shadcn init [options] [components...]
initialize your project and install dependencies
Arguments:
components name, url or local path to component
Options:
-t, --template the template to use. (next, next-monorepo)
-b, --base-color the base color to use. (neutral, gray, zinc, stone, slate)
-y, --yes skip confirmation prompt. (default: true)
-f, --force force overwrite of existing configuration. (default: false)
-c, --cwd the working directory. defaults to the current directory.
-s, --silent mute output. (default: false)
--src-dir use the src directory when creating a new project. (default: false)
--no-src-dir do not use the src directory when creating a new project.
--css-variables use css variables for theming. (default: true)
--no-css-variables do not use css variables for theming.
--no-base-style do not install the base shadcn style
-h, --help display help for command
Install Dropdown Menu Dependencies
Source: https://ui.shadcn.com/docs/components/dropdown-menu
NPM installation command for the Radix UI dropdown menu primitive dependency. Required when manually adding the component without using the shadcn/ui CLI tool.
npm install @radix-ui/react-dropdown-menu
Install Toggle Component Dependencies Manually
Source: https://ui.shadcn.com/docs/components/toggle
Install the required Radix UI toggle dependency manually for projects that don't use the shadcn CLI. This is the first step when manually setting up the Toggle component.
npm install @radix-ui/react-toggle
Add Components with Shadcn CLI
Source: https://ui.shadcn.com/docs/changelog
This command demonstrates how to use the Shadcn CLI to add a specific component from a registry to your project. It automatically handles installation and updates the project's 'components.json' file.
npx shadcn add @ai-elements/prompt-input
Initialize MCP Server for shadcn Registries
Source: https://ui.shadcn.com/docs/changelog
Set up MCP (Model Context Protocol) server for all configured registries with zero configuration. Enables integration with MCP clients for AI-assisted component discovery and installation.
npx shadcn@latest mcp init
Install Chart Component via CLI
Source: https://ui.shadcn.com/docs/components/chart
Installs the chart.tsx component using shadcn's CLI tool. This command automatically sets up the chart component file in the project structure.
npx shadcn@latest add chart
Install Card Component via CLI - shadcn
Source: https://ui.shadcn.com/docs/components/card
Install the Card component using the shadcn CLI tool. This command downloads and integrates the Card component into your project's components directory.
npx shadcn@latest add card