Source from repo
shadcn/ui Component Patterns

Build React UIs using shadcn/ui components with Tailwind CSS, Radix primitives, and proper accessibility patterns.
giuseppe-trisciuoglioGitHub giuseppe-trisciuoglioSource repo Original GitHub link Publisher page
Files
Skill
n/a
Size
164.3 KB
Entrypoint
SKILL.md
Format
git-repo
Open file
references/ui-reference.md

Syntax-highlighted preview of this file as included in the skill package.
Rendered Source
markdown1578 linesFree
references/ui-reference.md
1### Add All shadcn/ui Components using CLI
2 
3Source: https://ui.shadcn.com/docs/installation/tanstack
4 
5This command installs all available shadcn/ui components into your TanStack Start project using the shadcn/ui CLI. It requires a package manager like pnpm, npm, yarn, or bun.
6 
7```shell
8pnpm dlx shadcn@latest add --all
9```
10 
11--------------------------------
12 
13### Create TanStack Start Project with shadcn/ui
14 
15Source: https://ui.shadcn.com/docs/installation/tanstack
16 
17This command initializes a new TanStack Start project and integrates shadcn/ui, including Tailwind CSS. It requires pnpm, npm, yarn, or bun to run.
18 
19```shell
20pnpm create @tanstack/start@latest --tailwind --add-ons shadcn
21```
22 
23--------------------------------
24 
25### Custom Block Installation
26 
27Source: https://ui.shadcn.com/docs/registry/examples
28 
29Specifies a custom block to be installed from the shadcn/ui registry. In this example, it installs the 'login-01' block.
30 
31```json
32{
33 "$schema": "https://u"
34}
35```
36 
37--------------------------------
38 
39### Example: Multiple Registry Setup in components.json
40 
41Source: https://ui.shadcn.com/docs/components-json
42 
43Demonstrates a complex `components.json` configuration with multiple registries, including public, private with authentication, and team-specific resources. This setup allows for flexible installation of components and utilities from diverse sources.
44 
45```json
46{
47 "registries": {
48 "@shadcn": "https://ui.shadcn.com/r/{name}.json",
49 "@company-ui": {
50 "url": "https://registry.company.com/ui/{name}.json",
51 "headers": {
52 "Authorization": "Bearer ${COMPANY_TOKEN}"
53 }
54 },
55 "@team": {
56 "url": "https://team.company.com/{name}.json",
57 "params": {
58 "team": "frontend",
59 "version": "${REGISTRY_VERSION}"
60 }
61 }
62 }
63}
64```
65 
66--------------------------------
67 
68### Universal Item with Multiple Files (JSON)
69 
70Source: https://ui.shadcn.com/docs/registry/examples
71 
72An example of a universal registry item that installs multiple files, including dependencies. This is useful for starter templates or comprehensive configurations, with explicit `target` paths for each file.
73 
74```json
75{
76 "$schema": "https://ui.shadcn.com/schema/registry-item.json",
77 "name": "my-custom-start-template",
78 "type": "registry:item",
79 "dependencies": [
80 "better-auth"
81 ],
82 "files": [
83 {
84 "path": "/path/to/file-01.json",
85 "type": "registry:file",
86 "target": "~/file-01.json",
87 "content": "..."
88 },
89 {
90 "path": "/path/to/file-02.vue",
91 "type": "registry:file",
92 "target": "~/pages/file-02.vue",
93 "content": "..."
94 }
95 ]
96}
97```
98 
99--------------------------------
100 
101### Create Gatsby Project using npm
102 
103Source: https://ui.shadcn.com/docs/installation/gatsby
104 
105Initializes a new Gatsby project using the npm command. This command is the starting point for setting up a new Gatsby application.
106 
107```bash
108npm init gatsby
109```
110 
111--------------------------------
112 
113### Create React Project with Vite (TypeScript)
114 
115Source: https://ui.shadcn.com/docs/installation/vite
116 
117Command to create a new React project using Vite with the TypeScript template. This is the initial step for setting up the project.
118 
119```bash
120pnpm create vite@latest 
121 --template react-ts
122```
123 
124--------------------------------
125 
126### Install Component from Private Registry
127 
128Source: https://ui.shadcn.com/docs/components-json
129 
130Command-line instruction to install a component from a private registry using its alias. This example, `@private/button`, demonstrates fetching resources from a protected registry defined in `components.json`.
131 
132```bash
133npx shadcn@latest add @private/button
134```
135 
136--------------------------------
137 
138### Install Component from Configured Registry
139 
140Source: https://ui.shadcn.com/docs/components-json
141 
142Command-line instruction to install a component using a configured registry alias. The `@v0/dashboard` syntax specifies the registry and the resource name, leveraging the `components.json` setup.
143 
144```bash
145npx shadcn@latest add @v0/dashboard
146```
147 
148--------------------------------
149 
150### Install Tailwind CSS
151 
152Source: https://ui.shadcn.com/docs/installation/remix
153 
154Commands to install Tailwind CSS and Autoprefixer as development dependencies in a Remix project using pnpm, npm, or yarn.
155 
156```bash
157pnpm add -D tailwindcss@latest autoprefixer@latest
158```
159 
160--------------------------------
161 
162### Universal Item for ESLint Configuration (JSON)
163 
164Source: https://ui.shadcn.com/docs/registry/examples
165 
166This example shows a universal registry item for installing a custom ESLint configuration. It uses an explicit `target` to place the `.eslintrc.json` file in the user's home directory, ensuring framework independence.
167 
168```json
169{
170 "$schema": "https://ui.shadcn.com/schema/registry-item.json",
171 "name": "my-eslint-config",
172 "type": "registry:item",
173 "files": [
174 {
175 "path": "/path/to/your/registry/default/custom-eslint.json",
176 "type": "registry:file",
177 "target": "~/.eslintrc.json",
178 "content": "..."
179 }
180 ]
181}
182```
183 
184--------------------------------
185 
186### Install Switch Component (Manual)
187 
188Source: https://ui.shadcn.com/docs/components/switch
189 
190Manual installation instructions for the Switch component, providing alternative methods using pnpm, npm, or yarn. This approach is useful if the CLI method is not preferred or feasible.
191 
192```bash
193pnpm add switch
194npm install switch
195yarn add switch
196```
197 
198--------------------------------
199 
200### Installing shadcn/ui Spinner Component
201 
202Source: https://ui.shadcn.com/docs/components/spinner
203 
204Shows how to add the Spinner component to your project using the shadcn-ui CLI. This command-line installation method simplifies dependency management and setup.
205 
206```bash
207pnpm dlx shadcn@latest add spinner
208```
209 
210--------------------------------
211 
212### Install Switch Component (CLI)
213 
214Source: https://ui.shadcn.com/docs/components/switch
215 
216Instructions for installing the Switch component using the shadcn-ui CLI. This is the recommended method for adding components to your project. Ensure you have the shadcn-ui CLI installed and configured.
217 
218```bash
219pnpm dlx shadcn@latest add switch
220```
221 
222--------------------------------
223 
224### shadcn/ui Select Component Installation (CLI)
225 
226Source: https://ui.shadcn.com/docs/components/select
227 
228Instructions for installing the shadcn/ui Select component using the pnpm, npm, or yarn package managers. This command-line interface method simplifies the process of adding the component to your project. Ensure you have the shadcn/ui CLI installed globally.
229 
230```bash
231pnpm dlx shadcn@latest add select
232npx shadcn@latest add select
233yarn dlx shadcn@latest add select
234```
235 
236--------------------------------
237 
238### Installing Components from Namespaced Registries
239 
240Source: https://ui.shadcn.com/docs/changelog
241 
242Demonstrates how to install components using the shadcn CLI from different registered namespaces. This enables decentralized component distribution and management.
243 
244```shell
245pnpm dlx shadcn add @acme/button @internal/auth-system
246```
247 
248--------------------------------
249 
250### Custom Style from Scratch
251 
252Source: https://ui.shadcn.com/docs/registry/examples
253 
254Creates a custom style from scratch without extending shadcn/ui. It installs specific npm packages and registry items, and defines new CSS variables for theme colors.
255 
256```json
257{
258 "$schema": "https://ui.shadcn.com/schema/registry-item.json",
259 "extends": "none",
260 "name": "new-style",
261 "type": "registry:style",
262 "dependencies": [
263 "tailwind-merge",
264 "clsx"
265 ],
266 "registryDependencies": [
267 "utils",
268 "https://example.com/r/button.json",
269 "https://example.com/r/input.json",
270 "https://example.com/r/label.json",
271 "https://example.com/r/select.json"
272 ],
273 "cssVars": {
274 "theme": {
275 "font-sans": "Inter, sans-serif"
276 },
277 "light": {
278 "main": "#88aaee",
279 "bg": "#dfe5f2",
280 "border": "#000",
281 "text": "#000",
282 "ring": "#000"
283 },
284 "dark": {
285 "main": "#88aaee",
286 "bg": "#272933",
287 "border": "#000",
288 "text": "#e6e6e6",
289 "ring": "#fff"
290 }
291 }
292}
293```
294 
295--------------------------------
296 
297### Import and Use Button Component in React
298 
299Source: https://ui.shadcn.com/docs/installation/vite
300 
301Example of importing the 'Button' component from shadcn/ui and using it within a React component. Assumes the Button component has been added via the CLI.
302 
303```typescript
304import { Button } from "@/components/ui/button"
305 
306function App() {
307 return (
308 Click me
309 )
310}
311 
312export default App
313```
314 
315--------------------------------
316 
317### Add Dependencies to Project (npm, pnpm, yarn, bun)
318 
319Source: https://ui.shadcn.com/docs/installation/manual
320 
321Installs the required dependencies for shadcn/ui using package managers. Ensure Tailwind CSS is already set up in your project.
322 
323```bash
324pnpm add class-variance-authority clsx tailwind-merge lucide-react tw-animate-css
325```
326 
327--------------------------------
328 
329### shadcn/ui Tooltip Installation (CLI)
330 
331Source: https://ui.shadcn.com/docs/components/tooltip
332 
333This command installs the shadcn/ui Tooltip component using the shadcn CLI. This is the recommended method for adding components to your project, ensuring proper dependency management.
334 
335```bash
336pnpm dlx shadcn@latest add tooltip
337```
338 
339--------------------------------
340 
341### Install Multiple Resources from Different Registries
342 
343Source: https://ui.shadcn.com/docs/components-json
344 
345Command-line instruction to install multiple resources from various configured registries simultaneously. This showcases the flexibility of installing components like `@acme/header` and `@internal/auth-utils` in one go.
346 
347```bash
348npx shadcn@latest add @acme/header @internal/auth-utils
349```
350 
351--------------------------------
352 
353### shadcn/ui Alert Component Import Example
354 
355Source: https://ui.shadcn.com/docs/components/alert
356 
357Example of how to import the Alert, AlertDescription, and AlertTitle components from shadcn/ui after installation. This allows you to use them in your React components.
358 
359```jsx
360import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
361```
362 
363--------------------------------
364 
365### Initialize shadcn/ui Project with CLI
366 
367Source: https://ui.shadcn.com/docs/cli
368 
369Initializes your project with shadcn/ui, installing necessary dependencies and configuring the project. This command sets up the `cn` utility and CSS variables.
370 
371```bash
372pnpm dlx shadcn@latest init
373```
374 
375--------------------------------
376 
377### shadcn/ui CLI Installation Commands
378 
379Source: https://ui.shadcn.com/docs/cli
380 
381Shows the commands for installing shadcn/ui dependencies using different package managers (PNPM, NPM, Yarn, Bun).
382 
383```bash
384pnpm dlx shadcn@latest init
385```
386 
387```bash
388npm dlx shadcn@latest init
389```
390 
391```bash
392yarn dlx shadcn@latest init
393```
394 
395```bash
396bun dlx shadcn@latest init
397```
398 
399--------------------------------
400 
401### shadcn/ui Empty Component Installation (CLI)
402 
403Source: https://ui.shadcn.com/docs/components/empty
404 
405Shows how to install the Empty component using the shadcn/ui CLI. This involves running a specific command to add the component to your project.
406 
407```bash
408pnpm dlx shadcn@latest add empty
409```
410 
411--------------------------------
412 
413### Add Tailwind CSS and Vite Plugin
414 
415Source: https://ui.shadcn.com/docs/installation/vite
416 
417Installs Tailwind CSS and its Vite plugin. These are necessary for styling components with Tailwind utility classes.
418 
419```bash
420pnpm add -D tailwindcss postcss autoprefixer
421pnpm add -D @tailwindcss/vite
422```
423 
424--------------------------------
425 
426### Import and Use 'Button' Component in React
427 
428Source: https://ui.shadcn.com/docs/installation/tanstack
429 
430Demonstrates how to import and use the 'Button' component from shadcn/ui within a React component in a TanStack Start application. Assumes the 'Button' component has been added via the CLI.
431 
432```jsx
433import { Button } from "@/components/ui/button"
434 
435function App() {
436 return (
437 Click me
438 )
439}
440```
441 
442--------------------------------
443 
444### shadcn/ui Alert Component Installation (CLI)
445 
446Source: https://ui.shadcn.com/docs/components/alert
447 
448Instructions for installing the Alert component using the shadcn/ui CLI. This command adds the necessary dependencies and component files to your project.
449 
450```bash
451pnpm dlx shadcn@latest add alert
452```
453 
454--------------------------------
455 
456### Universal Item for Python Rules (JSON)
457 
458Source: https://ui.shadcn.com/docs/registry/examples
459 
460An example of a universal registry item designed to install custom Python rules for the Cursor editor. It specifies an explicit target path for the rule file, making it framework-agnostic.
461 
462```json
463{
464 "$schema": "https://ui.shadcn.com/schema/registry-item.json",
465 "name": "python-rules",
466 "type": "registry:item",
467 "files": [
468 {
469 "path": "/path/to/your/registry/default/custom-python.mdc",
470 "type": "registry:file",
471 "target": "~/.cursor/rules/custom-python.mdc",
472 "content": "..."
473 }
474 ]
475}
476```
477 
478--------------------------------
479 
480### Calendar Installation (CLI)
481 
482Source: https://ui.shadcn.com/docs/components/calendar
483 
484Provides commands for installing the Calendar component using different package managers like pnpm, npm, yarn, and bun. This is a prerequisite for using the component in your project.
485 
486```bash
487pnpm dlx shadcn@latest add calendar
488```
489 
490--------------------------------
491 
492### Dropdown Menu Basic Usage (JavaScript/React)
493 
494Source: https://ui.shadcn.com/docs/components/dropdown-menu
495 
496This snippet shows the minimal setup for a dropdown menu component. It requires importing the necessary components from shadcn/ui and defining a trigger and content. This is a foundational example for integrating dropdown menus.
497 
498```javascript
499import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"
500 
501```
502 
503```javascript
504OpenMy Account
505 Profile
506 ⇧⌘P
507 Billing
508 ⌘B
509 Settings
510 ⌘S
511 Keyboard shortcuts
512 ⌘K
513 Team
514 
515 Invite users
516 
517 New Team...
518 ⌘+T
519 GitHub
520 
521 Support
522 
523 API
524 
525 Log out
526 ⇧⌘Q
527 
528```
529 
530--------------------------------
531 
532### Install Progress Component using CLI
533 
534Source: https://ui.shadcn.com/docs/components/progress
535 
536Command to add the Progress component to your project using the shadcn-ui CLI. This is the recommended way to install components.
537 
538```bash
539pnpm dlx shadcn@latest add progress
540```
541 
542--------------------------------
543 
544### Separator Component Installation (CLI)
545 
546Source: https://ui.shadcn.com/docs/components/separator
547 
548Shows the command to install the Separator component using the shadcn-ui CLI. This is the recommended method for adding components.
549 
550```bash
551pnpm dlx shadcn@latest add separator
552```
553 
554--------------------------------
555 
556### Add CSS Import with URL Syntax
557 
558Source: https://ui.shadcn.com/docs/registry/examples
559 
560This example demonstrates importing CSS files using the `url()` syntax, including importing from external sources like Google Fonts and local files.
561 
562```json
563{
564 "$schema": "https://ui.shadcn.com/schema/registry-item.json",
565 "name": "font-import",
566 "type": "registry:item",
567 "css": {
568 "@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap")": {},
569 "@import url('./local-styles.css')": {}
570 }
571}
572```
573 
574--------------------------------
575 
576### React Card Component Example (shadcn/ui)
577 
578Source: https://ui.shadcn.com/docs/components/card
579 
580This code snippet demonstrates how to use the Card component from shadcn/ui in a React application. It includes examples for header, title, description, content, footer, and action elements. Ensure you have the 'card' component installed via the shadcn/ui CLI or manually imported.
581 
582```jsx
583import { Button } from "@/components/ui/button"
584import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "@/components/ui/card"
585import { Input } from "@/components/ui/input"
586import { Label } from "@/components/ui/label"
587 
588export function CardDemo() {
589 return (
590 Login to your accountEnter your email below to login to your account
591 
592Name
593 
594Framework
595 
596CancelDeploy
597 )
598}
599```
600 
601--------------------------------
602 
603### Install shadcn/ui Toggle Component
604 
605Source: https://ui.shadcn.com/docs/components/toggle
606 
607Instructions for installing the shadcn/ui Toggle component using pnpm. This command adds the necessary package and dependencies to your project.
608 
609```bash
610pnpm dlx shadcn@latest add toggle
611```
612 
613--------------------------------
614 
615### Create a Simple Component (TypeScript/React)
616 
617Source: https://ui.shadcn.com/docs/registry/getting-started
618 
619An example of a basic component file, `hello-world.tsx`, intended to be part of a registry. This component uses a Button from `@/components/ui/button`. It should be placed within a structured directory like `registry/[NAME]/[COMPONENT_NAME]/`.
620 
621```tsx
622import { Button } from "@/components/ui/button"
623 
624export function HelloWorld() {
625 return (
626 Hello World
627 )
628}
629```
630 
631--------------------------------
632 
633### shadcn/ui Alert Dialog Installation
634 
635Source: https://ui.shadcn.com/docs/components/alert-dialog
636 
637Instructions for installing the Alert Dialog component using the shadcn-ui CLI. This command adds the necessary component files to your project, allowing you to import and use them.
638 
639```bash
640pnpm dlx shadcn@latest add alert-dialog
641```
642 
643--------------------------------
644 
645### Install Remote Component using URL (CLI)
646 
647Source: https://ui.shadcn.com/docs/changelog
648 
649Installs a remote component by providing its registry URL to the shadcn CLI. This allows for easy integration of components from external sources. It requires the shadcn CLI to be installed.
650 
651```bash
652npx shadcn add https://acme.com/registry/navbar.json
653```
654 
655--------------------------------
656 
657### Add Functional CSS Utilities
658 
659Source: https://ui.shadcn.com/docs/registry/examples
660 
661This example demonstrates functional CSS utilities using a wildcard. The 'tab-*' utility allows for dynamic application of 'tab-size' based on the value provided.
662 
663```json
664{
665 "$schema": "https://ui.shadcn.com/schema/registry-item.json",
666 "name": "custom-component",
667 "type": "registry:component",
668 "css": {
669 "@utility tab-*": {
670 "tab-size": "var(--tab-size-)"
671 }
672 }
673}
674```
675 
676--------------------------------
677 
678### Install shadcn/ui Registry Item via CLI
679 
680Source: https://ui.shadcn.com/docs/registry/getting-started
681 
682Installs a registry item using the shadcn CLI by providing the URL of the registry item. This command allows developers to easily add components from a remote registry to their project.
683 
684```Shell
685pnpm dlx shadcn@latest add http://localhost:3000/r/hello-world.json
686```
687 
688--------------------------------
689 
690### shadcn/ui Drawer Component Usage Example
691 
692Source: https://ui.shadcn.com/docs/components/drawer
693 
694Provides a basic import statement for using the Drawer component and its associated sub-components from shadcn/ui. This snippet is intended for developers who have installed the component and need to integrate it into their React application.
695 
696```javascript
697import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, } from "@/components/ui/drawer"
698 
699```
700 
701--------------------------------
702 
703### Toggle Group Component Documentation
704 
705Source: https://ui.shadcn.com/docs/components/toggle-group
706 
707This section details the Toggle Group component, its installation, usage, and various examples demonstrating its functionality and appearance.
708 
709```APIDOC
710## Toggle Group Component
711 
712### Description
713A set of two-state buttons that can be toggled on or off. Provides "single" and "multiple" selection modes.
714 
715### Installation
716Use the shadcn-ui CLI to add the component to your project:
717```bash
718pnpm dlx shadcn@latest add toggle-group
719```
720 
721### Usage
722Import the necessary components and use them in your React application.
723 
724```javascript
725import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
726 
727function MyToggleGroup() {
728 return (
729 
730 A
731 
732 B
733 
734 C
735 
736 );
737}
738```
739 
740### Examples
741 
742#### Outline
743```javascript
744import { Bold, Italic, Underline } from "lucide-react";
745import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
746 
747export function ToggleGroupOutline() {
748 return (
749 
750 );
751}
752```
753 
754#### Single
755```javascript
756import { Bold, Italic, Underline } from "lucide-react";
757import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
758 
759export function ToggleGroupSingle() {
760 return (
761 
762 );
763}
764```
765 
766#### Small
767```javascript
768import { Bold, Italic, Underline } from "lucide-react";
769import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
770 
771export function ToggleGroupSmall() {
772 return (
773 
774 );
775}
776```
777 
778#### Large
779```javascript
780import { Bold, Italic, Underline } from "lucide-react";
781import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
782 
783export function ToggleGroupLarge() {
784 return (
785 
786 );
787}
788```
789 
790#### Disabled
791```javascript
792import { Bold, Italic, Underline } from "lucide-react";
793import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
794 
795export function ToggleGroupDisabled() {
796 return (
797 
798 );
799}
800```
801 
802#### Spacing
803Use `spacing={2}` to add spacing between toggle group items.
804```javascript
805import { BookmarkIcon, HeartIcon, StarIcon } from "lucide-react";
806import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
807 
808export function ToggleGroupSpacing() {
809 return (
810 
811 );
812}
813```
814 
815### API Reference
816 
817#### ToggleGroup
818The main component that wraps toggle group items.
819 
820| Prop | Type | Default |
821|------------|-------------------------------------|-------------|
822| `type` | `"single" | "multiple"` | `"single"` |
823| `variant` | `"default" | "outline"` | `"default"` |
824| `size` | `"default" | "sm" | "lg"` | `"default"` |
825| `spacing` | `number` | `0` |
826| `className`| `string` | `''` |
827 
828#### ToggleGroupItem
829Individual toggle items within a toggle group. Remember to add an `aria-label` to each item for accessibility.
830 
831| Prop | Type | Default |
832|------------|----------|-----------|
833| `value` | `string` | Required |
834| `className`| `string` | `''` |
835```
836 
837--------------------------------
838 
839### Use shadcn/ui Button Component in Remix
840 
841Source: https://ui.shadcn.com/docs/installation/remix
842 
843Example of importing and using the shadcn/ui Button component within a Remix route component. Demonstrates basic component integration.
844 
845```typescript
846import { Button } from "~/components/ui/button"
847 
848export default function Home() {
849 return (
850 Click me
851 )
852}
853```
854 
855--------------------------------
856 
857### Override Primitives with a Block
858 
859Source: https://ui.shadcn.com/docs/registry/examples
860 
861Demonstrates how to define a custom login block that overrides existing primitives like 'button', 'input', and 'label' with remote versions. This allows for customization during installation.
862 
863```json
864{
865 "$schema": "https://ui.shadcn.com/schema/registry-item.json",
866 "name": "custom-login",
867 "type": "registry:block",
868 "registryDependencies": [
869 "login-01",
870 "https://example.com/r/button.json",
871 "https://example.com/r/input.json",
872 "https://example.com/r/label.json"
873 ]
874}
875```
876 
877--------------------------------
878 
879### Initialize Project with shadcn CLI
880 
881Source: https://ui.shadcn.com/docs/changelog
882 
883Initializes a new project with shadcn/ui components. The command automatically detects the project's framework and can even set up a new Next.js application. It is a convenient way to start integrating shadcn/ui.
884 
885```bash
886npx shadcn init
887pnpm dlx shadcn init sidebar-01 login-01
888```
889 
890--------------------------------
891 
892### shadcn CLI Commands
893 
894Source: https://ui.shadcn.com/docs/changelog
895 
896Demonstrates the usage of the shadcn CLI for managing UI components. The commands shown are 'init' for project setup and 'add' for incorporating new components, along with an experimental 'diff' command. These are essential for integrating and managing shadcn/ui within a project.
897 
898```bash
899npx shadcn-ui@latest init
900npx shadcn-ui@latest add
901npx shadcn-ui@latest diff (experimental)
902```
903 
904--------------------------------
905 
906### Install shadcn/ui Tabs Component
907 
908Source: https://ui.shadcn.com/docs/components/tabs
909 
910Instructions for installing the Tabs component using pnpm and the shadcn-ui CLI. This ensures the component is correctly added to your project's dependencies and configuration.
911 
912```bash
913pnpm dlx shadcn@latest add tabs
914```
915 
916--------------------------------
917 
918### Install shadcn/ui Badge Component (CLI)
919 
920Source: https://ui.shadcn.com/docs/components/badge
921 
922Command-line instructions for adding the shadcn/ui Badge component to your project using pnpm. This command fetches and installs the necessary component files.
923 
924```bash
925pnpm dlx shadcn@latest add badge
926```
927 
928--------------------------------
929 
930### Define a Login Block
931 
932Source: https://ui.shadcn.com/docs/registry/examples
933 
934This example shows how to define a 'login-01' block, specifying its type, description, dependencies, and the files it comprises. The 'page.tsx' and 'login-form.tsx' are included as part of the block.
935 
936```json
937{
938 "$schema": "https://ui.shadcn.com/schema/registry-item.json",
939 "name": "login-01",
940 "type": "registry:block",
941 "description": "A simple login form.",
942 "registryDependencies": [
943 "button",
944 "card",
945 "input",
946 "label"
947 ],
948 "files": [
949 {
950 "path": "blocks/login-01/page.tsx",
951 "content": "import { LoginForm } ...",
952 "type": "registry:page",
953 "target": "app/login/page.tsx"
954 },
955 {
956 "path": "blocks/login-01/components/login-form.tsx",
957 "content": "...",
958 "type": "registry:component"
959 }
960 ]
961}
962```
963 
964--------------------------------
965 
966### Menubar Component Installation (pnpm)
967 
968Source: https://ui.shadcn.com/docs/components/menubar
969 
970Instructions for installing the Menubar component from shadcn/ui using the pnpm package manager. This command-line interface (CLI) command fetches and adds the necessary component files to your project.
971 
972```bash
973pnpm dlx shadcn@latest add menubar
974```
975 
976--------------------------------
977 
978### shadcn/ui Card Component - Installation
979 
980Source: https://ui.shadcn.com/docs/components/card
981 
982Instructions for installing the Card component in your project using the shadcn/ui CLI. This command automates the process of adding the necessary files to your components directory.
983 
984```bash
985pnpm dlx shadcn@latest add card
986```
987 
988--------------------------------
989 
990### Custom Theme Example
991 
992Source: https://ui.shadcn.com/docs/registry/examples
993 
994Defines a custom theme with specific color variables for both light and dark modes. This allows for a unique color palette across the application.
995 
996```json
997{
998 "$schema": "https://ui.shadcn.com/schema/registry-item.json",
999 "name": "custom-theme",
1000 "type": "registry:theme",
1001 "cssVars": {
1002 "light": {
1003 "background": "oklch(1 0 0)",
1004 "foreground": "oklch(0.141 0.005 285.823)",
1005 "primary": "oklch(0.546 0.245 262.881)",
1006 "primary-foreground": "oklch(0.97 0.014 254.604)",
1007 "ring": "oklch(0.746 0.16 232.661)",
1008 "sidebar-primary": "oklch(0.546 0.245 262.881)",
1009 "sidebar-primary-foreground": "oklch(0.97 0.014 254.604)",
1010 "sidebar-ring": "oklch(0.746 0.16 232.661)"
1011 },
1012 "dark": {
1013 "background": "oklch(1 0 0)",
1014 "foreground": "oklch(0.141 0.005 285.823)",
1015 "primary": "oklch(0.707 0.165 254.624)",
1016 "primary-foreground": "oklch(0.97 0.014 254.604)",
1017 "ring": "oklch(0.707 0.165 254.624)",
1018 "sidebar-primary": "oklch(0.707 0.165 254.624)",
1019 "sidebar-primary-foreground": "oklch(0.97 0.014 254.604)",
1020 "sidebar-ring": "oklch(0.707 0.165 254.624)"
1021 }
1022 }
1023}
1024```
1025 
1026--------------------------------
1027 
1028### Install Form Component - CLI
1029 
1030Source: https://ui.shadcn.com/docs/components/form
1031 
1032Command to add the Form component to your project using the shadcn-ui CLI. This command installs the necessary dependencies and component files.
1033 
1034```bash
1035pnpm dlx shadcn@latest add form
1036```
1037 
1038--------------------------------
1039 
1040### Navigation Menu Installation (CLI)
1041 
1042Source: https://ui.shadcn.com/docs/components/navigation-menu
1043 
1044Provides instructions for adding the Navigation Menu component to your project using the shadcn/ui CLI with pnpm, npm, or yarn package managers.
1045 
1046```bash
1047pnpm dlx shadcn@latest add navigation-menu
1048```
1049 
1050--------------------------------
1051 
1052### shadcn/ui Popover Installation Commands
1053 
1054Source: https://ui.shadcn.com/docs/components/popover
1055 
1056Provides commands for installing the shadcn/ui Popover component. It includes instructions for pnpm, npm, and yarn package managers, as well as a command to add the Popover component using the shadcn CLI.
1057 
1058```bash
1059pnpm
1060npm
1061yarn
1062bun
1063```
1064 
1065```bash
1066pnpm dlx shadcn@latest add popover
1067```
1068 
1069--------------------------------
1070 
1071### Install Calendar Blocks using shadcn-ui CLI
1072 
1073Source: https://ui.shadcn.com/docs/components/calendar
1074 
1075Instructions to install the latest version of the calendar blocks using the shadcn-ui CLI. This command fetches and adds the necessary calendar components to your project.
1076 
1077```bash
1078pnpm dlx shadcn@latest add calendar-02
1079```
1080 
1081--------------------------------
1082 
1083### Initialize Project from Local File using shadcn CLI
1084 
1085Source: https://ui.shadcn.com/docs/changelog
1086 
1087This command initializes a project using a local JSON file as a template. It's useful for zero-setup workflows and testing registry items locally.
1088 
1089```bash
1090npx shadcn init ./template.json
1091```
1092 
1093--------------------------------
1094 
1095### Avatar Component Installation
1096 
1097Source: https://ui.shadcn.com/docs/components/avatar
1098 
1099Provides instructions for installing the Avatar component using the shadcn/ui CLI. This typically involves running a command like 'pnpm dlx shadcn@latest add avatar' after setting up the project.
1100 
1101```bash
1102pnpm dlx shadcn@latest add avatar
1103```
1104 
1105--------------------------------
1106 
1107### shadcn/ui Slider Component Installation
1108 
1109Source: https://ui.shadcn.com/docs/components/slider
1110 
1111Instructions for installing the shadcn/ui Slider component. This includes methods using pnpm, npm, yarn, and bun, as well as a command-line instruction to add the slider dependency using the shadcn CLI.
1112 
1113```bash
1114pnpm dlx shadcn@latest add slider
1115```
1116 
1117--------------------------------
1118 
1119### Install shadcn/ui Button Component
1120 
1121Source: https://ui.shadcn.com/docs/components/button
1122 
1123Instructions for installing the shadcn/ui Button component using package managers like pnpm, npm, or yarn. It also includes the command to add the button component to your project.
1124 
1125```bash
1126pnpm dlx shadcn@latest add button
1127```
1128 
1129--------------------------------
1130 
1131### Install Sidebar Component using PNPM
1132 
1133Source: https://ui.shadcn.com/docs/components/sidebar
1134 
1135Installs the 'sidebar.tsx' component using the pnpm package manager. This is the recommended method for adding the component to your project.
1136 
1137```bash
1138pnpm dlx shadcn@latest add sidebar
1139```
1140 
1141--------------------------------
1142 
1143### Custom Style Extending shadcn/ui
1144 
1145Source: https://ui.shadcn.com/docs/registry/examples
1146 
1147Defines a custom style that extends shadcn/ui, installing specific dependencies and components. It also sets custom CSS variables for fonts and a brand color in both light and dark modes.
1148 
1149```json
1150{
1151 "$schema": "https://ui.shadcn.com/schema/registry-item.json",
1152 "name": "example-style",
1153 "type": "registry:style",
1154 "dependencies": [
1155 "@tabler/icons-react"
1156 ],
1157 "registryDependencies": [
1158 "login-01",
1159 "calendar",
1160 "https://example.com/r/editor.json"
1161 ],
1162 "cssVars": {
1163 "theme": {
1164 "font-sans": "Inter, sans-serif"
1165 },
1166 "light": {
1167 "brand": "20 14.3% 4.1%"
1168 },
1169 "dark": {
1170 "brand": "20 14.3% 4.1%"
1171 }
1172 }
1173}
1174```
1175 
1176--------------------------------
1177 
1178### Install shadcn/ui Table Component (CLI)
1179 
1180Source: https://ui.shadcn.com/docs/components/table
1181 
1182This command installs the Table component and its dependencies into your shadcn/ui project using the pnpm package manager. Ensure you have shadcn/ui CLI set up.
1183 
1184```bash
1185pnpm dlx shadcn@latest add table
1186```
1187 
1188--------------------------------
1189 
1190### Install Textarea Component with shadcn/ui
1191 
1192Source: https://ui.shadcn.com/docs/components/textarea
1193 
1194Instructions for installing the Textarea component using different package managers (pnpm, npm, yarn, bun). This is a prerequisite for using the Textarea component in your project.
1195 
1196```bash
1197pnpm dlx shadcn@latest add textarea
1198```
1199 
1200--------------------------------
1201 
1202### Create Remix Project
1203 
1204Source: https://ui.shadcn.com/docs/installation/remix
1205 
1206Command to create a new Remix project using pnpm, npm, or yarn. Ensures a fresh project structure for integration.
1207 
1208```bash
1209pnpm dlx create-remix@latest my-app
1210```
1211 
1212--------------------------------
1213 
1214### Sheet Component Installation (CLI)
1215 
1216Source: https://ui.shadcn.com/docs/components/sheet
1217 
1218Provides instructions for installing the Sheet component using the shadcn-ui CLI. This command-line approach simplifies the process of adding the component to your project, ensuring all necessary dependencies are handled.
1219 
1220```bash
1221pnpm dlx shadcn@latest add sheet
1222```
1223 
1224--------------------------------
1225 
1226### SidebarHeader Component Example
1227 
1228Source: https://ui.shadcn.com/docs/components/sidebar
1229 
1230Shows how to incorporate the SidebarHeader component to add a sticky header. The example includes a dropdown menu for workspace selection.
1231 
1232```typescript
1233import { SidebarHeader } from "@/components/ui/sidebar"
1234 
1235export function AppSidebar() {
1236 return (
1237 
1238 
1239 
1240 
1241 
1242 Acme Inc.
1243 Acme Corp.
1244 
1245 
1246 )
1247}
1248```
1249 
1250--------------------------------
1251 
1252### shadcn/ui Drawer Component Installation Command
1253 
1254Source: https://ui.shadcn.com/docs/components/drawer
1255 
1256Shows the command-line interface (CLI) command to install the Drawer component into a shadcn/ui project. This command uses `pnpm dlx` to execute the `shadcn@latest add drawer` command, ensuring the latest version is added.
1257 
1258```bash
1259pnpm dlx shadcn@latest add drawer
1260 
1261```
1262 
1263--------------------------------
1264 
1265### Add CSS Import with Media Queries
1266 
1267Source: https://ui.shadcn.com/docs/registry/examples
1268 
1269This configuration shows how to use CSS imports with media queries, allowing for conditional loading of styles based on print or screen size.
1270 
1271```json
1272{
1273 "$schema": "https://ui.shadcn.com/schema/registry-item.json",
1274 "name": "responsive-import",
1275 "type": "registry:item",
1276 "css": {
1277 "@import "print-styles.css" print": {},
1278 "@import url("mobile.css") screen and (max-width: 768px)": {}
1279 }
1280}
1281```
1282 
1283--------------------------------
1284 
1285### SidebarFooter Component Example
1286 
1287Source: https://ui.shadcn.com/docs/components/sidebar
1288 
1289Demonstrates the use of the SidebarFooter component for adding a sticky footer. This example includes user account and billing links, and a sign-out option.
1290 
1291```typescript
1292import { SidebarFooter } from "@/components/ui/sidebar"
1293 
1294export function AppSidebar() {
1295 return (
1296 
1297 
1298CN
1299 
1300[email protected]
1301 
1302More optionsAccountBillingSettingsSign out
1303 )
1304}
1305```
1306 
1307--------------------------------
1308 
1309### shadcn/ui Dialog Component Installation (CLI)
1310 
1311Source: https://ui.shadcn.com/docs/components/dialog
1312 
1313Provides the command to install the Dialog component using the shadcn/ui CLI with pnpm. This command adds the necessary files and dependencies for the Dialog component to your project. It's a prerequisite for using the component in your application.
1314 
1315```bash
1316pnpm dlx shadcn@latest add dialog
1317```
1318 
1319--------------------------------
1320 
1321### shadcn CLI init Command Usage
1322 
1323Source: https://ui.shadcn.com/docs/cli
1324 
1325Illustrates the usage of the `shadcn init` command, including its arguments for specifying component names, URLs, or local paths, and available options like `--template`. This command is crucial for setting up the project's components and configuration.
1326 
1327```bash
1328Usage: shadcn init [options] [components...]
1329 
1330initialize your project and install dependencies
1331 
1332Arguments:
1333 components name, url or local path to component
1334 
1335Options:
1336 -t, --template
1337```
1338 
1339--------------------------------
1340 
1341### Install shadcn/ui Accordion Component
1342 
1343Source: https://ui.shadcn.com/docs/components/accordion
1344 
1345Provides commands for installing the Accordion component using different package managers (pnpm, yarn, bun). It also shows the command to add the component using the shadcn-ui CLI.
1346 
1347```bash
1348pnpm dlx shadcn@latest add accordion
1349```
1350 
1351--------------------------------
1352 
1353### SidebarMenuAction - DropdownMenu Example
1354 
1355Source: https://ui.shadcn.com/docs/components/sidebar
1356 
1357An example of integrating a DropdownMenu with the SidebarMenuAction component. This allows for contextual actions or sub-options.
1358 
1359```javascript
1360[Home](#)
1361Edit Project
1362Delete Project
1363```
1364 
1365--------------------------------
1366 
1367### shadcn/ui Checkbox Installation
1368 
1369Source: https://ui.shadcn.com/docs/components/checkbox
1370 
1371Provides instructions for installing the Checkbox component using different package managers (pnpm, npm, yarn, bun). It also includes the command to add the component using the shadcn-ui CLI.
1372 
1373```bash
1374pnpm dlx shadcn@latest add checkbox
1375```
1376 
1377--------------------------------
1378 
1379### Install Hover Card Component using pnpm
1380 
1381Source: https://ui.shadcn.com/docs/components/hover-card
1382 
1383Command to install the Hover Card component and its dependencies into your project using pnpm and the shadcn-ui CLI.
1384 
1385```bash
1386pnpm dlx shadcn@latest add hover-card
1387```
1388 
1389--------------------------------
1390 
1391### Create React Router Project
1392 
1393Source: https://ui.shadcn.com/docs/installation/react-router
1394 
1395This command initializes a new React Router project using pnpm. It's the first step in setting up your application before integrating shadcn/ui.
1396 
1397```bash
1398pnpm dlx create-react-router@latest my-app
1399```
1400 
1401--------------------------------
1402 
1403### Create Astro Project with Tailwind CSS
1404 
1405Source: https://ui.shadcn.com/docs/installation/astro
1406 
1407Command to create a new Astro project with Tailwind CSS, React integration, package installation, and Git initialization.
1408 
1409```bash
1410pnpm dlx create-astro@latest astro-app --template with-tailwindcss --install --add react --git
1411```
1412 
1413--------------------------------
1414 
1415### Express.js Example for Registry Authentication
1416 
1417Source: https://ui.shadcn.com/docs/registry/authentication
1418 
1419Example of an Express.js route handler for registry authentication, checking the Authorization header for a Bearer token.
1420 
1421```APIDOC
1422## Express.js Example
1423 
1424### Description
1425This Express.js example demonstrates a basic route handler for authenticating requests to your component registry. It checks the `Authorization` header for a Bearer token.
1426 
1427### Method
1428GET
1429 
1430### Endpoint
1431`/registry/:name.json`
1432 
1433### Parameters
1434#### Path Parameters
1435- **name** (string) - Required - The name of the component to retrieve.
1436 
1437#### Query Parameters
1438N/A
1439 
1440#### Request Body
1441N/A
1442 
1443### Request Example
1444N/A (GET request)
1445 
1446### Response
1447#### Success Response (200)
1448- **component** (object) - The requested component data.
1449 
1450#### Error Responses
1451- **401 Unauthorized**: If the provided token is invalid.
1452- **404 Not Found**: If the component is not found.
1453 
1454### Code Example
1455```javascript
1456app.get("/registry/:name.json", (req, res) => {
1457 const token = req.headers.authorization?.replace("Bearer ", "")
1458 
1459 if (!isValidToken(token)) {
1460 return res.status(401).json({ error: "Unauthorized" })
1461 }
1462 
1463 const component = getComponent(req.params.name)
1464 if (!component) {
1465 return res.status(404).json({ error: "Component not found" })
1466 }
1467 
1468 res.json(component)
1469})
1470 
1471function isValidToken(token) {
1472 // Add your token validation logic here.
1473 // Example: return token === process.env.VALID_TOKEN;
1474 return true; // Placeholder
1475}
1476 
1477function getComponent(componentName) {
1478 // Replace with your actual logic to fetch the component.
1479 // Example: return { name: componentName, data: "component data" };
1480 return null; // Placeholder
1481}
1482```
1483```
1484 
1485--------------------------------
1486 
1487### shadcn/ui Context Menu Installation (CLI)
1488 
1489Source: https://ui.shadcn.com/docs/components/context-menu
1490 
1491Instructions for adding the shadcn/ui Context Menu component to your project using the command-line interface. This command will automatically download and update the necessary dependencies for the component.
1492 
1493```bash
1494pnpm dlx shadcn@latest add context-menu
1495```
1496 
1497--------------------------------
1498 
1499### Add Complex CSS Utility
1500 
1501Source: https://ui.shadcn.com/docs/registry/examples
1502 
1503This example defines a more complex CSS utility called 'scrollbar-hidden'. It targets the scrollbar pseudo-elements to hide them.
1504 
1505```json
1506{
1507 "$schema": "https://ui.shadcn.com/schema/registry-item.json",
1508 "name": "custom-component",
1509 "type": "registry:component",
1510 "css": {
1511 "@utility scrollbar-hidden": {
1512 "scrollbar-hidden": {
1513 "&::-webkit-scrollbar": {
1514 "display": "none"
1515 }
1516 }
1517 }
1518 }
1519}
1520```
1521 
1522--------------------------------
1523 
1524### shadcn/ui Label Component Installation
1525 
1526Source: https://ui.shadcn.com/docs/components/label
1527 
1528Provides instructions for installing the Label component into a shadcn/ui project using different package managers like pnpm, npm, yarn, and bun. It also shows the command to add the component using the shadcn CLI.
1529 
1530```bash
1531pnpm dlx shadcn@latest add label
1532```
1533 
1534--------------------------------
1535 
1536### Install Aspect Ratio Component using pnpm
1537 
1538Source: https://ui.shadcn.com/docs/components/aspect-ratio
1539 
1540Command to install the Aspect Ratio component using the pnpm package manager. This command adds the component to your project, making it available for use.
1541 
1542```bash
1543pnpm dlx shadcn@latest add aspect-ratio
1544```
1545 
1546--------------------------------
1547 
1548### React ButtonGroup Installation using pnpm
1549 
1550Source: https://ui.shadcn.com/docs/components/button-group
1551 
1552Provides the command to install the 'button-group' component from shadcn/ui using the pnpm package manager. This command downloads and integrates the necessary files into your project.
1553 
1554```bash
1555pnpm dlx shadcn@latest add button-group
1556```
1557 
1558--------------------------------
1559 
1560### Switch Component Usage Example (React)
1561 
1562Source: https://ui.shadcn.com/docs/components/switch
1563 
1564This code snippet demonstrates how to use the Switch component in a React application. It requires the Label and Switch components from '@/components/ui/label' and '@/components/ui/switch' respectively. The example shows a basic implementation with a label and the switch itself.
1565 
1566```jsx
1567import { Label } from "@/components/ui/label"
1568import { Switch } from "@/components/ui/switch"
1569 
1570export function SwitchDemo() {
1571 return (
1572 
1573 
1574Airplane Mode
1575 
1576 )
1577}
1578```
Preparing the source view

shadcn/ui Component Patterns

references/ui-reference.md
