1# shadcn/ui Official Reference
2 
3> **Security Note**: Components installed via `npx shadcn@latest add` are fetched from the official shadcn registry (`ui.shadcn.com`). When configuring custom registries, only use trusted registry URLs. Always review component source code after installation. Registry URLs in examples below (e.g., `example.com`) are placeholders — replace with your verified private registry URLs.
4 
5### Create TanStack Start Project with shadcn/ui
6 
7Source: https://ui.shadcn.com/docs/installation/tanstack
8 
9Initialize 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.
10 
11```bash
12npm create @tanstack/start@latest --tailwind --add-ons shadcn
13```
14 
15--------------------------------
16 
17### Install All shadcn/ui Components
18 
19Source: https://ui.shadcn.com/docs/installation/tanstack
20 
21Bulk 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.
22 
23```bash
24npx shadcn@latest add --all
25```
26 
27--------------------------------
28 
29### Manually Install Radix UI Select Dependency
30 
31Source: https://ui.shadcn.com/docs/components/select
32 
33This 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.
34 
35```bash
36npm install @radix-ui/react-select
37```
38 
39--------------------------------
40 
41### Install Progress Component Dependencies
42 
43Source: https://ui.shadcn.com/docs/components/progress
44 
45This 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.
46 
47```bash
48npx shadcn@latest add progress
49```
50 
51```bash
52npm install @radix-ui/react-progress
53```
54 
55--------------------------------
56 
57### Serve shadcn Registry with Next.js Development Server
58 
59Source: https://ui.shadcn.com/docs/registry/getting-started
60 
61This 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.
62 
63```bash
64npm run dev
65```
66 
67--------------------------------
68 
69### Install shadcn CLI via npm
70 
71Source: https://ui.shadcn.com/docs/registry/getting-started
72 
73This 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.
74 
75```bash
76npm install shadcn@latest
77```
78 
79--------------------------------
80 
81### Create New Laravel Project with React
82 
83Source: https://ui.shadcn.com/docs/installation/laravel
84 
85Initialize 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.
86 
87```bash
88laravel new my-app --react
89```
90 
91--------------------------------
92 
93### Install Shadcn UI Input OTP Component (CLI & Manual)
94 
95Source: https://ui.shadcn.com/docs/components/input-otp
96 
97Provides 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.
98 
99```bash
100npx shadcn@latest add input-otp
101```
102 
103```bash
104npm install input-otp
105```
106 
107--------------------------------
108 
109### Install Aspect Ratio Component via CLI
110 
111Source: https://ui.shadcn.com/docs/components/aspect-ratio
112 
113Installs 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.
114 
115```bash
116npx shadcn@latest add aspect-ratio
117```
118 
119--------------------------------
120 
121### Install Dropdown Menu Component with NPM
122 
123Source: https://ui.shadcn.com/docs/components/dropdown-menu
124 
125Installation 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.
126 
127```bash
128npx shadcn@latest add dropdown-menu
129```
130 
131--------------------------------
132 
133### Define Universal Registry Item for Multi-File Template (shadcn/ui)
134 
135Source: https://ui.shadcn.com/docs/registry/examples
136 
137This 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.
138 
139```json
140{
141 "$schema": "https://ui.shadcn.com/schema/registry-item.json",
142 "name": "my-custom-start-template",
143 "type": "registry:item",
144 "dependencies": ["better-auth"],
145 "files": [
146 {
147 "path": "/path/to/file-01.json",
148 "type": "registry:file",
149 "target": "~/file-01.json",
150 "content": "..."
151 },
152 {
153 "path": "/path/to/file-02.vue",
154 "type": "registry:file",
155 "target": "~/pages/file-02.vue",
156 "content": "..."
157 }
158 ]
159}
160```
161 
162--------------------------------
163 
164### Add shadcn/ui Button Component
165 
166Source: https://ui.shadcn.com/docs/installation/tanstack
167 
168Install the Button component from shadcn/ui into your TanStack Start project. This command downloads and configures the component in your project's component directory.
169 
170```bash
171npx shadcn@latest add button
172```
173 
174--------------------------------
175 
176### Install Form Component via Shadcn CLI
177 
178Source: https://ui.shadcn.com/docs/components/form
179 
180This 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.
181 
182```bash
183npx shadcn@latest add form
184```
185 
186--------------------------------
187 
188### Basic Navigation Menu Setup - React TSX
189 
190Source: https://ui.shadcn.com/docs/components/navigation-menu
191 
192Minimal 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.
193 
194```typescript
195Item OneLink
196```
197 
198--------------------------------
199 
200### Multiple Registry Setup with Mixed Authentication
201 
202Source: https://ui.shadcn.com/docs/components-json
203 
204Complete 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.
205 
206```json
207{
208 "registries": {
209 "@shadcn": "https://ui.shadcn.com/r/{name}.json",
210 "@company-ui": {
211 "url": "https://registry.company.com/ui/{name}.json",
212 "headers": {
213 "Authorization": "Bearer ${COMPANY_TOKEN}"
214 }
215 },
216 "@team": {
217 "url": "https://team.company.com/{name}.json",
218 "params": {
219 "team": "frontend",
220 "version": "${REGISTRY_VERSION}"
221 }
222 }
223 }
224}
225```
226 
227--------------------------------
228 
229### Add Component Definition to shadcn registry.json
230 
231Source: https://ui.shadcn.com/docs/registry/getting-started
232 
233This 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.
234 
235```json
236{
237 "$schema": "https://ui.shadcn.com/schema/registry.json",
238 "name": "acme",
239 "homepage": "https://acme.com",
240 "items": [
241 {
242 "name": "hello-world",
243 "type": "registry:block",
244 "title": "Hello World",
245 "description": "A simple hello world component.",
246 "files": [
247 {
248 "path": "registry/new-york/hello-world/hello-world.tsx",
249 "type": "registry:component"
250 }
251 ]
252 }
253 ]
254}
255```
256 
257--------------------------------
258 
259### Install Project Dependencies using npm
260 
261Source: https://ui.shadcn.com/docs/installation/manual
262 
263This 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`).
264 
265```bash
266npm install class-variance-authority clsx tailwind-merge lucide-react tw-animate-css
267```
268 
269--------------------------------
270 
271### Install React Resizable Panels Dependency Manually
272 
273Source: https://ui.shadcn.com/docs/components/resizable
274 
275This `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.
276 
277```bash
278npm install react-resizable-panels
279```
280 
281--------------------------------
282 
283### Install Shadcn UI Skeleton component using CLI
284 
285Source: https://ui.shadcn.com/docs/components/skeleton
286 
287Provides 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.
288 
289```bash
290npx shadcn@latest add skeleton
291```
292 
293--------------------------------
294 
295### Install Dependencies with pnpm
296 
297Source: https://ui.shadcn.com/docs/blocks
298 
299Installs project dependencies using pnpm package manager. Required before starting development on the block.
300 
301```bash
302pnpm install
303```
304 
305--------------------------------
306 
307### Install Pagination Component - Bash CLI
308 
309Source: https://ui.shadcn.com/docs/components/pagination
310 
311Command-line installation of the pagination component using the shadcn CLI tool. This is the recommended installation method for projects using shadcn/ui.
312 
313```bash
314npx shadcn@latest add pagination
315```
316 
317--------------------------------
318 
319### Install Sonner Dependencies Manually
320 
321Source: https://ui.shadcn.com/docs/components/sonner
322 
323Manual 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.
324 
325```bash
326npm install sonner next-themes
327```
328 
329--------------------------------
330 
331### Install Radix UI Separator Dependency via npm
332 
333Source: https://ui.shadcn.com/docs/components/separator
334 
335Install the core Radix UI React Separator dependency required for manual setup. Use this command when manually installing the component instead of using the CLI.
336 
337```bash
338npm install @radix-ui/react-separator
339```
340 
341--------------------------------
342 
343### Install Checkbox Component via CLI - Bash
344 
345Source: https://ui.shadcn.com/docs/components/checkbox
346 
347Command-line installation method for adding the checkbox component to a shadcn/ui project. Automatically handles component setup and dependency installation.
348 
349```bash
350npx shadcn@latest add checkbox
351```
352 
353--------------------------------
354 
355### Install Aspect Ratio Dependencies Manually
356 
357Source: https://ui.shadcn.com/docs/components/aspect-ratio
358 
359Manually 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.
360 
361```bash
362npm install @radix-ui/react-aspect-ratio
363```
364 
365--------------------------------
366 
367### Install Input Component via CLI
368 
369Source: https://ui.shadcn.com/docs/components/input
370 
371Install 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.
372 
373```bash
374npx shadcn@latest add input
375```
376 
377--------------------------------
378 
379### Create Remix Project with create-remix
380 
381Source: https://ui.shadcn.com/docs/installation/remix
382 
383Initialize a new Remix project using the create-remix command-line tool. This sets up the basic Remix application structure and dependencies.
384 
385```bash
386npx create-remix@latest my-app
387```
388 
389--------------------------------
390 
391### Install Shadcn UI Context Menu component via CLI (Bash)
392 
393Source: https://ui.shadcn.com/docs/components/context-menu
394 
395This 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.
396 
397```bash
398npx shadcn@latest add context-menu
399```
400 
401--------------------------------
402 
403### Install Vaul Dependency for Manual Setup
404 
405Source: https://ui.shadcn.com/docs/components/drawer
406 
407Manually 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.
408 
409```bash
410npm install vaul
411```
412 
413--------------------------------
414 
415### Install Recharts Dependency via npm
416 
417Source: https://ui.shadcn.com/docs/components/chart
418 
419Installs the Recharts library as a project dependency for manual setup. Required when not using the CLI installation method.
420 
421```bash
422npm install recharts
423```
424 
425--------------------------------
426 
427### Install Shadcn UI Command Component
428 
429Source: https://ui.shadcn.com/docs/components/command
430 
431This 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.
432 
433```bash
434npx shadcn@latest add command
435```
436 
437```bash
438npm install cmdk
439```
440 
441--------------------------------
442 
443### Install Components from Multiple Namespaced Registries
444 
445Source: https://ui.shadcn.com/docs/changelog
446 
447Use 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.
448 
449```bash
450npx shadcn add @acme/button @internal/auth-system
451```
452 
453--------------------------------
454 
455### Install Block and Override Primitives in shadcn/ui
456 
457Source: https://ui.shadcn.com/docs/registry/examples
458 
459Configure 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.
460 
461```json
462{
463 "$schema": "https://ui.shadcn.com/schema/registry-item.json",
464 "name": "custom-login",
465 "type": "registry:block",
466 "registryDependencies": [
467 "login-01",
468 "https://example.com/r/button.json",
469 "https://example.com/r/input.json",
470 "https://example.com/r/label.json"
471 ]
472}
473```
474 
475--------------------------------
476 
477### Define Initial shadcn registry.json Structure
478 
479Source: https://ui.shadcn.com/docs/registry/getting-started
480 
481This 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.
482 
483```json
484{
485 "$schema": "https://ui.shadcn.com/schema/registry.json",
486 "name": "acme",
487 "homepage": "https://acme.com",
488 "items": [
489 // ...
490 ]
491}
492```
493 
494--------------------------------
495 
496### List All Components from a Registry
497 
498Source: https://ui.shadcn.com/docs/changelog
499 
500Display all available components from a specified namespaced registry. Useful for discovering available components before installation.
501 
502```bash
503npx shadcn list @acme
504```
505 
506--------------------------------
507 
508### Execute shadcn Registry Build Script
509 
510Source: https://ui.shadcn.com/docs/registry/getting-started
511 
512This 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.
513 
514```bash
515npm run registry:build
516```
517 
518--------------------------------
519 
520### Install Shadcn UI Select Component via CLI
521 
522Source: https://ui.shadcn.com/docs/components/select
523 
524This 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.
525 
526```bash
527npx shadcn@latest add select
528```
529 
530--------------------------------
531 
532### Configure shadcn Build Script in package.json
533 
534Source: https://ui.shadcn.com/docs/registry/getting-started
535 
536This 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.
537 
538```json
539{
540 "scripts": {
541 "registry:build": "shadcn build"
542 }
543}
544```
545 
546--------------------------------
547 
548### Install Resources from Namespaced Registries
549 
550Source: https://ui.shadcn.com/docs/components-json
551 
552Install 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.
553 
554```bash
555# Install from a configured registry
556npx shadcn@latest add @v0/dashboard
557 
558# Install from private registry
559npx shadcn@latest add @private/button
560 
561# Install multiple resources
562npx shadcn@latest add @acme/header @internal/auth-utils
563```
564 
565--------------------------------
566 
567### Install Kbd Component via CLI (shadcn/ui)
568 
569Source: https://ui.shadcn.com/docs/components/kbd
570 
571Provides 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.
572 
573```bash
574npx shadcn@latest add kbd
575```
576 
577--------------------------------
578 
579### Handle `shadcn/ui` Initialization with React 19 Peer Dependency Prompt (npm)
580 
581Source: https://ui.shadcn.com/docs/react-19
582 
583This `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.
584 
585```bash
586It looks like you are using React 19.
587Some packages may fail to install due to peer dependency issues (see https://ui.shadcn.com/react-19).
588 
589? How would you like to proceed? › - Use arrow-keys. Return to submit.
590❯ Use --force
591 Use --legacy-peer-deps
592```
593 
594--------------------------------
595 
596### Install shadcn/ui Label Component via CLI
597 
598Source: https://ui.shadcn.com/docs/components/label
599 
600This `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.
601 
602```bash
603npx shadcn@latest add label
604```
605 
606--------------------------------
607 
608### Add Components to Monorepo Workspace
609 
610Source: https://ui.shadcn.com/docs/monorepo
611 
612Add 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.
613 
614```bash
615cd apps/web
616npx shadcn@latest add [COMPONENT]
617```
618 
619--------------------------------
620 
621### Install Shadcn UI Spinner Component via CLI (Bash)
622 
623Source: https://ui.shadcn.com/docs/components/spinner
624 
625Provides 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.
626 
627```bash
628npx shadcn@latest add spinner
629```
630 
631--------------------------------
632 
633### Install Drawer Component via CLI
634 
635Source: https://ui.shadcn.com/docs/components/drawer
636 
637Install 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.
638 
639```bash
640npx shadcn@latest add drawer
641```
642 
643--------------------------------
644 
645### Install Navigation Menu via CLI - shadcn/ui
646 
647Source: https://ui.shadcn.com/docs/components/navigation-menu
648 
649Quick 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.
650 
651```bash
652npx shadcn@latest add navigation-menu
653```
654 
655--------------------------------
656 
657### View Registry Component Before Installation
658 
659Source: https://ui.shadcn.com/docs/changelog
660 
661Preview a component from a namespaced registry without installing it. Displays component code and all dependencies upfront for review.
662 
663```bash
664npx shadcn view @acme/auth-system
665```
666 
667--------------------------------
668 
669### Install Shadcn Hover Card Component via CLI
670 
671Source: https://ui.shadcn.com/docs/components/hover-card
672 
673This 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.
674 
675```bash
676npx shadcn@latest add hover-card
677```
678 
679--------------------------------
680 
681### Install Toggle Group Dependencies via npm
682 
683Source: https://ui.shadcn.com/docs/components/toggle-group
684 
685Install the required Radix UI toggle group dependency manually using npm. Required for projects that prefer manual component setup.
686 
687```bash
688npm install @radix-ui/react-toggle-group
689```
690 
691--------------------------------
692 
693### Import and Use Button Component in TanStack Start
694 
695Source: https://ui.shadcn.com/docs/installation/tanstack
696 
697Import 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.
698 
699```tsx
700import { Button } from "@/components/ui/button"
701 
702function App() {
703 return (
704 
705 
706Click me
707 
708 )
709}
710```
711 
712--------------------------------
713 
714### Install Carousel Component via CLI
715 
716Source: https://ui.shadcn.com/docs/components/carousel
717 
718shadcn/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.
719 
720```bash
721npx shadcn@latest add carousel
722```
723 
724--------------------------------
725 
726### Install Resizable Component using Shadcn CLI
727 
728Source: https://ui.shadcn.com/docs/components/resizable
729 
730This 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.
731 
732```bash
733npx shadcn@latest add resizable
734```
735 
736--------------------------------
737 
738### Install Menubar via CLI - Bash
739 
740Source: https://ui.shadcn.com/docs/components/menubar
741 
742Command 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.
743 
744```bash
745npx shadcn@latest add menubar
746```
747 
748--------------------------------
749 
750### Install Radio Group via CLI - Bash
751 
752Source: https://ui.shadcn.com/docs/components/radio-group
753 
754Command-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.
755 
756```bash
757npx shadcn@latest add radio-group
758```
759 
760--------------------------------
761 
762### Define reusable registry block with components
763 
764Source: https://ui.shadcn.com/docs/registry/examples
765 
766Create 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.
767 
768```json
769{
770 "$schema": "https://ui.shadcn.com/schema/registry-item.json",
771 "name": "login-01",
772 "type": "registry:block",
773 "description": "A simple login form.",
774 "registryDependencies": ["button", "card", "input", "label"],
775 "files": [
776 {
777 "path": "blocks/login-01/page.tsx",
778 "content": "import { LoginForm } ...",
779 "type": "registry:page",
780 "target": "app/login/page.tsx"
781 },
782 {
783 "path": "blocks/login-01/components/login-form.tsx",
784 "content": "...",
785 "type": "registry:component"
786 }
787 ]
788}
789```
790 
791--------------------------------
792 
793### Install Radix UI Context Menu dependency manually (Bash)
794 
795Source: https://ui.shadcn.com/docs/components/context-menu
796 
797This 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.
798 
799```bash
800npm install @radix-ui/react-context-menu
801```
802 
803--------------------------------
804 
805### Install Native Select component via CLI
806 
807Source: https://ui.shadcn.com/docs/components/native-select
808 
809Use 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.
810 
811```bash
812npx shadcn@latest add native-select
813```
814 
815--------------------------------
816 
817### Install Empty Component via CLI
818 
819Source: https://ui.shadcn.com/docs/components/empty
820 
821Command to install the Empty component using the shadcn package manager. Automatically adds the component and its dependencies to the project.
822 
823```bash
824npx shadcn@latest add empty
825```
826 
827--------------------------------
828 
829### Install shadcn Table component and TanStack React Table
830 
831Source: https://ui.shadcn.com/docs/components/data-table
832 
833Installation 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.
834 
835```bash
836npx shadcn@latest add table
837```
838 
839```bash
840npm install @tanstack/react-table
841```
842 
843--------------------------------
844 
845### Install Switch Component via CLI
846 
847Source: https://ui.shadcn.com/docs/components/switch
848 
849Command-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.
850 
851```bash
852npx shadcn@latest add switch
853```
854 
855--------------------------------
856 
857### Start Development Server with pnpm
858 
859Source: https://ui.shadcn.com/docs/blocks
860 
861Starts the development server for the www application at http://localhost:3333. Enables live preview of blocks during development.
862 
863```bash
864pnpm www:dev
865```
866 
867--------------------------------
868 
869### Install Shadcn UI Badge component via CLI (Bash)
870 
871Source: https://ui.shadcn.com/docs/components/badge
872 
873This 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.
874 
875```bash
876npx shadcn@latest add badge
877```
878 
879--------------------------------
880 
881### Interactive Configuration Questions for shadcn init
882 
883Source: https://ui.shadcn.com/docs/changelog
884 
885Configuration 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.
886 
887```text
888Which style would you like to use? › Default
889Which color would you like to use as base color? › Slate
890Where is your global CSS file? › › app/globals.css
891Do you want to use CSS variables for colors? › no / yes
892Where is your tailwind.config.js located? › tailwind.config.js
893Configure the import alias for components: › @/components
894Configure the import alias for utils: › @/lib/utils
895Are you using React Server Components? › no / yes
896```
897 
898--------------------------------
899 
900### Item Component Installation - Bash
901 
902Source: https://ui.shadcn.com/docs/components/item
903 
904CLI command to install the Item component from shadcn. Requires Node.js and npm/pnpm package manager.
905 
906```bash
907npx shadcn@latest add item
908```
909 
910--------------------------------
911 
912### CLI Command: Initialize Project from Local File
913 
914Source: https://ui.shadcn.com/docs/changelog
915 
916The `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.
917 
918```bash
919npx shadcn init ./template.json
920```
921 
922--------------------------------
923 
924### Install Tailwind CSS and Autoprefixer
925 
926Source: https://ui.shadcn.com/docs/installation/remix
927 
928Install Tailwind CSS and Autoprefixer as development dependencies to enable styling support for shadcn/ui components in your Remix project.
929 
930```bash
931npm install -D tailwindcss@latest autoprefixer@latest
932```
933 
934--------------------------------
935 
936### Install Tooltip Dependencies via npm
937 
938Source: https://ui.shadcn.com/docs/components/tooltip
939 
940Manual 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.
941 
942```bash
943npm install @radix-ui/react-tooltip
944```
945 
946--------------------------------
947 
948### Install Shadcn UI Dialog component using CLI or npm
949 
950Source: https://ui.shadcn.com/docs/components/dialog
951 
952Instructions 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.
953 
954```bash
955npx shadcn@latest add dialog
956```
957 
958```bash
959npm install @radix-ui/react-dialog
960```
961 
962--------------------------------
963 
964### Install Toggle Component via CLI
965 
966Source: https://ui.shadcn.com/docs/components/toggle
967 
968Install the Toggle component using the shadcn CLI tool. This command downloads and sets up the component with all dependencies in your project.
969 
970```bash
971npx shadcn@latest add toggle
972```
973 
974--------------------------------
975 
976### Install Sheet Component via CLI
977 
978Source: https://ui.shadcn.com/docs/components/sheet
979 
980Command to install the Sheet component and its dependencies using the shadcn CLI. This is the recommended installation method for projects using shadcn/ui.
981 
982```bash
983npx shadcn@latest add sheet
984```
985 
986--------------------------------
987 
988### Install Shadcn UI Popover component
989 
990Source: https://ui.shadcn.com/docs/components/popover
991 
992These 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.
993 
994```bash
995npx shadcn@latest add popover
996```
997 
998```bash
999npm install @radix-ui/react-popover
1000```
1001 
1002--------------------------------
1003 
1004### Install Sonner via CLI
1005 
1006Source: https://ui.shadcn.com/docs/components/sonner
1007 
1008Command-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.
1009 
1010```bash
1011npx shadcn@latest add sonner
1012```
1013 
1014--------------------------------
1015 
1016### Complete Bar Chart with XAxis Implementation
1017 
1018Source: https://ui.shadcn.com/docs/components/chart
1019 
1020Full 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.
1021 
1022```tsx
1023"use client"
1024 
1025import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
1026 
1027import { ChartConfig, ChartContainer } from "@/components/ui/chart"
1028 
1029const chartData = [
1030 { month: "January", desktop: 186, mobile: 80 },
1031 { month: "February", desktop: 305, mobile: 200 },
1032 { month: "March", desktop: 237, mobile: 120 },
1033 { month: "April", desktop: 73, mobile: 190 },
1034 { month: "May", desktop: 209, mobile: 130 },
1035 { month: "June", desktop: 214, mobile: 140 },
1036]
1037 
1038const chartConfig = {
1039 desktop: {
1040 label: "Desktop",
1041 color: "#2563eb",
1042 },
1043 mobile: {
1044 label: "Mobile",
1045 color: "#60a5fa",
1046 },
1047} satisfies ChartConfig
1048 
1049export function Component() {
1050 return (
1051  value.slice(0, 3)}
1052 />
1053 
1054 )
1055}
1056```
1057 
1058--------------------------------
1059 
1060### Environment Variables Setup
1061 
1062Source: https://ui.shadcn.com/docs/registry/authentication
1063 
1064Set registry authentication token in .env.local file. This stores the secret token that will be used for Bearer authentication when accessing private component registries.
1065 
1066```bash
1067REGISTRY_TOKEN=your_secret_token_here
1068```
1069 
1070--------------------------------
1071 
1072### Install Table Component via CLI
1073 
1074Source: https://ui.shadcn.com/docs/components/table
1075 
1076CLI command to install the shadcn/ui Table component using npx. This automatically adds the component to your project.
1077 
1078```bash
1079npx shadcn@latest add table
1080```
1081 
1082--------------------------------
1083 
1084### Install next-themes package
1085 
1086Source: https://ui.shadcn.com/docs/dark-mode/next
1087 
1088This command installs the `next-themes` package, a crucial dependency for implementing dark mode functionality in Next.js applications.
1089 
1090```bash
1091npm install next-themes
1092```
1093 
1094--------------------------------
1095 
1096### Install Separator Component via CLI
1097 
1098Source: https://ui.shadcn.com/docs/components/separator
1099 
1100Install the Separator component using the shadcn CLI tool. This command automatically downloads and sets up the component in your project with all required dependencies.
1101 
1102```bash
1103npx shadcn@latest add separator
1104```
1105 
1106--------------------------------
1107 
1108### Install Menubar Dependencies - Bash
1109 
1110Source: https://ui.shadcn.com/docs/components/menubar
1111 
1112Manual 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).
1113 
1114```bash
1115npm install @radix-ui/react-menubar
1116```
1117 
1118--------------------------------
1119 
1120### Install Tooltip via shadcn CLI
1121 
1122Source: https://ui.shadcn.com/docs/components/tooltip
1123 
1124Command-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.
1125 
1126```bash
1127npx shadcn@latest add tooltip
1128```
1129 
1130--------------------------------
1131 
1132### Install Slider Component via CLI
1133 
1134Source: https://ui.shadcn.com/docs/components/slider
1135 
1136Command-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.
1137 
1138```bash
1139npx shadcn@latest add slider
1140```
1141 
1142--------------------------------
1143 
1144### Install Shadcn Alert component via CLI
1145 
1146Source: https://ui.shadcn.com/docs/components/alert
1147 
1148This 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.
1149 
1150```bash
1151npx shadcn@latest add alert
1152```
1153 
1154--------------------------------
1155 
1156### Create a Basic shadcn Component in TSX
1157 
1158Source: https://ui.shadcn.com/docs/registry/getting-started
1159 
1160This 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.
1161 
1162```tsx
1163import { Button } from "@/components/ui/button"
1164 
1165export function HelloWorld() {
1166 return Hello World
1167}
1168```
1169 
1170--------------------------------
1171 
1172### Install Radix UI Switch Dependency
1173 
1174Source: https://ui.shadcn.com/docs/components/switch
1175 
1176NPM installation command for the Radix UI switch primitive dependency. Required when manually installing the Switch component without using the shadcn CLI tool.
1177 
1178```bash
1179npm install @radix-ui/react-switch
1180```
1181 
1182--------------------------------
1183 
1184### Button Size Variants Example
1185 
1186Source: https://ui.shadcn.com/docs/components/button
1187 
1188Comprehensive example showing all Button size options: sm, icon-sm, default, icon, lg, and icon-lg. Demonstrates text and icon buttons at different sizes.
1189 
1190```typescript
1191import { ArrowUpRightIcon } from "lucide-react"
1192 
1193import { Button } from "@/components/ui/button"
1194 
1195export function ButtonSize() {
1196 return (
1197 
1198 
1199Small
1200 
1201 
1202Default
1203 
1204Large
1205 
1206 
1207 )
1208}
1209```
1210 
1211--------------------------------
1212 
1213### Create custom style extending shadcn/ui
1214 
1215Source: https://ui.shadcn.com/docs/registry/examples
1216 
1217Define 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`.
1218 
1219```json
1220{
1221 "$schema": "https://ui.shadcn.com/schema/registry-item.json",
1222 "name": "example-style",
1223 "type": "registry:style",
1224 "dependencies": ["@tabler/icons-react"],
1225 "registryDependencies": [
1226 "login-01",
1227 "calendar",
1228 "https://example.com/r/editor.json"
1229 ],
1230 "cssVars": {
1231 "theme": {
1232 "font-sans": "Inter, sans-serif"
1233 },
1234 "light": {
1235 "brand": "20 14.3% 4.1%"
1236 },
1237 "dark": {
1238 "brand": "20 14.3% 4.1%"
1239 }
1240 }
1241}
1242```
1243 
1244--------------------------------
1245 
1246### Example Shadcn UI Registry Configuration (JSON)
1247 
1248Source: https://ui.shadcn.com/docs/registry/registry-index
1249 
1250This 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.
1251 
1252```json
1253{
1254 "$schema": "https://ui.shadcn.com/schema/registry.json",
1255 "name": "acme",
1256 "homepage": "https://acme.com",
1257 "items": [
1258 {
1259 "name": "login-form",
1260 "type": "registry:component",
1261 "title": "Login Form",
1262 "description": "A login form component.",
1263 "files": [
1264 {
1265 "path": "registry/new-york/auth/login-form.tsx",
1266 "type": "registry:component"
1267 }
1268 ]
1269 },
1270 {
1271 "name": "example-login-form",
1272 "type": "registry:component",
1273 "title": "Example Login Form",
1274 "description": "An example showing how to use the login form component.",
1275 "files": [
1276 {
1277 "path": "registry/new-york/examples/example-login-form.tsx",
1278 "type": "registry:component"
1279 }
1280 ]
1281 }
1282 ]
1283}
1284```
1285 
1286--------------------------------
1287 
1288### Manually install Radix UI Alert Dialog dependency with npm
1289 
1290Source: https://ui.shadcn.com/docs/components/alert-dialog
1291 
1292This `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.
1293 
1294```bash
1295npm install @radix-ui/react-alert-dialog
1296```
1297 
1298--------------------------------
1299 
1300### Component Diff Output Example
1301 
1302Source: https://ui.shadcn.com/docs/changelog
1303 
1304Example output showing differences in a component's code. The diff displays additions and removals, showing what has changed in the upstream repository.
1305 
1306```diff
1307const alertVariants = cva(
1308- "relative w-full rounded-lg border",
1309+ "relative w-full pl-12 rounded-lg border"
1310)
1311```
1312 
1313--------------------------------
1314 
1315### Install Button Dependencies via npm
1316 
1317Source: https://ui.shadcn.com/docs/components/button
1318 
1319Manual installation of required dependencies for the Button component. Install the `@`radix-ui/react-slot package which provides slot composition functionality.
1320 
1321```bash
1322npm install @radix-ui/react-slot
1323```
1324 
1325--------------------------------
1326 
1327### CLI Error: Missing Registry Environment Variables
1328 
1329Source: https://ui.shadcn.com/docs/changelog
1330 
1331This 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.
1332 
1333```txt
1334Registry "@private" requires the following environment variables:
1335 • REGISTRY_TOKEN
1336 
1337Set the required environment variables to your .env or .env.local file.
1338```
1339 
1340--------------------------------
1341 
1342### Install Multiple Resources from Different Namespaces
1343 
1344Source: https://ui.shadcn.com/docs/registry/namespace
1345 
1346Install multiple resources from different namespaced registries in a single command. Supports combining resources from UI components, libraries, and AI prompts across various registries.
1347 
1348```bash
1349npx shadcn@latest add @acme/header @lib/auth-utils @ai/chatbot-rules
1350```
1351 
1352--------------------------------
1353 
1354### Define Universal Registry Item for ESLint Configuration (shadcn/ui)
1355 
1356Source: https://ui.shadcn.com/docs/registry/examples
1357 
1358This 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.
1359 
1360```json
1361{
1362 "$schema": "https://ui.shadcn.com/schema/registry-item.json",
1363 "name": "my-eslint-config",
1364 "type": "registry:item",
1365 "files": [
1366 {
1367 "path": "/path/to/your/registry/default/custom-eslint.json",
1368 "type": "registry:file",
1369 "target": "~/.eslintrc.json",
1370 "content": "..."
1371 }
1372 ]
1373}
1374```
1375 
1376--------------------------------
1377 
1378### Configure Plugin with NPM Dependencies in shadcn UI
1379 
1380Source: https://ui.shadcn.com/docs/registry/examples
1381 
1382Shows 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.
1383 
1384```json
1385{
1386 "$schema": "https://ui.shadcn.com/schema/registry-item.json",
1387 "name": "typography-component",
1388 "type": "registry:item",
1389 "dependencies": ["@tailwindcss/typography"],
1390 "css": {
1391 "@plugin "@tailwindcss/typography"": {},
1392 "@layer components": {
1393 ".prose": {
1394 "max-width": "65ch"
1395 }
1396 }
1397 }
1398}
1399```
1400 
1401--------------------------------
1402 
1403### Install Shadcn Accordion Component (bash)
1404 
1405Source: https://ui.shadcn.com/docs/components/accordion
1406 
1407This 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.
1408 
1409```bash
1410npx shadcn@latest add accordion
1411```
1412 
1413```bash
1414npm install @radix-ui/react-accordion
1415```
1416 
1417--------------------------------
1418 
1419### Install Navigation Menu Dependencies - npm
1420 
1421Source: https://ui.shadcn.com/docs/components/navigation-menu
1422 
1423Manual installation of required Radix UI navigation menu dependency. Use this approach when manually setting up the component instead of using the CLI.
1424 
1425```bash
1426npm install @radix-ui/react-navigation-menu
1427```
1428 
1429--------------------------------
1430 
1431### Configure Secure Custom Registry with Authorization Headers (JSON)
1432 
1433Source: https://ui.shadcn.com/docs/registry/namespace
1434 
1435Provides 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.
1436 
1437```json
1438{
1439 "@company": {
1440 "url": "https://registry.company.com/v1/{name}.json",
1441 "headers": {
1442 "Authorization": "Bearer ${COMPANY_TOKEN}",
1443 "X-Registry-Version": "1.0"
1444 }
1445 }
1446}
1447```
1448 
1449--------------------------------
1450 
1451### Create components.json Configuration File for shadcn/ui
1452 
1453Source: https://ui.shadcn.com/docs/installation/manual
1454 
1455This 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.
1456 
1457```json
1458{
1459 "$schema": "https://ui.shadcn.com/schema.json",
1460 "style": "new-york",
1461 "rsc": false,
1462 "tsx": true,
1463 "tailwind": {
1464 "config": "",
1465 "css": "src/styles/globals.css",
1466 "baseColor": "neutral",
1467 "cssVariables": true,
1468 "prefix": ""
1469 },
1470 "aliases": {
1471 "components": "@/components",
1472 "utils": "@/lib/utils",
1473 "ui": "@/components/ui",
1474 "lib": "@/lib",
1475 "hooks": "@/hooks"
1476 },
1477 "iconLibrary": "lucide"
1478}
1479```
1480 
1481--------------------------------
1482 
1483### Install Button Component via CLI
1484 
1485Source: https://ui.shadcn.com/docs/components/button
1486 
1487Quick installation of the Button component using the shadcn CLI tool. Automatically adds the button component and its dependencies to your project.
1488 
1489```bash
1490npx shadcn@latest add button
1491```
1492 
1493--------------------------------
1494 
1495### Install Tabs Dependencies via NPM - Bash
1496 
1497Source: https://ui.shadcn.com/docs/components/tabs
1498 
1499Manual npm installation of the Radix UI Tabs dependency. Use this method when manually adding the tabs component instead of using the CLI installer.
1500 
1501```bash
1502npm install @radix-ui/react-tabs
1503```
1504 
1505--------------------------------
1506 
1507### Install Checkbox Dependencies - Bash
1508 
1509Source: https://ui.shadcn.com/docs/components/checkbox
1510 
1511Manual installation command for the Radix UI checkbox dependency. Required when manually setting up the checkbox component without using the CLI.
1512 
1513```bash
1514npm install @radix-ui/react-checkbox
1515```
1516 
1517--------------------------------
1518 
1519### Add Components with add Command
1520 
1521Source: https://ui.shadcn.com/docs/cli
1522 
1523The add command installs specific components and their dependencies into your project. It supports single or multiple component installation, file overwriting, and path customization.
1524 
1525```bash
1526npx shadcn@latest add [component]
1527```
1528 
1529```bash
1530Usage: shadcn add [options] [components...]
1531 
1532add a component to your project
1533 
1534Arguments:
1535 components name, url or local path to component
1536 
1537Options:
1538 -y, --yes skip confirmation prompt. (default: false)
1539 -o, --overwrite overwrite existing files. (default: false)
1540 -c, --cwd  the working directory. defaults to the current directory.
1541 -a, --all add all available components (default: false)
1542 -p, --path  the path to add the component to.
1543 -s, --silent mute output. (default: false)
1544 --src-dir use the src directory when creating a new project. (default: false)
1545 --no-src-dir do not use the src directory when creating a new project.
1546 --css-variables use css variables for theming. (default: true)
1547 --no-css-variables do not use css variables for theming.
1548 -h, --help display help for command
1549```
1550 
1551--------------------------------
1552 
1553### Create new React project with Vite
1554 
1555Source: https://ui.shadcn.com/docs/installation/vite
1556 
1557Initializes 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.
1558 
1559```bash
1560npm create vite@latest
1561```
1562 
1563--------------------------------
1564 
1565### Manually Install Radix UI Label npm Dependency
1566 
1567Source: https://ui.shadcn.com/docs/components/label
1568 
1569For 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.
1570 
1571```bash
1572npm install @radix-ui/react-label
1573```
1574 
1575--------------------------------
1576 
1577### Install Single Resource from Namespaced Registry
1578 
1579Source: https://ui.shadcn.com/docs/registry/namespace
1580 
1581Install 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.
1582 
1583```bash
1584npx shadcn@latest add @v0/dashboard
1585```
1586 
1587--------------------------------
1588 
1589### Add UI Components with add Command
1590 
1591Source: https://ui.shadcn.com/docs/changelog
1592 
1593Use 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.
1594 
1595```bash
1596npx shadcn@latest add
1597```
1598 
1599--------------------------------
1600 
1601### Install Button Group via CLI - Bash
1602 
1603Source: https://ui.shadcn.com/docs/components/button-group
1604 
1605Command-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.
1606 
1607```bash
1608npx shadcn@latest add button-group
1609```
1610 
1611--------------------------------
1612 
1613### Radix UI Migration: Import Path Update Example
1614 
1615Source: https://ui.shadcn.com/docs/changelog
1616 
1617This `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.
1618 
1619```diff
1620- import * as AlertDialogPrimitive from "@radix-ui/react-dialog"
1621+ import { AlertDialog as AlertDialogPrimitive } from "radix-ui"
1622```
1623 
1624--------------------------------
1625 
1626### Initialize shadcn Project with init Command
1627 
1628Source: https://ui.shadcn.com/docs/cli
1629 
1630The 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.
1631 
1632```bash
1633npx shadcn@latest init
1634```
1635 
1636```bash
1637Usage: shadcn init [options] [components...]
1638 
1639initialize your project and install dependencies
1640 
1641Arguments:
1642 components name, url or local path to component
1643 
1644Options:
1645 -t, --template  the template to use. (next, next-monorepo)
1646 -b, --base-color  the base color to use. (neutral, gray, zinc, stone, slate)
1647 -y, --yes skip confirmation prompt. (default: true)
1648 -f, --force force overwrite of existing configuration. (default: false)
1649 -c, --cwd  the working directory. defaults to the current directory.
1650 -s, --silent mute output. (default: false)
1651 --src-dir use the src directory when creating a new project. (default: false)
1652 --no-src-dir do not use the src directory when creating a new project.
1653 --css-variables use css variables for theming. (default: true)
1654 --no-css-variables do not use css variables for theming.
1655 --no-base-style do not install the base shadcn style
1656 -h, --help display help for command
1657```
1658 
1659--------------------------------
1660 
1661### Install Dropdown Menu Dependencies
1662 
1663Source: https://ui.shadcn.com/docs/components/dropdown-menu
1664 
1665NPM installation command for the Radix UI dropdown menu primitive dependency. Required when manually adding the component without using the shadcn/ui CLI tool.
1666 
1667```bash
1668npm install @radix-ui/react-dropdown-menu
1669```
1670 
1671--------------------------------
1672 
1673### Install Toggle Component Dependencies Manually
1674 
1675Source: https://ui.shadcn.com/docs/components/toggle
1676 
1677Install 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.
1678 
1679```bash
1680npm install @radix-ui/react-toggle
1681```
1682 
1683--------------------------------
1684 
1685### Add Components with Shadcn CLI
1686 
1687Source: https://ui.shadcn.com/docs/changelog
1688 
1689This 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.
1690 
1691```bash
1692npx shadcn add @ai-elements/prompt-input
1693```
1694 
1695--------------------------------
1696 
1697### Initialize MCP Server for shadcn Registries
1698 
1699Source: https://ui.shadcn.com/docs/changelog
1700 
1701Set 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.
1702 
1703```bash
1704npx shadcn@latest mcp init
1705```
1706 
1707--------------------------------
1708 
1709### Install Chart Component via CLI
1710 
1711Source: https://ui.shadcn.com/docs/components/chart
1712 
1713Installs the chart.tsx component using shadcn's CLI tool. This command automatically sets up the chart component file in the project structure.
1714 
1715```bash
1716npx shadcn@latest add chart
1717```
1718 
1719--------------------------------
1720 
1721### Install Card Component via CLI - shadcn
1722 
1723Source: https://ui.shadcn.com/docs/components/card
1724 
1725Install the Card component using the shadcn CLI tool. This command downloads and integrates the Card component into your project's components directory.
1726 
1727```bash
1728npx shadcn@latest add card
1729```