[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6PE0PCVCSDMP855MEAXEHCD":3,"skill-same:01M6PE0PCVCSDMP855MEAXEHCD":95},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":28,"publishedAt":49,"linkOnly":50,"markdownContent":51,"markdownBody":52,"frontMatter":53,"refName":57,"commitSha":58,"skillDirectory":59,"forksCount":14,"repositoryHtmlUrl":60,"repositoryHomepageUrl":6,"ownerHtmlUrl":61,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":62,"install":63,"resources":76},"01M6PE0PCVCSDMP855MEAXEHCD","shadcn-ui",null,"Complete shadcn\u002Fui component library guide including installation, configuration, and implementation of accessible React components. Use when setting up shadcn\u002Fui, installing components, building forms with React Hook Form and Zod, customizing themes with Tailwind CSS, or implementing UI patterns like buttons, dialogs, dropdowns, tables, and complex form layouts.","castle-x\u002Fsonar","castle-x","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F68362913?v=4","01M6PDKZEWWT760P3FFZZQ42SD","castlexu","01M6PDKZJTJXTRH54309WXD6YR",0,"MIT","https:\u002F\u002Fgithub.com\u002Fcastle-x\u002Fsonar\u002Fblob\u002Fmain\u002F.legacy\u002Fdatasource\u002F.codebuddy\u002Fskills\u002Fshadcn-ui\u002FSKILL.md",[18,23],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":26,"taxonomyTypeDesc":27},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48],"shadcn","ui","shadcn ui","Tailwind","ui patterns","implementing","themes","tsx","up","read","zod","Bash","css","nextjs","component library","component","react components","react","components","tailwindcss","2026-11-10 10:12:30",false,"---\nname: shadcn-ui\ndescription: Complete shadcn\u002Fui component library guide including installation, configuration, and implementation of accessible React components. Use when setting up shadcn\u002Fui, installing components, building forms with React Hook Form and Zod, customizing themes with Tailwind CSS, or implementing UI patterns like buttons, dialogs, dropdowns, tables, and complex form layouts.\nlanguage: typescript,tsx\nframework: react,nextjs,tailwindcss\nlicense: MIT\nallowed-tools: Read, Write, Bash, Edit, Glob\n---\n\n# shadcn\u002Fui Component Patterns\n\nExpert guide for building accessible, customizable UI components with shadcn\u002Fui, Radix UI, and Tailwind CSS.\n\n## Table of Contents\n\n- [When to Use](#when-to-use)\n- [Quick Start](#quick-start)\n- [Installation & Setup](#installation--setup)\n- [Project Configuration](#project-configuration)\n- [Core Components](#core-components)\n  - [Button](#button-component)\n  - [Input & Form Fields](#input--form-fields)\n  - [Forms with Validation](#forms-with-validation)\n  - [Card](#card-component)\n  - [Dialog (Modal)](#dialog-modal-component)\n  - [Select (Dropdown)](#select-dropdown-component)\n  - [Sheet (Slide-over)](#sheet-slide-over-component)\n  - [Menubar & Navigation](#menubar--navigation)\n  - [Table](#table-component)\n  - [Toast Notifications](#toast-notifications)\n- [Advanced Patterns](#advanced-patterns)\n- [Customization](#customization)\n- [Next.js Integration](#nextjs-integration)\n- [Best Practices](#best-practices)\n- [Common Component Combinations](#common-component-combinations)\n\n## When to Use\n\n- Setting up a new project with shadcn\u002Fui\n- Installing or configuring individual components\n- Building forms with React Hook Form and Zod validation\n- Creating accessible UI components (buttons, dialogs, dropdowns, sheets)\n- Customizing component styling with Tailwind CSS\n- Implementing design systems with shadcn\u002Fui\n- Building Next.js applications with TypeScript\n- Creating complex layouts and data displays\n\n## Quick Start\n\nFor new projects, use the automated setup:\n\n```bash\n# Create Next.js project with shadcn\u002Fui\nnpx create-next-app@latest my-app --typescript --tailwind --eslint --app\ncd my-app\nnpx shadcn@latest init\n\n# Install essential components\nnpx shadcn@latest add button input form card dialog select\n```\n\nFor existing projects:\n\n```bash\n# Install dependencies\nnpm install tailwindcss-animate class-variance-authority clsx tailwind-merge lucide-react\n\n# Initialize shadcn\u002Fui\nnpx shadcn@latest init\n```\n\n## What is shadcn\u002Fui?\n\nshadcn\u002Fui is **not** a traditional component library or npm package. Instead:\n\n- It's a **collection of reusable components** that you can copy into your project\n- Components are **yours to customize** - you own the code\n- Built with **Radix UI** primitives for accessibility\n- Styled with **Tailwind CSS** utilities\n- Includes CLI tool for easy component installation\n\n## Installation & Setup\n\n### Initial Setup\n\n```bash\n# Initialize shadcn\u002Fui in your project\nnpx shadcn@latest init\n```\n\nDuring setup, you'll configure:\n- TypeScript or JavaScript\n- Style (Default, New York, etc.)\n- Base color theme\n- CSS variables or Tailwind CSS classes\n- Component installation path\n\n### Installing Individual Components\n\n```bash\n# Install a single component\nnpx shadcn@latest add button\n\n# Install multiple components\nnpx shadcn@latest add button input form\n\n# Install all components\nnpx shadcn@latest add --all\n```\n\n### Manual Installation\n\nIf you prefer manual setup:\n\n```bash\n# Install dependencies for a specific component\nnpm install @radix-ui\u002Freact-slot\n\n# Copy component code from ui.shadcn.com\n# Place in src\u002Fcomponents\u002Fui\u002F\n```\n\n## Project Configuration\n\n### Required Dependencies\n\n```json\n{\n  \"dependencies\": {\n    \"@radix-ui\u002Freact-accordion\": \"^1.1.2\",\n    \"@radix-ui\u002Freact-alert-dialog\": \"^1.0.5\",\n    \"@radix-ui\u002Freact-dialog\": \"^1.0.5\",\n    \"@radix-ui\u002Freact-dropdown-menu\": \"^2.0.6\",\n    \"@radix-ui\u002Freact-label\": \"^2.0.2\",\n    \"@radix-ui\u002Freact-select\": \"^2.0.0\",\n    \"@radix-ui\u002Freact-separator\": \"^1.0.3\",\n    \"@radix-ui\u002Freact-slot\": \"^1.0.2\",\n    \"@radix-ui\u002Freact-toast\": \"^1.1.5\",\n    \"class-variance-authority\": \"^0.7.0\",\n    \"clsx\": \"^2.0.0\",\n    \"lucide-react\": \"^0.294.0\",\n    \"tailwind-merge\": \"^2.0.0\",\n    \"tailwindcss-animate\": \"^1.0.7\"\n  }\n}\n```\n\n### TSConfig Configuration\n\n```json\n{\n  \"compilerOptions\": {\n    \"target\": \"es5\",\n    \"lib\": [\"dom\", \"dom.iterable\", \"es6\"],\n    \"allowJs\": true,\n    \"skipLibCheck\": true,\n    \"strict\": true,\n    \"forceConsistentCasingInFileNames\": true,\n    \"noEmit\": true,\n    \"esModuleInterop\": true,\n    \"module\": \"esnext\",\n    \"moduleResolution\": \"node\",\n    \"resolveJsonModule\": true,\n    \"isolatedModules\": true,\n    \"jsx\": \"preserve\",\n    \"incremental\": true,\n    \"plugins\": [\n      {\n        \"name\": \"next\"\n      }\n    ],\n    \"baseUrl\": \".\",\n    \"paths\": {\n      \"@\u002Fcomponents\u002F*\": [\".\u002Fsrc\u002Fcomponents\u002F*\"],\n      \"@\u002Flib\u002F*\": [\".\u002Fsrc\u002Flib\u002F*\"]\n    }\n  },\n  \"include\": [\"next-env.d.ts\", \"**\u002F*.ts\", \"**\u002F*.tsx\", \".next\u002Ftypes\u002F**\u002F*.ts\"],\n  \"exclude\": [\"node_modules\"]\n}\n```\n\n### Tailwind Configuration\n\n```js\n\u002F\u002F tailwind.config.js\n\u002F** @type {import('tailwindcss').Config} *\u002F\nmodule.exports = {\n  darkMode: [\"class\"],\n  content: [\n    '.\u002Fpages\u002F**\u002F*.{ts,tsx}',\n    '.\u002Fcomponents\u002F**\u002F*.{ts,tsx}',\n    '.\u002Fapp\u002F**\u002F*.{ts,tsx}',\n    '.\u002Fsrc\u002F**\u002F*.{ts,tsx}',\n  ],\n  prefix: \"\",\n  theme: {\n    container: {\n      center: true,\n      padding: \"2rem\",\n      screens: {\n        \"2xl\": \"1400px\",\n      },\n    },\n    extend: {\n      colors: {\n        border: \"hsl(var(--border))\",\n        input: \"hsl(var(--input))\",\n        ring: \"hsl(var(--ring))\",\n        background: \"hsl(var(--background))\",\n        foreground: \"hsl(var(--foreground))\",\n        primary: {\n          DEFAULT: \"hsl(var(--primary))\",\n          foreground: \"hsl(var(--primary-foreground))\",\n        },\n        secondary: {\n          DEFAULT: \"hsl(var(--secondary))\",\n          foreground: \"hsl(var(--secondary-foreground))\",\n        },\n        destructive: {\n          DEFAULT: \"hsl(var(--destructive))\",\n          foreground: \"hsl(var(--destructive-foreground))\",\n        },\n        muted: {\n          DEFAULT: \"hsl(var(--muted))\",\n          foreground: \"hsl(var(--muted-foreground))\",\n        },\n        accent: {\n          DEFAULT: \"hsl(var(--accent))\",\n          foreground: \"hsl(var(--accent-foreground))\",\n        },\n        popover: {\n          DEFAULT: \"hsl(var(--popover))\",\n          foreground: \"hsl(var(--popover-foreground))\",\n        },\n        card: {\n          DEFAULT: \"hsl(var(--card))\",\n          foreground: \"hsl(var(--card-foreground))\",\n        },\n      },\n      borderRadius: {\n        lg: \"var(--radius)\",\n        md: \"calc(var(--radius) - 2px)\",\n        sm: \"calc(var(--radius) - 4px)\",\n      },\n      keyframes: {\n        \"accordion-down\": {\n          from: { height: \"0\" },\n          to: { height: \"var(--radix-accordion-content-height)\" },\n        },\n        \"accordion-up\": {\n          from: { height: \"var(--radix-accordion-content-height)\" },\n          to: { height: \"0\" },\n        },\n      },\n      animation: {\n        \"accordion-down\": \"accordion-down 0.2s ease-out\",\n        \"accordion-up\": \"accordion-up 0.2s ease-out\",\n      },\n    },\n  },\n  plugins: [require(\"tailwindcss-animate\")],\n}\n```\n\n### CSS Variables (globals.css)\n\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 222.2 84% 4.9%;\n    --card: 0 0% 100%;\n    --card-foreground: 222.2 84% 4.9%;\n    --popover: 0 0% 100%;\n    --popover-foreground: 222.2 84% 4.9%;\n    --primary: 222.2 47.4% 11.2%;\n    --primary-foreground: 210 40% 98%;\n    --secondary: 210 40% 96.1%;\n    --secondary-foreground: 222.2 47.4% 11.2%;\n    --muted: 210 40% 96.1%;\n    --muted-foreground: 215.4 16.3% 46.9%;\n    --accent: 210 40% 96.1%;\n    --accent-foreground: 222.2 47.4% 11.2%;\n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 210 40% 98%;\n    --border: 214.3 31.8% 91.4%;\n    --input: 214.3 31.8% 91.4%;\n    --ring: 222.2 84% 4.9%;\n    --radius: 0.5rem;\n  }\n\n  .dark {\n    --background: 222.2 84% 4.9%;\n    --foreground: 210 40% 98%;\n    --card: 222.2 84% 4.9%;\n    --card-foreground: 210 40% 98%;\n    --popover: 222.2 84% 4.9%;\n    --popover-foreground: 210 40% 98%;\n    --primary: 210 40% 98%;\n    --primary-foreground: 222.2 47.4% 11.2%;\n    --secondary: 217.2 32.6% 17.5%;\n    --secondary-foreground: 210 40% 98%;\n    --muted: 217.2 32.6% 17.5%;\n    --muted-foreground: 215 20.2% 65.1%;\n    --accent: 217.2 32.6% 17.5%;\n    --accent-foreground: 210 40% 98%;\n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 210 40% 98%;\n    --border: 217.2 32.6% 17.5%;\n    --input: 217.2 32.6% 17.5%;\n    --ring: 212.7 26.8% 83.9%;\n  }\n}\n\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}\n```\n\n## Core Components\n\n### Button Component\n\nInstallation:\n\n```bash\nnpx shadcn@latest add button\n```\n\nBasic usage:\n\n```tsx\nimport { Button } from \"@\u002Fcomponents\u002Fui\u002Fbutton\";\n\nexport function ButtonDemo() {\n  return \u003CButton>Click me\u003C\u002FButton>;\n}\n```\n\nButton variants:\n\n```tsx\nimport { Button } from \"@\u002Fcomponents\u002Fui\u002Fbutton\";\n\nexport function ButtonVariants() {\n  return (\n    \u003Cdiv className=\"flex gap-4\">\n      \u003CButton variant=\"default\">Default\u003C\u002FButton>\n      \u003CButton variant=\"destructive\">Destructive\u003C\u002FButton>\n      \u003CButton variant=\"outline\">Outline\u003C\u002FButton>\n      \u003CButton variant=\"secondary\">Secondary\u003C\u002FButton>\n      \u003CButton variant=\"ghost\">Ghost\u003C\u002FButton>\n      \u003CButton variant=\"link\">Link\u003C\u002FButton>\n    \u003C\u002Fdiv>\n  );\n}\n```\n\nButton sizes:\n\n```tsx\n\u003Cdiv className=\"flex gap-4 items-center\">\n  \u003CButton size=\"default\">Default\u003C\u002FButton>\n  \u003CButton size=\"sm\">Small\u003C\u002FButton>\n  \u003CButton size=\"lg\">Large\u003C\u002FButton>\n  \u003CButton size=\"icon\">\n    \u003CIcon className=\"h-4 w-4\" \u002F>\n  \u003C\u002FButton>\n\u003C\u002Fdiv>\n```\n\nWith loading state:\n\n```tsx\nimport { Button } from \"@\u002Fcomponents\u002Fui\u002Fbutton\";\nimport { Loader2 } from \"lucide-react\";\n\nexport function ButtonLoading() {\n  return (\n    \u003CButton disabled>\n      \u003CLoader2 className=\"mr-2 h-4 w-4 animate-spin\" \u002F>\n      Please wait\n    \u003C\u002FButton>\n  );\n}\n```\n\n### Input & Form Fields\n\n#### Input Component\n\nInstallation:\n\n```bash\nnpx shadcn@latest add input\n```\n\nBasic input:\n\n```tsx\nimport { Input } from \"@\u002Fcomponents\u002Fui\u002Finput\";\n\nexport function InputDemo() {\n  return \u003CInput type=\"email\" placeholder=\"Email\" \u002F>;\n}\n```\n\nInput with label:\n\n```tsx\nimport { Input } from \"@\u002Fcomponents\u002Fui\u002Finput\";\nimport { Label } from \"@\u002Fcomponents\u002Fui\u002Flabel\";\n\nexport function InputWithLabel() {\n  return (\n    \u003Cdiv className=\"grid w-full max-w-sm items-center gap-1.5\">\n      \u003CLabel htmlFor=\"email\">Email\u003C\u002FLabel>\n      \u003CInput type=\"email\" id=\"email\" placeholder=\"Email\" \u002F>\n    \u003C\u002Fdiv>\n  );\n}\n```\n\nInput with button:\n\n```tsx\nimport { Button } from \"@\u002Fcomponents\u002Fui\u002Fbutton\";\nimport { Input } from \"@\u002Fcomponents\u002Fui\u002Finput\";\n\nexport function InputWithButton() {\n  return (\n    \u003Cdiv className=\"flex w-full max-w-sm items-center gap-2\">\n      \u003CInput type=\"email\" placeholder=\"Email\" \u002F>\n      \u003CButton type=\"submit\" variant=\"outline\">Subscribe\u003C\u002FButton>\n    \u003C\u002Fdiv>\n  );\n}\n```\n\n### Forms with Validation\n\nInstallation:\n\n```bash\nnpx shadcn@latest add form\n```\n\nThis installs React Hook Form, Zod, and form components.\n\nComplete form example:\n\n```tsx\n\"use client\"\n\nimport { zodResolver } from \"@hookform\u002Fresolvers\u002Fzod\"\nimport { useForm } from \"react-hook-form\"\nimport * as z from \"zod\"\n\nimport { Button } from \"@\u002Fcomponents\u002Fui\u002Fbutton\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@\u002Fcomponents\u002Fui\u002Fform\"\nimport { Input } from \"@\u002Fcomponents\u002Fui\u002Finput\"\nimport { toast } from \"@\u002Fcomponents\u002Fui\u002Fuse-toast\"\n\nconst formSchema = z.object({\n  username: z.string().min(2, {\n    message: \"Username must be at least 2 characters.\",\n  }),\n  email: z.string().email({\n    message: \"Please enter a valid email address.\",\n  }),\n})\n\nexport function ProfileForm() {\n  const form = useForm\u003Cz.infer\u003Ctypeof formSchema>>({\n    resolver: zodResolver(formSchema),\n    defaultValues: {\n      username: \"\",\n      email: \"\",\n    },\n  })\n\n  function onSubmit(values: z.infer\u003Ctypeof formSchema>) {\n    toast({\n      title: \"You submitted the following values:\",\n      description: (\n        \u003Cpre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n          \u003Ccode className=\"text-white\">{JSON.stringify(values, null, 2)}\u003C\u002Fcode>\n        \u003C\u002Fpre>\n      ),\n    })\n  }\n\n  return (\n    \u003CForm {...form}>\n      \u003Cform onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-8\">\n        \u003CFormField\n          control={form.control}\n          name=\"username\"\n          render={({ field }) => (\n            \u003CFormItem>\n              \u003CFormLabel>Username\u003C\u002FFormLabel>\n              \u003CFormControl>\n                \u003CInput placeholder=\"shadcn\" {...field} \u002F>\n              \u003C\u002FFormControl>\n              \u003CFormDescription>\n                This is your public display name.\n              \u003C\u002FFormDescription>\n              \u003CFormMessage \u002F>\n            \u003C\u002FFormItem>\n          )}\n        \u002F>\n        \n        \u003CFormField\n          control={form.control}\n          name=\"email\"\n          render={({ field }) => (\n            \u003CFormItem>\n              \u003CFormLabel>Email\u003C\u002FFormLabel>\n              \u003CFormControl>\n                \u003CInput type=\"email\" placeholder=\"you@example.com\" {...field} \u002F>\n              \u003C\u002FFormControl>\n              \u003CFormMessage \u002F>\n            \u003C\u002FFormItem>\n          )}\n        \u002F>\n        \n        \u003CButton type=\"submit\">Submit\u003C\u002FButton>\n      \u003C\u002Fform>\n    \u003C\u002FForm>\n  )\n}\n```\n\n### Card Component\n\nInstallation:\n\n```bash\nnpx shadcn@latest add card\n```\n\nBasic card:\n\n```tsx\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@\u002Fcomponents\u002Fui\u002Fcard\"\n\nexport function CardDemo() {\n  return (\n    \u003CCard>\n      \u003CCardHeader>\n        \u003CCardTitle>Card Title\u003C\u002FCardTitle>\n        \u003CCardDescription>Card Description\u003C\u002FCardDescription>\n      \u003C\u002FCardHeader>\n      \u003CCardContent>\n        \u003Cp>Card Content\u003C\u002Fp>\n      \u003C\u002FCardContent>\n      \u003CCardFooter>\n        \u003Cp>Card Footer\u003C\u002Fp>\n      \u003C\u002FCardFooter>\n    \u003C\u002FCard>\n  )\n}\n```\n\nCard with form:\n\n```tsx\nimport { Button } from \"@\u002Fcomponents\u002Fui\u002Fbutton\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@\u002Fcomponents\u002Fui\u002Fcard\"\nimport { Input } from \"@\u002Fcomponents\u002Fui\u002Finput\"\nimport { Label } from \"@\u002Fcomponents\u002Fui\u002Flabel\"\n\nexport function CardWithForm() {\n  return (\n    \u003CCard className=\"w-[350px]\">\n      \u003CCardHeader>\n        \u003CCardTitle>Create project\u003C\u002FCardTitle>\n        \u003CCardDescription>Deploy your new project in one-click.\u003C\u002FCardDescription>\n      \u003C\u002FCardHeader>\n      \u003CCardContent>\n        \u003Cform>\n          \u003Cdiv className=\"grid w-full items-center gap-4\">\n            \u003Cdiv className=\"flex flex-col space-y-1.5\">\n              \u003CLabel htmlFor=\"name\">Name\u003C\u002FLabel>\n              \u003CInput id=\"name\" placeholder=\"Name of your project\" \u002F>\n            \u003C\u002Fdiv>\n          \u003C\u002Fdiv>\n        \u003C\u002Fform>\n      \u003C\u002FCardContent>\n      \u003CCardFooter className=\"flex justify-between\">\n        \u003CButton variant=\"outline\">Cancel\u003C\u002FButton>\n        \u003CButton>Deploy\u003C\u002FButton>\n      \u003C\u002FCardFooter>\n    \u003C\u002FCard>\n  )\n}\n```\n\n### Dialog (Modal) Component\n\nInstallation:\n\n```bash\nnpx shadcn@latest add dialog\n```\n\nBasic dialog:\n\n```tsx\nimport { Button } from \"@\u002Fcomponents\u002Fui\u002Fbutton\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@\u002Fcomponents\u002Fui\u002Fdialog\"\n\nexport function DialogDemo() {\n  return (\n    \u003CDialog>\n      \u003CDialogTrigger asChild>\n        \u003CButton variant=\"outline\">Open Dialog\u003C\u002FButton>\n      \u003C\u002FDialogTrigger>\n      \u003CDialogContent className=\"sm:max-w-[425px]\">\n        \u003CDialogHeader>\n          \u003CDialogTitle>Edit profile\u003C\u002FDialogTitle>\n          \u003CDialogDescription>\n            Make changes to your profile here. Click save when you're done.\n          \u003C\u002FDialogDescription>\n        \u003C\u002FDialogHeader>\n        \u003Cdiv className=\"grid gap-4 py-4\">\n          \u003Cdiv className=\"grid grid-cols-4 items-center gap-4\">\n            \u003CLabel htmlFor=\"name\" className=\"text-right\">\n              Name\n            \u003C\u002FLabel>\n            \u003CInput id=\"name\" value=\"Pedro Duarte\" className=\"col-span-3\" \u002F>\n          \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n        \u003CDialogFooter>\n          \u003CButton type=\"submit\">Save changes\u003C\u002FButton>\n        \u003C\u002FDialogFooter>\n      \u003C\u002FDialogContent>\n    \u003C\u002FDialog>\n  )\n}\n```\n\n### Sheet (Slide-over) Component\n\nInstallation:\n\n```bash\nnpx shadcn@latest add sheet\n```\n\nBasic sheet:\n\n```tsx\nimport { Button } from \"@\u002Fcomponents\u002Fui\u002Fbutton\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@\u002Fcomponents\u002Fui\u002Fsheet\"\n\nexport function SheetDemo() {\n  return (\n    \u003CSheet>\n      \u003CSheetTrigger asChild>\n        \u003CButton variant=\"outline\">Open Sheet\u003C\u002FButton>\n      \u003C\u002FSheetTrigger>\n      \u003CSheetContent>\n        \u003CSheetHeader>\n          \u003CSheetTitle>Edit profile\u003C\u002FSheetTitle>\n          \u003CSheetDescription>\n            Make changes to your profile here. Click save when you're done.\n          \u003C\u002FSheetDescription>\n        \u003C\u002FSheetHeader>\n        \u003Cdiv className=\"grid gap-4 py-4\">\n          \u003Cdiv className=\"grid grid-cols-4 items-center gap-4\">\n            \u003CLabel htmlFor=\"name\" className=\"text-right\">\n              Name\n            \u003C\u002FLabel>\n            \u003CInput id=\"name\" value=\"Pedro Duarte\" className=\"col-span-3\" \u002F>\n          \u003C\u002Fdiv>\n          \u003Cdiv className=\"grid grid-cols-4 items-center gap-4\">\n            \u003CLabel htmlFor=\"username\" className=\"text-right\">\n              Username\n            \u003C\u002FLabel>\n            \u003CInput id=\"username\" value=\"@peduarte\" className=\"col-span-3\" \u002F>\n          \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002FSheetContent>\n    \u003C\u002FSheet>\n  )\n}\n```\n\nSheet with side placement:\n\n```tsx\n\u003CSheet>\n  \u003CSheetTrigger asChild>\n    \u003CButton variant=\"outline\">Open Right Sheet\u003C\u002FButton>\n  \u003C\u002FSheetTrigger>\n  \u003CSheetContent side=\"right\">\n    \u003CSheetHeader>\n      \u003CSheetTitle>Settings\u003C\u002FSheetTitle>\n      \u003CSheetDescription>\n        Configure your application settings here.\n      \u003C\u002FSheetDescription>\n    \u003C\u002FSheetHeader>\n    {\u002F* Settings content *\u002F}\n  \u003C\u002FSheetContent>\n\u003C\u002FSheet>\n```\n\n### Menubar & Navigation\n\n#### Menubar Component\n\nInstallation:\n\n```bash\nnpx shadcn@latest add menubar\n```\n\nBasic menubar:\n\n```tsx\nimport {\n  Menubar,\n  MenubarContent,\n  MenubarItem,\n  MenubarMenu,\n  MenubarSeparator,\n  MenubarShortcut,\n  MenubarSub,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarTrigger,\n} from \"@\u002Fcomponents\u002Fui\u002Fmenubar\"\n\nexport function MenubarDemo() {\n  return (\n    \u003CMenubar>\n      \u003CMenubarMenu>\n        \u003CMenubarTrigger>File\u003C\u002FMenubarTrigger>\n        \u003CMenubarContent>\n          \u003CMenubarItem>\n            New Tab \u003CMenubarShortcut>⌘T\u003C\u002FMenubarShortcut>\n          \u003C\u002FMenubarItem>\n          \u003CMenubarItem>\n            New Window \u003CMenubarShortcut>⌘N\u003C\u002FMenubarShortcut>\n          \u003C\u002FMenubarItem>\n          \u003CMenubarSeparator \u002F>\n          \u003CMenubarItem>Share\u003C\u002FMenubarItem>\n          \u003CMenubarSeparator \u002F>\n          \u003CMenubarItem>Print\u003C\u002FMenubarItem>\n        \u003C\u002FMenubarContent>\n      \u003C\u002FMenubarMenu>\n      \u003CMenubarMenu>\n        \u003CMenubarTrigger>Edit\u003C\u002FMenubarTrigger>\n        \u003CMenubarContent>\n          \u003CMenubarItem>\n            Undo \u003CMenubarShortcut>⌘Z\u003C\u002FMenubarShortcut>\n          \u003C\u002FMenubarItem>\n          \u003CMenubarItem>\n            Redo \u003CMenubarShortcut>⌘Y\u003C\u002FMenubarShortcut>\n          \u003C\u002FMenubarItem>\n          \u003CMenubarSeparator \u002F>\n          \u003CMenubarSub>\n            \u003CMenubarSubTrigger>Find\u003C\u002FMenubarSubTrigger>\n            \u003CMenubarSubContent>\n              \u003CMenubarItem>Search the web\u003C\u002FMenubarItem>\n              \u003CMenubarItem>Find...\u003C\u002FMenubarItem>\n              \u003CMenubarItem>Find Next\u003C\u002FMenubarItem>\n              \u003CMenubarItem>Find Previous\u003C\u002FMenubarItem>\n            \u003C\u002FMenubarSubContent>\n          \u003C\u002FMenubarSub>\n        \u003C\u002FMenubarContent>\n      \u003C\u002FMenubarMenu>\n    \u003C\u002FMenubar>\n  )\n}\n```\n\n### Select (Dropdown) Component\n\nInstallation:\n\n```bash\nnpx shadcn@latest add select\n```\n\nBasic select:\n\n```tsx\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@\u002Fcomponents\u002Fui\u002Fselect\"\n\nexport function SelectDemo() {\n  return (\n    \u003CSelect>\n      \u003CSelectTrigger className=\"w-[180px]\">\n        \u003CSelectValue placeholder=\"Select a fruit\" \u002F>\n      \u003C\u002FSelectTrigger>\n      \u003CSelectContent>\n        \u003CSelectItem value=\"apple\">Apple\u003C\u002FSelectItem>\n        \u003CSelectItem value=\"banana\">Banana\u003C\u002FSelectItem>\n        \u003CSelectItem value=\"orange\">Orange\u003C\u002FSelectItem>\n      \u003C\u002FSelectContent>\n    \u003C\u002FSelect>\n  )\n}\n```\n\nSelect in form:\n\n```tsx\n\u003CFormField\n  control={form.control}\n  name=\"role\"\n  render={({ field }) => (\n    \u003CFormItem>\n      \u003CFormLabel>Role\u003C\u002FFormLabel>\n      \u003CSelect onValueChange={field.onChange} defaultValue={field.value}>\n        \u003CFormControl>\n          \u003CSelectTrigger>\n            \u003CSelectValue placeholder=\"Select a role\" \u002F>\n          \u003C\u002FSelectTrigger>\n        \u003C\u002FFormControl>\n        \u003CSelectContent>\n          \u003CSelectItem value=\"admin\">Admin\u003C\u002FSelectItem>\n          \u003CSelectItem value=\"user\">User\u003C\u002FSelectItem>\n          \u003CSelectItem value=\"guest\">Guest\u003C\u002FSelectItem>\n        \u003C\u002FSelectContent>\n      \u003C\u002FSelect>\n      \u003CFormMessage \u002F>\n    \u003C\u002FFormItem>\n  )}\n\u002F>\n```\n\n### Toast Notifications\n\nInstallation:\n\n```bash\nnpx shadcn@latest add toast\n```\n\nSetup toast provider in root layout:\n\n```tsx\nimport { Toaster } from \"@\u002Fcomponents\u002Fui\u002Ftoaster\"\n\nexport default function RootLayout({ children }) {\n  return (\n    \u003Chtml lang=\"en\">\n      \u003Cbody>\n        {children}\n        \u003CToaster \u002F>\n      \u003C\u002Fbody>\n    \u003C\u002Fhtml>\n  )\n}\n```\n\nUsing toast:\n\n```tsx\nimport { useToast } from \"@\u002Fcomponents\u002Fui\u002Fuse-toast\"\nimport { Button } from \"@\u002Fcomponents\u002Fui\u002Fbutton\"\n\nexport function ToastDemo() {\n  const { toast } = useToast()\n\n  return (\n    \u003CButton\n      onClick={() => {\n        toast({\n          title: \"Scheduled: Catch up\",\n          description: \"Friday, February 10, 2023 at 5:57 PM\",\n        })\n      }}\n    >\n      Show Toast\n    \u003C\u002FButton>\n  )\n}\n```\n\nToast variants:\n\n```tsx\n\u002F\u002F Success\ntoast({\n  title: \"Success\",\n  description: \"Your changes have been saved.\",\n})\n\n\u002F\u002F Error\ntoast({\n  variant: \"destructive\",\n  title: \"Error\",\n  description: \"Something went wrong.\",\n})\n\n\u002F\u002F With action\ntoast({\n  title: \"Uh oh! Something went wrong.\",\n  description: \"There was a problem with your request.\",\n  action: \u003CToastAction altText=\"Try again\">Try again\u003C\u002FToastAction>,\n})\n```\n\n### Table Component\n\nInstallation:\n\n```bash\nnpx shadcn@latest add table\n```\n\nBasic table:\n\n```tsx\nimport {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@\u002Fcomponents\u002Fui\u002Ftable\"\n\nconst invoices = [\n  { invoice: \"INV001\", status: \"Paid\", method: \"Credit Card\", amount: \"$250.00\" },\n  { invoice: \"INV002\", status: \"Pending\", method: \"PayPal\", amount: \"$150.00\" },\n]\n\nexport function TableDemo() {\n  return (\n    \u003CTable>\n      \u003CTableCaption>A list of your recent invoices.\u003C\u002FTableCaption>\n      \u003CTableHeader>\n        \u003CTableRow>\n          \u003CTableHead>Invoice\u003C\u002FTableHead>\n          \u003CTableHead>Status\u003C\u002FTableHead>\n          \u003CTableHead>Method\u003C\u002FTableHead>\n          \u003CTableHead className=\"text-right\">Amount\u003C\u002FTableHead>\n        \u003C\u002FTableRow>\n      \u003C\u002FTableHeader>\n      \u003CTableBody>\n        {invoices.map((invoice) => (\n          \u003CTableRow key={invoice.invoice}>\n            \u003CTableCell className=\"font-medium\">{invoice.invoice}\u003C\u002FTableCell>\n            \u003CTableCell>{invoice.status}\u003C\u002FTableCell>\n            \u003CTableCell>{invoice.method}\u003C\u002FTableCell>\n            \u003CTableCell className=\"text-right\">{invoice.amount}\u003C\u002FTableCell>\n          \u003C\u002FTableRow>\n        ))}\n      \u003C\u002FTableBody>\n    \u003C\u002FTable>\n  )\n}\n```\n\n## Customization\n\n### Theming with CSS Variables\n\nshadcn\u002Fui uses CSS variables for theming. Configure in `globals.css`:\n\n```css\n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 222.2 84% 4.9%;\n    --primary: 222.2 47.4% 11.2%;\n    --primary-foreground: 210 40% 98%;\n    --secondary: 210 40% 96.1%;\n    --secondary-foreground: 222.2 47.4% 11.2%;\n    --muted: 210 40% 96.1%;\n    --muted-foreground: 215.4 16.3% 46.9%;\n    --accent: 210 40% 96.1%;\n    --accent-foreground: 222.2 47.4% 11.2%;\n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 210 40% 98%;\n    --border: 214.3 31.8% 91.4%;\n    --input: 214.3 31.8% 91.4%;\n    --ring: 222.2 84% 4.9%;\n    --radius: 0.5rem;\n  }\n\n  .dark {\n    --background: 222.2 84% 4.9%;\n    --foreground: 210 40% 98%;\n    --primary: 210 40% 98%;\n    --primary-foreground: 222.2 47.4% 11.2%;\n    \u002F* ... other dark mode variables *\u002F\n  }\n}\n```\n\n### Customizing Components\n\nSince you own the code, customize directly:\n\n```tsx\n\u002F\u002F components\u002Fui\u002Fbutton.tsx\nimport * as React from \"react\"\nimport { Slot } from \"@radix-ui\u002Freact-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { cn } from \"@\u002Flib\u002Futils\"\n\nconst buttonVariants = cva(\n  \"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary\u002F90\",\n        destructive: \"bg-destructive text-destructive-foreground hover:bg-destructive\u002F90\",\n        outline: \"border border-input bg-background hover:bg-accent\",\n        \u002F\u002F Add custom variant\n        custom: \"bg-gradient-to-r from-purple-500 to-pink-500 text-white\",\n      },\n      size: {\n        default: \"h-10 px-4 py-2\",\n        sm: \"h-9 rounded-md px-3\",\n        lg: \"h-11 rounded-md px-8\",\n        \u002F\u002F Add custom size\n        xl: \"h-14 rounded-md px-10 text-lg\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes\u003CHTMLButtonElement>,\n    VariantProps\u003Ctypeof buttonVariants> {\n  asChild?: boolean\n}\n\nconst Button = React.forwardRef\u003CHTMLButtonElement, ButtonProps>(\n  ({ className, variant, size, asChild = false, ...props }, ref) => {\n    const Comp = asChild ? Slot : \"button\"\n    return (\n      \u003CComp\n        className={cn(buttonVariants({ variant, size, className }))}\n        ref={ref}\n        {...props}\n      \u002F>\n    )\n  }\n)\nButton.displayName = \"Button\"\n\nexport { Button, buttonVariants }\n```\n\n## Next.js Integration\n\n### App Router Setup\n\nFor Next.js 13+ with App Router, ensure components use `\"use client\"` directive:\n\n```tsx\n\u002F\u002F src\u002Fcomponents\u002Fui\u002Fbutton.tsx\n\"use client\"\n\nimport * as React from \"react\"\nimport { Slot } from \"@radix-ui\u002Freact-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { cn } from \"@\u002Flib\u002Futils\"\n\n\u002F\u002F ... rest of component\n```\n\n### Layout Integration\n\nAdd the Toaster to your root layout:\n\n```tsx\n\u002F\u002F app\u002Flayout.tsx\nimport { Toaster } from \"@\u002Fcomponents\u002Fui\u002Ftoaster\"\nimport \".\u002Fglobals.css\"\n\nexport default function RootLayout({\n  children,\n}: {\n  children: React.ReactNode\n}) {\n  return (\n    \u003Chtml lang=\"en\" suppressHydrationWarning>\n      \u003Cbody className=\"min-h-screen bg-background font-sans antialiased\">\n        {children}\n        \u003CToaster \u002F>\n      \u003C\u002Fbody>\n    \u003C\u002Fhtml>\n  )\n}\n```\n\n### Server Components\n\nWhen using shadcn\u002Fui components in Server Components, wrap them in a Client Component:\n\n```tsx\n\u002F\u002F app\u002Fdashboard\u002Fpage.tsx\nimport { Card, CardContent, CardHeader, CardTitle } from \"@\u002Fcomponents\u002Fui\u002Fcard\"\nimport { ButtonClient } from \"@\u002Fcomponents\u002Fui\u002Fbutton-client\"\n\nexport default function DashboardPage() {\n  return (\n    \u003Cdiv className=\"container mx-auto p-6\">\n      \u003CCard>\n        \u003CCardHeader>\n          \u003CCardTitle>Dashboard\u003C\u002FCardTitle>\n        \u003C\u002FCardHeader>\n        \u003CCardContent>\n          \u003CButtonClient>Interactive Button\u003C\u002FButtonClient>\n        \u003C\u002FCardContent>\n      \u003C\u002FCard>\n    \u003C\u002Fdiv>\n  )\n}\n```\n\n```tsx\n\u002F\u002F src\u002Fcomponents\u002Fui\u002Fbutton-client.tsx\n\"use client\"\n\nimport { Button } from \".\u002Fbutton\"\n\nexport function ButtonClient(props: React.ComponentProps\u003Ctypeof Button>) {\n  return \u003CButton {...props} \u002F>\n}\n```\n\n### Route Handlers with Forms\n\nCreate API routes for form submissions:\n\n```tsx\n\u002F\u002F app\u002Fapi\u002Fcontact\u002Froute.ts\nimport { NextRequest, NextResponse } from \"next\u002Fserver\"\nimport { z } from \"zod\"\n\nconst contactSchema = z.object({\n  name: z.string().min(2),\n  email: z.string().email(),\n  message: z.string().min(10),\n})\n\nexport async function POST(request: NextRequest) {\n  try {\n    const body = await request.json()\n    const validated = contactSchema.parse(body)\n\n    \u002F\u002F Process form data\n    console.log(\"Form submission:\", validated)\n\n    return NextResponse.json({ success: true })\n  } catch (error) {\n    if (error instanceof z.ZodError) {\n      return NextResponse.json(\n        { errors: error.errors },\n        { status: 400 }\n      )\n    }\n\n    return NextResponse.json(\n      { error: \"Internal server error\" },\n      { status: 500 }\n    )\n  }\n}\n```\n\n### Form with Server Action\n\nUsing Next.js 14+ Server Actions:\n\n```tsx\n\u002F\u002F app\u002Fcontact\u002Fpage.tsx\n\"use client\"\n\nimport { zodResolver } from \"@hookform\u002Fresolvers\u002Fzod\"\nimport { useForm } from \"react-hook-form\"\nimport * as z from \"zod\"\nimport { Button } from \"@\u002Fcomponents\u002Fui\u002Fbutton\"\nimport {\n  Form,\n  FormControl,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@\u002Fcomponents\u002Fui\u002Fform\"\nimport { Input } from \"@\u002Fcomponents\u002Fui\u002Finput\"\nimport { Textarea } from \"@\u002Fcomponents\u002Fui\u002Ftextarea\"\nimport { toast } from \"@\u002Fcomponents\u002Fui\u002Fuse-toast\"\n\nconst formSchema = z.object({\n  name: z.string().min(2),\n  email: z.string().email(),\n  message: z.string().min(10),\n})\n\nasync function onSubmit(values: z.infer\u003Ctypeof formSchema>) {\n  try {\n    const response = await fetch(\"\u002Fapi\u002Fcontact\", {\n      method: \"POST\",\n      headers: { \"Content-Type\": \"application\u002Fjson\" },\n      body: JSON.stringify(values),\n    })\n\n    if (!response.ok) throw new Error(\"Failed to submit\")\n\n    toast({\n      title: \"Success!\",\n      description: \"Your message has been sent.\",\n    })\n  } catch (error) {\n    toast({\n      variant: \"destructive\",\n      title: \"Error\",\n      description: \"Failed to send message. Please try again.\",\n    })\n  }\n}\n\nexport default function ContactPage() {\n  const form = useForm\u003Cz.infer\u003Ctypeof formSchema>>({\n    resolver: zodResolver(formSchema),\n  })\n\n  return (\n    \u003Cdiv className=\"container mx-auto max-w-2xl py-8\">\n      \u003CForm {...form}>\n        \u003Cform onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-6\">\n          \u003CFormField\n            control={form.control}\n            name=\"name\"\n            render={({ field }) => (\n              \u003CFormItem>\n                \u003CFormLabel>Name\u003C\u002FFormLabel>\n                \u003CFormControl>\n                  \u003CInput placeholder=\"Your name\" {...field} \u002F>\n                \u003C\u002FFormControl>\n                \u003CFormMessage \u002F>\n              \u003C\u002FFormItem>\n            )}\n          \u002F>\n\n          \u003CFormField\n            control={form.control}\n            name=\"email\"\n            render={({ field }) => (\n              \u003CFormItem>\n                \u003CFormLabel>Email\u003C\u002FFormLabel>\n                \u003CFormControl>\n                  \u003CInput type=\"email\" placeholder=\"your@email.com\" {...field} \u002F>\n                \u003C\u002FFormControl>\n                \u003CFormMessage \u002F>\n              \u003C\u002FFormItem>\n            )}\n          \u002F>\n\n          \u003CFormField\n            control={form.control}\n            name=\"message\"\n            render={({ field }) => (\n              \u003CFormItem>\n                \u003CFormLabel>Message\u003C\u002FFormLabel>\n                \u003CFormControl>\n                  \u003CTextarea\n                    placeholder=\"Your message...\"\n                    className=\"resize-none\"\n                    {...field}\n                  \u002F>\n                \u003C\u002FFormControl>\n                \u003CFormMessage \u002F>\n              \u003C\u002FFormItem>\n            )}\n          \u002F>\n\n          \u003CButton type=\"submit\" className=\"w-full\">\n            Send Message\n          \u003C\u002FButton>\n        \u003C\u002Fform>\n      \u003C\u002FForm>\n    \u003C\u002Fdiv>\n  )\n}\n```\n\n### Metadata with shadcn\u002Fui\n\nUsing shadcn\u002Fui components in metadata:\n\n```tsx\n\u002F\u002F app\u002Flayout.tsx\nimport { Metadata } from \"next\"\n\nexport const metadata: Metadata = {\n  title: {\n    default: \"My App\",\n    template: \"%s | My App\",\n  },\n  description: \"Built with shadcn\u002Fui and Next.js\",\n}\n\n\u002F\u002F app\u002Fabout\u002Fpage.tsx\nimport { Metadata } from \"next\"\nimport { Card, CardContent, CardHeader, CardTitle } from \"@\u002Fcomponents\u002Fui\u002Fcard\"\n\nexport const metadata: Metadata = {\n  title: \"About Us\",\n  description: \"Learn more about our company\",\n}\n\nexport default function AboutPage() {\n  return (\n    \u003Cdiv className=\"container mx-auto py-8\">\n      \u003CCard>\n        \u003CCardHeader>\n          \u003CCardTitle>About Our Company\u003C\u002FCardTitle>\n        \u003C\u002FCardHeader>\n        \u003CCardContent>\n          \u003Cp>We build amazing products with modern web technologies.\u003C\u002Fp>\n        \u003C\u002FCardContent>\n      \u003C\u002FCard>\n    \u003C\u002Fdiv>\n  )\n}\n```\n\n### Font Optimization\n\nOptimize fonts with next\u002Ffont:\n\n```tsx\n\u002F\u002F app\u002Flayout.tsx\nimport { Inter } from \"next\u002Ffont\u002Fgoogle\"\nimport { Toaster } from \"@\u002Fcomponents\u002Fui\u002Ftoaster\"\nimport { cn } from \"@\u002Flib\u002Futils\"\nimport \".\u002Fglobals.css\"\n\nconst inter = Inter({ subsets: [\"latin\"] })\n\nexport default function RootLayout({\n  children,\n}: {\n  children: React.ReactNode\n}) {\n  return (\n    \u003Chtml lang=\"en\" suppressHydrationWarning>\n      \u003Cbody className={cn(\"min-h-screen bg-background font-sans antialiased\", inter.className)}>\n        {children}\n        \u003CToaster \u002F>\n      \u003C\u002Fbody>\n    \u003C\u002Fhtml>\n  )\n}\n```\n\n## Advanced Patterns\n\n### Form with Multiple Fields\n\n```tsx\nconst formSchema = z.object({\n  username: z.string().min(2).max(50),\n  email: z.string().email(),\n  bio: z.string().max(160).min(4),\n  role: z.enum([\"admin\", \"user\", \"guest\"]),\n  notifications: z.boolean().default(false),\n})\n\nexport function AdvancedForm() {\n  const form = useForm\u003Cz.infer\u003Ctypeof formSchema>>({\n    resolver: zodResolver(formSchema),\n    defaultValues: {\n      username: \"\",\n      email: \"\",\n      bio: \"\",\n      role: \"user\",\n      notifications: false,\n    },\n  })\n\n  function onSubmit(values: z.infer\u003Ctypeof formSchema>) {\n    console.log(values)\n  }\n\n  return (\n    \u003CForm {...form}>\n      \u003Cform onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-8\">\n        {\u002F* Username field *\u002F}\n        \u003CFormField\n          control={form.control}\n          name=\"username\"\n          render={({ field }) => (\n            \u003CFormItem>\n              \u003CFormLabel>Username\u003C\u002FFormLabel>\n              \u003CFormControl>\n                \u003CInput placeholder=\"johndoe\" {...field} \u002F>\n              \u003C\u002FFormControl>\n              \u003CFormMessage \u002F>\n            \u003C\u002FFormItem>\n          )}\n        \u002F>\n\n        {\u002F* Email field *\u002F}\n        \u003CFormField\n          control={form.control}\n          name=\"email\"\n          render={({ field }) => (\n            \u003CFormItem>\n              \u003CFormLabel>Email\u003C\u002FFormLabel>\n              \u003CFormControl>\n                \u003CInput type=\"email\" placeholder=\"john@example.com\" {...field} \u002F>\n              \u003C\u002FFormControl>\n              \u003CFormMessage \u002F>\n            \u003C\u002FFormItem>\n          )}\n        \u002F>\n\n        {\u002F* Textarea field *\u002F}\n        \u003CFormField\n          control={form.control}\n          name=\"bio\"\n          render={({ field }) => (\n            \u003CFormItem>\n              \u003CFormLabel>Bio\u003C\u002FFormLabel>\n              \u003CFormControl>\n                \u003CTextarea\n                  placeholder=\"Tell us about yourself\"\n                  className=\"resize-none\"\n                  {...field}\n                \u002F>\n              \u003C\u002FFormControl>\n              \u003CFormMessage \u002F>\n            \u003C\u002FFormItem>\n          )}\n        \u002F>\n\n        {\u002F* Select field *\u002F}\n        \u003CFormField\n          control={form.control}\n          name=\"role\"\n          render={({ field }) => (\n            \u003CFormItem>\n              \u003CFormLabel>Role\u003C\u002FFormLabel>\n              \u003CSelect onValueChange={field.onChange} defaultValue={field.value}>\n                \u003CFormControl>\n                  \u003CSelectTrigger>\n                    \u003CSelectValue placeholder=\"Select a role\" \u002F>\n                  \u003C\u002FSelectTrigger>\n                \u003C\u002FFormControl>\n                \u003CSelectContent>\n                  \u003CSelectItem value=\"admin\">Admin\u003C\u002FSelectItem>\n                  \u003CSelectItem value=\"user\">User\u003C\u002FSelectItem>\n                  \u003CSelectItem value=\"guest\">Guest\u003C\u002FSelectItem>\n                \u003C\u002FSelectContent>\n              \u003C\u002FSelect>\n              \u003CFormMessage \u002F>\n            \u003C\u002FFormItem>\n          )}\n        \u002F>\n\n        {\u002F* Checkbox field *\u002F}\n        \u003CFormField\n          control={form.control}\n          name=\"notifications\"\n          render={({ field }) => (\n            \u003CFormItem className=\"flex flex-row items-start space-x-3 space-y-0\">\n              \u003CFormControl>\n                \u003CCheckbox\n                  checked={field.value}\n                  onCheckedChange={field.onChange}\n                \u002F>\n              \u003C\u002FFormControl>\n              \u003Cdiv className=\"space-y-1 leading-none\">\n                \u003CFormLabel>Email notifications\u003C\u002FFormLabel>\n                \u003CFormDescription>\n                  Receive emails about your account activity.\n                \u003C\u002FFormDescription>\n              \u003C\u002Fdiv>\n            \u003C\u002FFormItem>\n          )}\n        \u002F>\n\n        \u003CButton type=\"submit\">Submit\u003C\u002FButton>\n      \u003C\u002Fform>\n    \u003C\u002FForm>\n  )\n}\n```\n\n## Best Practices\n\n1. **Accessibility**: Components use Radix UI primitives for ARIA compliance\n2. **Customization**: Modify components directly in your codebase\n3. **Type Safety**: Use TypeScript for type-safe props and state\n4. **Validation**: Use Zod schemas for form validation\n5. **Styling**: Leverage Tailwind utilities and CSS variables\n6. **Consistency**: Use the same component patterns across your app\n7. **Testing**: Components are testable with React Testing Library\n8. **Performance**: Components are optimized and tree-shakeable\n\n## Common Component Combinations\n\n### Login Form\n\n```tsx\n\u003CCard className=\"w-[350px]\">\n  \u003CCardHeader>\n    \u003CCardTitle>Login\u003C\u002FCardTitle>\n    \u003CCardDescription>Enter your credentials to continue\u003C\u002FCardDescription>\n  \u003C\u002FCardHeader>\n  \u003CCardContent>\n    \u003CForm {...form}>\n      \u003Cform onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-4\">\n        \u003CFormField\n          control={form.control}\n          name=\"email\"\n          render={({ field }) => (\n            \u003CFormItem>\n              \u003CFormLabel>Email\u003C\u002FFormLabel>\n              \u003CFormControl>\n                \u003CInput type=\"email\" placeholder=\"you@example.com\" {...field} \u002F>\n              \u003C\u002FFormControl>\n              \u003CFormMessage \u002F>\n            \u003C\u002FFormItem>\n          )}\n        \u002F>\n        \u003CFormField\n          control={form.control}\n          name=\"password\"\n          render={({ field }) => (\n            \u003CFormItem>\n              \u003CFormLabel>Password\u003C\u002FFormLabel>\n              \u003CFormControl>\n                \u003CInput type=\"password\" {...field} \u002F>\n              \u003C\u002FFormControl>\n              \u003CFormMessage \u002F>\n            \u003C\u002FFormItem>\n          )}\n        \u002F>\n        \u003CButton type=\"submit\" className=\"w-full\">Login\u003C\u002FButton>\n      \u003C\u002Fform>\n    \u003C\u002FForm>\n  \u003C\u002FCardContent>\n\u003C\u002FCard>\n```\n\n## References\n\n- Official Docs: https:\u002F\u002Fui.shadcn.com\n- Radix UI: https:\u002F\u002Fwww.radix-ui.com\n- React Hook Form: https:\u002F\u002Freact-hook-form.com\n- Zod: https:\u002F\u002Fzod.dev\n- Tailwind CSS: https:\u002F\u002Ftailwindcss.com\n- Examples: https:\u002F\u002Fui.shadcn.com\u002Fexamples\n","# shadcn\u002Fui Component Patterns\n\nExpert guide for building accessible, customizable UI components with shadcn\u002Fui, Radix UI, and Tailwind CSS.\n\n## Table of Contents\n\n- [When to Use](#when-to-use)\n- [Quick Start](#quick-start)\n- [Installation & Setup](#installation--setup)\n- [Project Configuration](#project-configuration)\n- [Core Components](#core-components)\n  - [Button](#button-component)\n  - [Input & Form Fields](#input--form-fields)\n  - [Forms with Validation](#forms-with-validation)\n  - [Card](#card-component)\n  - [Dialog (Modal)](#dialog-modal-component)\n  - [Select (Dropdown)](#select-dropdown-component)\n  - [Sheet (Slide-over)](#sheet-slide-over-component)\n  - [Menubar & Navigation](#menubar--navigation)\n  - [Table](#table-component)\n  - [Toast Notifications](#toast-notifications)\n- [Advanced Patterns](#advanced-patterns)\n- [Customization](#customization)\n- [Next.js Integration](#nextjs-integration)\n- [Best Practices](#best-practices)\n- [Common Component Combinations](#common-component-combinations)\n\n## When to Use\n\n- Setting up a new project with shadcn\u002Fui\n- Installing or configuring individual components\n- Building forms with React Hook Form and Zod validation\n- Creating accessible UI components (buttons, dialogs, dropdowns, sheets)\n- Customizing component styling with Tailwind CSS\n- Implementing design systems with shadcn\u002Fui\n- Building Next.js applications with TypeScript\n- Creating complex layouts and data displays\n\n## Quick Start\n\nFor new projects, use the automated setup:\n\n```bash\n# Create Next.js project with shadcn\u002Fui\nnpx create-next-app@latest my-app --typescript --tailwind --eslint --app\ncd my-app\nnpx shadcn@latest init\n\n# Install essential components\nnpx shadcn@latest add button input form card dialog select\n```\n\nFor existing projects:\n\n```bash\n# Install dependencies\nnpm install tailwindcss-animate class-variance-authority clsx tailwind-merge lucide-react\n\n# Initialize shadcn\u002Fui\nnpx shadcn@latest init\n```\n\n## What is shadcn\u002Fui?\n\nshadcn\u002Fui is **not** a traditional component library or npm package. Instead:\n\n- It's a **collection of reusable components** that you can copy into your project\n- Components are **yours to customize** - you own the code\n- Built with **Radix UI** primitives for accessibility\n- Styled with **Tailwind CSS** utilities\n- Includes CLI tool for easy component installation\n\n## Installation & Setup\n\n### Initial Setup\n\n```bash\n# Initialize shadcn\u002Fui in your project\nnpx shadcn@latest init\n```\n\nDuring setup, you'll configure:\n- TypeScript or JavaScript\n- Style (Default, New York, etc.)\n- Base color theme\n- CSS variables or Tailwind CSS classes\n- Component installation path\n\n### Installing Individual Components\n\n```bash\n# Install a single component\nnpx shadcn@latest add button\n\n# Install multiple components\nnpx shadcn@latest add button input form\n\n# Install all components\nnpx shadcn@latest add --all\n```\n\n### Manual Installation\n\nIf you prefer manual setup:\n\n```bash\n# Install dependencies for a specific component\nnpm install @radix-ui\u002Freact-slot\n\n# Copy component code from ui.shadcn.com\n# Place in src\u002Fcomponents\u002Fui\u002F\n```\n\n## Project Configuration\n\n### Required Dependencies\n\n```json\n{\n  \"dependencies\": {\n    \"@radix-ui\u002Freact-accordion\": \"^1.1.2\",\n    \"@radix-ui\u002Freact-alert-dialog\": \"^1.0.5\",\n    \"@radix-ui\u002Freact-dialog\": \"^1.0.5\",\n    \"@radix-ui\u002Freact-dropdown-menu\": \"^2.0.6\",\n    \"@radix-ui\u002Freact-label\": \"^2.0.2\",\n    \"@radix-ui\u002Freact-select\": \"^2.0.0\",\n    \"@radix-ui\u002Freact-separator\": \"^1.0.3\",\n    \"@radix-ui\u002Freact-slot\": \"^1.0.2\",\n    \"@radix-ui\u002Freact-toast\": \"^1.1.5\",\n    \"class-variance-authority\": \"^0.7.0\",\n    \"clsx\": \"^2.0.0\",\n    \"lucide-react\": \"^0.294.0\",\n    \"tailwind-merge\": \"^2.0.0\",\n    \"tailwindcss-animate\": \"^1.0.7\"\n  }\n}\n```\n\n### TSConfig Configuration\n\n```json\n{\n  \"compilerOptions\": {\n    \"target\": \"es5\",\n    \"lib\": [\"dom\", \"dom.iterable\", \"es6\"],\n    \"allowJs\": true,\n    \"skipLibCheck\": true,\n    \"strict\": true,\n    \"forceConsistentCasingInFileNames\": true,\n    \"noEmit\": true,\n    \"esModuleInterop\": true,\n    \"module\": \"esnext\",\n    \"moduleResolution\": \"node\",\n    \"resolveJsonModule\": true,\n    \"isolatedModules\": true,\n    \"jsx\": \"preserve\",\n    \"incremental\": true,\n    \"plugins\": [\n      {\n        \"name\": \"next\"\n      }\n    ],\n    \"baseUrl\": \".\",\n    \"paths\": {\n      \"@\u002Fcomponents\u002F*\": [\".\u002Fsrc\u002Fcomponents\u002F*\"],\n      \"@\u002Flib\u002F*\": [\".\u002Fsrc\u002Flib\u002F*\"]\n    }\n  },\n  \"include\": [\"next-env.d.ts\", \"**\u002F*.ts\", \"**\u002F*.tsx\", \".next\u002Ftypes\u002F**\u002F*.ts\"],\n  \"exclude\": [\"node_modules\"]\n}\n```\n\n### Tailwind Configuration\n\n```js\n\u002F\u002F tailwind.config.js\n\u002F** @type {import('tailwindcss').Config} *\u002F\nmodule.exports = {\n  darkMode: [\"class\"],\n  content: [\n    '.\u002Fpages\u002F**\u002F*.{ts,tsx}',\n    '.\u002Fcomponents\u002F**\u002F*.{ts,tsx}',\n    '.\u002Fapp\u002F**\u002F*.{ts,tsx}',\n    '.\u002Fsrc\u002F**\u002F*.{ts,tsx}',\n  ],\n  prefix: \"\",\n  theme: {\n    container: {\n      center: true,\n      padding: \"2rem\",\n      screens: {\n        \"2xl\": \"1400px\",\n      },\n    },\n    extend: {\n      colors: {\n        border: \"hsl(var(--border))\",\n        input: \"hsl(var(--input))\",\n        ring: \"hsl(var(--ring))\",\n        background: \"hsl(var(--background))\",\n        foreground: \"hsl(var(--foreground))\",\n        primary: {\n          DEFAULT: \"hsl(var(--primary))\",\n          foreground: \"hsl(var(--primary-foreground))\",\n        },\n        secondary: {\n          DEFAULT: \"hsl(var(--secondary))\",\n          foreground: \"hsl(var(--secondary-foreground))\",\n        },\n        destructive: {\n          DEFAULT: \"hsl(var(--destructive))\",\n          foreground: \"hsl(var(--destructive-foreground))\",\n        },\n        muted: {\n          DEFAULT: \"hsl(var(--muted))\",\n          foreground: \"hsl(var(--muted-foreground))\",\n        },\n        accent: {\n          DEFAULT: \"hsl(var(--accent))\",\n          foreground: \"hsl(var(--accent-foreground))\",\n        },\n        popover: {\n          DEFAULT: \"hsl(var(--popover))\",\n          foreground: \"hsl(var(--popover-foreground))\",\n        },\n        card: {\n          DEFAULT: \"hsl(var(--card))\",\n          foreground: \"hsl(var(--card-foreground))\",\n        },\n      },\n      borderRadius: {\n        lg: \"var(--radius)\",\n        md: \"calc(var(--radius) - 2px)\",\n        sm: \"calc(var(--radius) - 4px)\",\n      },\n      keyframes: {\n        \"accordion-down\": {\n          from: { height: \"0\" },\n          to: { height: \"var(--radix-accordion-content-height)\" },\n        },\n        \"accordion-up\": {\n          from: { height: \"var(--radix-accordion-content-height)\" },\n          to: { height: \"0\" },\n        },\n      },\n      animation: {\n        \"accordion-down\": \"accordion-down 0.2s ease-out\",\n        \"accordion-up\": \"accordion-up 0.2s ease-out\",\n      },\n    },\n  },\n  plugins: [require(\"tailwindcss-animate\")],\n}\n```\n\n### CSS Variables (globals.css)\n\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 222.2 84% 4.9%;\n    --card: 0 0% 100%;\n    --card-foreground: 222.2 84% 4.9%;\n    --popover: 0 0% 100%;\n    --popover-foreground: 222.2 84% 4.9%;\n    --primary: 222.2 47.4% 11.2%;\n    --primary-foreground: 210 40% 98%;\n    --secondary: 210 40% 96.1%;\n    --secondary-foreground: 222.2 47.4% 11.2%;\n    --muted: 210 40% 96.1%;\n    --muted-foreground: 215.4 16.3% 46.9%;\n    --accent: 210 40% 96.1%;\n    --accent-foreground: 222.2 47.4% 11.2%;\n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 210 40% 98%;\n    --border: 214.3 31.8% 91.4%;\n    --input: 214.3 31.8% 91.4%;\n    --ring: 222.2 84% 4.9%;\n    --radius: 0.5rem;\n  }\n\n  .dark {\n    --background: 222.2 84% 4.9%;\n    --foreground: 210 40% 98%;\n    --card: 222.2 84% 4.9%;\n    --card-foreground: 210 40% 98%;\n    --popover: 222.2 84% 4.9%;\n    --popover-foreground: 210 40% 98%;\n    --primary: 210 40% 98%;\n    --primary-foreground: 222.2 47.4% 11.2%;\n    --secondary: 217.2 32.6% 17.5%;\n    --secondary-foreground: 210 40% 98%;\n    --muted: 217.2 32.6% 17.5%;\n    --muted-foreground: 215 20.2% 65.1%;\n    --accent: 217.2 32.6% 17.5%;\n    --accent-foreground: 210 40% 98%;\n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 210 40% 98%;\n    --border: 217.2 32.6% 17.5%;\n    --input: 217.2 32.6% 17.5%;\n    --ring: 212.7 26.8% 83.9%;\n  }\n}\n\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}\n```\n\n## Core Components\n\n### Button Component\n\nInstallation:\n\n```bash\nnpx shadcn@latest add button\n```\n\nBasic usage:\n\n```tsx\nimport { Button } from \"@\u002Fcomponents\u002Fui\u002Fbutton\";\n\nexport function ButtonDemo() {\n  return \u003CButton>Click me\u003C\u002FButton>;\n}\n```\n\nButton variants:\n\n```tsx\nimport { Button } from \"@\u002Fcomponents\u002Fui\u002Fbutton\";\n\nexport function ButtonVariants() {\n  return (\n    \u003Cdiv className=\"flex gap-4\">\n      \u003CButton variant=\"default\">Default\u003C\u002FButton>\n      \u003CButton variant=\"destructive\">Destructive\u003C\u002FButton>\n      \u003CButton variant=\"outline\">Outline\u003C\u002FButton>\n      \u003CButton variant=\"secondary\">Secondary\u003C\u002FButton>\n      \u003CButton variant=\"ghost\">Ghost\u003C\u002FButton>\n      \u003CButton variant=\"link\">Link\u003C\u002FButton>\n    \u003C\u002Fdiv>\n  );\n}\n```\n\nButton sizes:\n\n```tsx\n\u003Cdiv className=\"flex gap-4 items-center\">\n  \u003CButton size=\"default\">Default\u003C\u002FButton>\n  \u003CButton size=\"sm\">Small\u003C\u002FButton>\n  \u003CButton size=\"lg\">Large\u003C\u002FButton>\n  \u003CButton size=\"icon\">\n    \u003CIcon className=\"h-4 w-4\" \u002F>\n  \u003C\u002FButton>\n\u003C\u002Fdiv>\n```\n\nWith loading state:\n\n```tsx\nimport { Button } from \"@\u002Fcomponents\u002Fui\u002Fbutton\";\nimport { Loader2 } from \"lucide-react\";\n\nexport function ButtonLoading() {\n  return (\n    \u003CButton disabled>\n      \u003CLoader2 className=\"mr-2 h-4 w-4 animate-spin\" \u002F>\n      Please wait\n    \u003C\u002FButton>\n  );\n}\n```\n\n### Input & Form Fields\n\n#### Input Component\n\nInstallation:\n\n```bash\nnpx shadcn@latest add input\n```\n\nBasic input:\n\n```tsx\nimport { Input } from \"@\u002Fcomponents\u002Fui\u002Finput\";\n\nexport function InputDemo() {\n  return \u003CInput type=\"email\" placeholder=\"Email\" \u002F>;\n}\n```\n\nInput with label:\n\n```tsx\nimport { Input } from \"@\u002Fcomponents\u002Fui\u002Finput\";\nimport { Label } from \"@\u002Fcomponents\u002Fui\u002Flabel\";\n\nexport function InputWithLabel() {\n  return (\n    \u003Cdiv className=\"grid w-full max-w-sm items-center gap-1.5\">\n      \u003CLabel htmlFor=\"email\">Email\u003C\u002FLabel>\n      \u003CInput type=\"email\" id=\"email\" placeholder=\"Email\" \u002F>\n    \u003C\u002Fdiv>\n  );\n}\n```\n\nInput with button:\n\n```tsx\nimport { Button } from \"@\u002Fcomponents\u002Fui\u002Fbutton\";\nimport { Input } from \"@\u002Fcomponents\u002Fui\u002Finput\";\n\nexport function InputWithButton() {\n  return (\n    \u003Cdiv className=\"flex w-full max-w-sm items-center gap-2\">\n      \u003CInput type=\"email\" placeholder=\"Email\" \u002F>\n      \u003CButton type=\"submit\" variant=\"outline\">Subscribe\u003C\u002FButton>\n    \u003C\u002Fdiv>\n  );\n}\n```\n\n### Forms with Validation\n\nInstallation:\n\n```bash\nnpx shadcn@latest add form\n```\n\nThis installs React Hook Form, Zod, and form components.\n\nComplete form example:\n\n```tsx\n\"use client\"\n\nimport { zodResolver } from \"@hookform\u002Fresolvers\u002Fzod\"\nimport { useForm } from \"react-hook-form\"\nimport * as z from \"zod\"\n\nimport { Button } from \"@\u002Fcomponents\u002Fui\u002Fbutton\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@\u002Fcomponents\u002Fui\u002Fform\"\nimport { Input } from \"@\u002Fcomponents\u002Fui\u002Finput\"\nimport { toast } from \"@\u002Fcomponents\u002Fui\u002Fuse-toast\"\n\nconst formSchema = z.object({\n  username: z.string().min(2, {\n    message: \"Username must be at least 2 characters.\",\n  }),\n  email: z.string().email({\n    message: \"Please enter a valid email address.\",\n  }),\n})\n\nexport function ProfileForm() {\n  const form = useForm\u003Cz.infer\u003Ctypeof formSchema>>({\n    resolver: zodResolver(formSchema),\n    defaultValues: {\n      username: \"\",\n      email: \"\",\n    },\n  })\n\n  function onSubmit(values: z.infer\u003Ctypeof formSchema>) {\n    toast({\n      title: \"You submitted the following values:\",\n      description: (\n        \u003Cpre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n          \u003Ccode className=\"text-white\">{JSON.stringify(values, null, 2)}\u003C\u002Fcode>\n        \u003C\u002Fpre>\n      ),\n    })\n  }\n\n  return (\n    \u003CForm {...form}>\n      \u003Cform onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-8\">\n        \u003CFormField\n          control={form.control}\n          name=\"username\"\n          render={({ field }) => (\n            \u003CFormItem>\n              \u003CFormLabel>Username\u003C\u002FFormLabel>\n              \u003CFormControl>\n                \u003CInput placeholder=\"shadcn\" {...field} \u002F>\n              \u003C\u002FFormControl>\n              \u003CFormDescription>\n                This is your public display name.\n              \u003C\u002FFormDescription>\n              \u003CFormMessage \u002F>\n            \u003C\u002FFormItem>\n          )}\n        \u002F>\n        \n        \u003CFormField\n          control={form.control}\n          name=\"email\"\n          render={({ field }) => (\n            \u003CFormItem>\n              \u003CFormLabel>Email\u003C\u002FFormLabel>\n              \u003CFormControl>\n                \u003CInput type=\"email\" placeholder=\"you@example.com\" {...field} \u002F>\n              \u003C\u002FFormControl>\n              \u003CFormMessage \u002F>\n            \u003C\u002FFormItem>\n          )}\n        \u002F>\n        \n        \u003CButton type=\"submit\">Submit\u003C\u002FButton>\n      \u003C\u002Fform>\n    \u003C\u002FForm>\n  )\n}\n```\n\n### Card Component\n\nInstallation:\n\n```bash\nnpx shadcn@latest add card\n```\n\nBasic card:\n\n```tsx\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@\u002Fcomponents\u002Fui\u002Fcard\"\n\nexport function CardDemo() {\n  return (\n    \u003CCard>\n      \u003CCardHeader>\n        \u003CCardTitle>Card Title\u003C\u002FCardTitle>\n        \u003CCardDescription>Card Description\u003C\u002FCardDescription>\n      \u003C\u002FCardHeader>\n      \u003CCardContent>\n        \u003Cp>Card Content\u003C\u002Fp>\n      \u003C\u002FCardContent>\n      \u003CCardFooter>\n        \u003Cp>Card Footer\u003C\u002Fp>\n      \u003C\u002FCardFooter>\n    \u003C\u002FCard>\n  )\n}\n```\n\nCard with form:\n\n```tsx\nimport { Button } from \"@\u002Fcomponents\u002Fui\u002Fbutton\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@\u002Fcomponents\u002Fui\u002Fcard\"\nimport { Input } from \"@\u002Fcomponents\u002Fui\u002Finput\"\nimport { Label } from \"@\u002Fcomponents\u002Fui\u002Flabel\"\n\nexport function CardWithForm() {\n  return (\n    \u003CCard className=\"w-[350px]\">\n      \u003CCardHeader>\n        \u003CCardTitle>Create project\u003C\u002FCardTitle>\n        \u003CCardDescription>Deploy your new project in one-click.\u003C\u002FCardDescription>\n      \u003C\u002FCardHeader>\n      \u003CCardContent>\n        \u003Cform>\n          \u003Cdiv className=\"grid w-full items-center gap-4\">\n            \u003Cdiv className=\"flex flex-col space-y-1.5\">\n              \u003CLabel htmlFor=\"name\">Name\u003C\u002FLabel>\n              \u003CInput id=\"name\" placeholder=\"Name of your project\" \u002F>\n            \u003C\u002Fdiv>\n          \u003C\u002Fdiv>\n        \u003C\u002Fform>\n      \u003C\u002FCardContent>\n      \u003CCardFooter className=\"flex justify-between\">\n        \u003CButton variant=\"outline\">Cancel\u003C\u002FButton>\n        \u003CButton>Deploy\u003C\u002FButton>\n      \u003C\u002FCardFooter>\n    \u003C\u002FCard>\n  )\n}\n```\n\n### Dialog (Modal) Component\n\nInstallation:\n\n```bash\nnpx shadcn@latest add dialog\n```\n\nBasic dialog:\n\n```tsx\nimport { Button } from \"@\u002Fcomponents\u002Fui\u002Fbutton\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@\u002Fcomponents\u002Fui\u002Fdialog\"\n\nexport function DialogDemo() {\n  return (\n    \u003CDialog>\n      \u003CDialogTrigger asChild>\n        \u003CButton variant=\"outline\">Open Dialog\u003C\u002FButton>\n      \u003C\u002FDialogTrigger>\n      \u003CDialogContent className=\"sm:max-w-[425px]\">\n        \u003CDialogHeader>\n          \u003CDialogTitle>Edit profile\u003C\u002FDialogTitle>\n          \u003CDialogDescription>\n            Make changes to your profile here. Click save when you're done.\n          \u003C\u002FDialogDescription>\n        \u003C\u002FDialogHeader>\n        \u003Cdiv className=\"grid gap-4 py-4\">\n          \u003Cdiv className=\"grid grid-cols-4 items-center gap-4\">\n            \u003CLabel htmlFor=\"name\" className=\"text-right\">\n              Name\n            \u003C\u002FLabel>\n            \u003CInput id=\"name\" value=\"Pedro Duarte\" className=\"col-span-3\" \u002F>\n          \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n        \u003CDialogFooter>\n          \u003CButton type=\"submit\">Save changes\u003C\u002FButton>\n        \u003C\u002FDialogFooter>\n      \u003C\u002FDialogContent>\n    \u003C\u002FDialog>\n  )\n}\n```\n\n### Sheet (Slide-over) Component\n\nInstallation:\n\n```bash\nnpx shadcn@latest add sheet\n```\n\nBasic sheet:\n\n```tsx\nimport { Button } from \"@\u002Fcomponents\u002Fui\u002Fbutton\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@\u002Fcomponents\u002Fui\u002Fsheet\"\n\nexport function SheetDemo() {\n  return (\n    \u003CSheet>\n      \u003CSheetTrigger asChild>\n        \u003CButton variant=\"outline\">Open Sheet\u003C\u002FButton>\n      \u003C\u002FSheetTrigger>\n      \u003CSheetContent>\n        \u003CSheetHeader>\n          \u003CSheetTitle>Edit profile\u003C\u002FSheetTitle>\n          \u003CSheetDescription>\n            Make changes to your profile here. Click save when you're done.\n          \u003C\u002FSheetDescription>\n        \u003C\u002FSheetHeader>\n        \u003Cdiv className=\"grid gap-4 py-4\">\n          \u003Cdiv className=\"grid grid-cols-4 items-center gap-4\">\n            \u003CLabel htmlFor=\"name\" className=\"text-right\">\n              Name\n            \u003C\u002FLabel>\n            \u003CInput id=\"name\" value=\"Pedro Duarte\" className=\"col-span-3\" \u002F>\n          \u003C\u002Fdiv>\n          \u003Cdiv className=\"grid grid-cols-4 items-center gap-4\">\n            \u003CLabel htmlFor=\"username\" className=\"text-right\">\n              Username\n            \u003C\u002FLabel>\n            \u003CInput id=\"username\" value=\"@peduarte\" className=\"col-span-3\" \u002F>\n          \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002FSheetContent>\n    \u003C\u002FSheet>\n  )\n}\n```\n\nSheet with side placement:\n\n```tsx\n\u003CSheet>\n  \u003CSheetTrigger asChild>\n    \u003CButton variant=\"outline\">Open Right Sheet\u003C\u002FButton>\n  \u003C\u002FSheetTrigger>\n  \u003CSheetContent side=\"right\">\n    \u003CSheetHeader>\n      \u003CSheetTitle>Settings\u003C\u002FSheetTitle>\n      \u003CSheetDescription>\n        Configure your application settings here.\n      \u003C\u002FSheetDescription>\n    \u003C\u002FSheetHeader>\n    {\u002F* Settings content *\u002F}\n  \u003C\u002FSheetContent>\n\u003C\u002FSheet>\n```\n\n### Menubar & Navigation\n\n#### Menubar Component\n\nInstallation:\n\n```bash\nnpx shadcn@latest add menubar\n```\n\nBasic menubar:\n\n```tsx\nimport {\n  Menubar,\n  MenubarContent,\n  MenubarItem,\n  MenubarMenu,\n  MenubarSeparator,\n  MenubarShortcut,\n  MenubarSub,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarTrigger,\n} from \"@\u002Fcomponents\u002Fui\u002Fmenubar\"\n\nexport function MenubarDemo() {\n  return (\n    \u003CMenubar>\n      \u003CMenubarMenu>\n        \u003CMenubarTrigger>File\u003C\u002FMenubarTrigger>\n        \u003CMenubarContent>\n          \u003CMenubarItem>\n            New Tab \u003CMenubarShortcut>⌘T\u003C\u002FMenubarShortcut>\n          \u003C\u002FMenubarItem>\n          \u003CMenubarItem>\n            New Window \u003CMenubarShortcut>⌘N\u003C\u002FMenubarShortcut>\n          \u003C\u002FMenubarItem>\n          \u003CMenubarSeparator \u002F>\n          \u003CMenubarItem>Share\u003C\u002FMenubarItem>\n          \u003CMenubarSeparator \u002F>\n          \u003CMenubarItem>Print\u003C\u002FMenubarItem>\n        \u003C\u002FMenubarContent>\n      \u003C\u002FMenubarMenu>\n      \u003CMenubarMenu>\n        \u003CMenubarTrigger>Edit\u003C\u002FMenubarTrigger>\n        \u003CMenubarContent>\n          \u003CMenubarItem>\n            Undo \u003CMenubarShortcut>⌘Z\u003C\u002FMenubarShortcut>\n          \u003C\u002FMenubarItem>\n          \u003CMenubarItem>\n            Redo \u003CMenubarShortcut>⌘Y\u003C\u002FMenubarShortcut>\n          \u003C\u002FMenubarItem>\n          \u003CMenubarSeparator \u002F>\n          \u003CMenubarSub>\n            \u003CMenubarSubTrigger>Find\u003C\u002FMenubarSubTrigger>\n            \u003CMenubarSubContent>\n              \u003CMenubarItem>Search the web\u003C\u002FMenubarItem>\n              \u003CMenubarItem>Find...\u003C\u002FMenubarItem>\n              \u003CMenubarItem>Find Next\u003C\u002FMenubarItem>\n              \u003CMenubarItem>Find Previous\u003C\u002FMenubarItem>\n            \u003C\u002FMenubarSubContent>\n          \u003C\u002FMenubarSub>\n        \u003C\u002FMenubarContent>\n      \u003C\u002FMenubarMenu>\n    \u003C\u002FMenubar>\n  )\n}\n```\n\n### Select (Dropdown) Component\n\nInstallation:\n\n```bash\nnpx shadcn@latest add select\n```\n\nBasic select:\n\n```tsx\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@\u002Fcomponents\u002Fui\u002Fselect\"\n\nexport function SelectDemo() {\n  return (\n    \u003CSelect>\n      \u003CSelectTrigger className=\"w-[180px]\">\n        \u003CSelectValue placeholder=\"Select a fruit\" \u002F>\n      \u003C\u002FSelectTrigger>\n      \u003CSelectContent>\n        \u003CSelectItem value=\"apple\">Apple\u003C\u002FSelectItem>\n        \u003CSelectItem value=\"banana\">Banana\u003C\u002FSelectItem>\n        \u003CSelectItem value=\"orange\">Orange\u003C\u002FSelectItem>\n      \u003C\u002FSelectContent>\n    \u003C\u002FSelect>\n  )\n}\n```\n\nSelect in form:\n\n```tsx\n\u003CFormField\n  control={form.control}\n  name=\"role\"\n  render={({ field }) => (\n    \u003CFormItem>\n      \u003CFormLabel>Role\u003C\u002FFormLabel>\n      \u003CSelect onValueChange={field.onChange} defaultValue={field.value}>\n        \u003CFormControl>\n          \u003CSelectTrigger>\n            \u003CSelectValue placeholder=\"Select a role\" \u002F>\n          \u003C\u002FSelectTrigger>\n        \u003C\u002FFormControl>\n        \u003CSelectContent>\n          \u003CSelectItem value=\"admin\">Admin\u003C\u002FSelectItem>\n          \u003CSelectItem value=\"user\">User\u003C\u002FSelectItem>\n          \u003CSelectItem value=\"guest\">Guest\u003C\u002FSelectItem>\n        \u003C\u002FSelectContent>\n      \u003C\u002FSelect>\n      \u003CFormMessage \u002F>\n    \u003C\u002FFormItem>\n  )}\n\u002F>\n```\n\n### Toast Notifications\n\nInstallation:\n\n```bash\nnpx shadcn@latest add toast\n```\n\nSetup toast provider in root layout:\n\n```tsx\nimport { Toaster } from \"@\u002Fcomponents\u002Fui\u002Ftoaster\"\n\nexport default function RootLayout({ children }) {\n  return (\n    \u003Chtml lang=\"en\">\n      \u003Cbody>\n        {children}\n        \u003CToaster \u002F>\n      \u003C\u002Fbody>\n    \u003C\u002Fhtml>\n  )\n}\n```\n\nUsing toast:\n\n```tsx\nimport { useToast } from \"@\u002Fcomponents\u002Fui\u002Fuse-toast\"\nimport { Button } from \"@\u002Fcomponents\u002Fui\u002Fbutton\"\n\nexport function ToastDemo() {\n  const { toast } = useToast()\n\n  return (\n    \u003CButton\n      onClick={() => {\n        toast({\n          title: \"Scheduled: Catch up\",\n          description: \"Friday, February 10, 2023 at 5:57 PM\",\n        })\n      }}\n    >\n      Show Toast\n    \u003C\u002FButton>\n  )\n}\n```\n\nToast variants:\n\n```tsx\n\u002F\u002F Success\ntoast({\n  title: \"Success\",\n  description: \"Your changes have been saved.\",\n})\n\n\u002F\u002F Error\ntoast({\n  variant: \"destructive\",\n  title: \"Error\",\n  description: \"Something went wrong.\",\n})\n\n\u002F\u002F With action\ntoast({\n  title: \"Uh oh! Something went wrong.\",\n  description: \"There was a problem with your request.\",\n  action: \u003CToastAction altText=\"Try again\">Try again\u003C\u002FToastAction>,\n})\n```\n\n### Table Component\n\nInstallation:\n\n```bash\nnpx shadcn@latest add table\n```\n\nBasic table:\n\n```tsx\nimport {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@\u002Fcomponents\u002Fui\u002Ftable\"\n\nconst invoices = [\n  { invoice: \"INV001\", status: \"Paid\", method: \"Credit Card\", amount: \"$250.00\" },\n  { invoice: \"INV002\", status: \"Pending\", method: \"PayPal\", amount: \"$150.00\" },\n]\n\nexport function TableDemo() {\n  return (\n    \u003CTable>\n      \u003CTableCaption>A list of your recent invoices.\u003C\u002FTableCaption>\n      \u003CTableHeader>\n        \u003CTableRow>\n          \u003CTableHead>Invoice\u003C\u002FTableHead>\n          \u003CTableHead>Status\u003C\u002FTableHead>\n          \u003CTableHead>Method\u003C\u002FTableHead>\n          \u003CTableHead className=\"text-right\">Amount\u003C\u002FTableHead>\n        \u003C\u002FTableRow>\n      \u003C\u002FTableHeader>\n      \u003CTableBody>\n        {invoices.map((invoice) => (\n          \u003CTableRow key={invoice.invoice}>\n            \u003CTableCell className=\"font-medium\">{invoice.invoice}\u003C\u002FTableCell>\n            \u003CTableCell>{invoice.status}\u003C\u002FTableCell>\n            \u003CTableCell>{invoice.method}\u003C\u002FTableCell>\n            \u003CTableCell className=\"text-right\">{invoice.amount}\u003C\u002FTableCell>\n          \u003C\u002FTableRow>\n        ))}\n      \u003C\u002FTableBody>\n    \u003C\u002FTable>\n  )\n}\n```\n\n## Customization\n\n### Theming with CSS Variables\n\nshadcn\u002Fui uses CSS variables for theming. Configure in `globals.css`:\n\n```css\n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 222.2 84% 4.9%;\n    --primary: 222.2 47.4% 11.2%;\n    --primary-foreground: 210 40% 98%;\n    --secondary: 210 40% 96.1%;\n    --secondary-foreground: 222.2 47.4% 11.2%;\n    --muted: 210 40% 96.1%;\n    --muted-foreground: 215.4 16.3% 46.9%;\n    --accent: 210 40% 96.1%;\n    --accent-foreground: 222.2 47.4% 11.2%;\n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 210 40% 98%;\n    --border: 214.3 31.8% 91.4%;\n    --input: 214.3 31.8% 91.4%;\n    --ring: 222.2 84% 4.9%;\n    --radius: 0.5rem;\n  }\n\n  .dark {\n    --background: 222.2 84% 4.9%;\n    --foreground: 210 40% 98%;\n    --primary: 210 40% 98%;\n    --primary-foreground: 222.2 47.4% 11.2%;\n    \u002F* ... other dark mode variables *\u002F\n  }\n}\n```\n\n### Customizing Components\n\nSince you own the code, customize directly:\n\n```tsx\n\u002F\u002F components\u002Fui\u002Fbutton.tsx\nimport * as React from \"react\"\nimport { Slot } from \"@radix-ui\u002Freact-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { cn } from \"@\u002Flib\u002Futils\"\n\nconst buttonVariants = cva(\n  \"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary\u002F90\",\n        destructive: \"bg-destructive text-destructive-foreground hover:bg-destructive\u002F90\",\n        outline: \"border border-input bg-background hover:bg-accent\",\n        \u002F\u002F Add custom variant\n        custom: \"bg-gradient-to-r from-purple-500 to-pink-500 text-white\",\n      },\n      size: {\n        default: \"h-10 px-4 py-2\",\n        sm: \"h-9 rounded-md px-3\",\n        lg: \"h-11 rounded-md px-8\",\n        \u002F\u002F Add custom size\n        xl: \"h-14 rounded-md px-10 text-lg\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes\u003CHTMLButtonElement>,\n    VariantProps\u003Ctypeof buttonVariants> {\n  asChild?: boolean\n}\n\nconst Button = React.forwardRef\u003CHTMLButtonElement, ButtonProps>(\n  ({ className, variant, size, asChild = false, ...props }, ref) => {\n    const Comp = asChild ? Slot : \"button\"\n    return (\n      \u003CComp\n        className={cn(buttonVariants({ variant, size, className }))}\n        ref={ref}\n        {...props}\n      \u002F>\n    )\n  }\n)\nButton.displayName = \"Button\"\n\nexport { Button, buttonVariants }\n```\n\n## Next.js Integration\n\n### App Router Setup\n\nFor Next.js 13+ with App Router, ensure components use `\"use client\"` directive:\n\n```tsx\n\u002F\u002F src\u002Fcomponents\u002Fui\u002Fbutton.tsx\n\"use client\"\n\nimport * as React from \"react\"\nimport { Slot } from \"@radix-ui\u002Freact-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { cn } from \"@\u002Flib\u002Futils\"\n\n\u002F\u002F ... rest of component\n```\n\n### Layout Integration\n\nAdd the Toaster to your root layout:\n\n```tsx\n\u002F\u002F app\u002Flayout.tsx\nimport { Toaster } from \"@\u002Fcomponents\u002Fui\u002Ftoaster\"\nimport \".\u002Fglobals.css\"\n\nexport default function RootLayout({\n  children,\n}: {\n  children: React.ReactNode\n}) {\n  return (\n    \u003Chtml lang=\"en\" suppressHydrationWarning>\n      \u003Cbody className=\"min-h-screen bg-background font-sans antialiased\">\n        {children}\n        \u003CToaster \u002F>\n      \u003C\u002Fbody>\n    \u003C\u002Fhtml>\n  )\n}\n```\n\n### Server Components\n\nWhen using shadcn\u002Fui components in Server Components, wrap them in a Client Component:\n\n```tsx\n\u002F\u002F app\u002Fdashboard\u002Fpage.tsx\nimport { Card, CardContent, CardHeader, CardTitle } from \"@\u002Fcomponents\u002Fui\u002Fcard\"\nimport { ButtonClient } from \"@\u002Fcomponents\u002Fui\u002Fbutton-client\"\n\nexport default function DashboardPage() {\n  return (\n    \u003Cdiv className=\"container mx-auto p-6\">\n      \u003CCard>\n        \u003CCardHeader>\n          \u003CCardTitle>Dashboard\u003C\u002FCardTitle>\n        \u003C\u002FCardHeader>\n        \u003CCardContent>\n          \u003CButtonClient>Interactive Button\u003C\u002FButtonClient>\n        \u003C\u002FCardContent>\n      \u003C\u002FCard>\n    \u003C\u002Fdiv>\n  )\n}\n```\n\n```tsx\n\u002F\u002F src\u002Fcomponents\u002Fui\u002Fbutton-client.tsx\n\"use client\"\n\nimport { Button } from \".\u002Fbutton\"\n\nexport function ButtonClient(props: React.ComponentProps\u003Ctypeof Button>) {\n  return \u003CButton {...props} \u002F>\n}\n```\n\n### Route Handlers with Forms\n\nCreate API routes for form submissions:\n\n```tsx\n\u002F\u002F app\u002Fapi\u002Fcontact\u002Froute.ts\nimport { NextRequest, NextResponse } from \"next\u002Fserver\"\nimport { z } from \"zod\"\n\nconst contactSchema = z.object({\n  name: z.string().min(2),\n  email: z.string().email(),\n  message: z.string().min(10),\n})\n\nexport async function POST(request: NextRequest) {\n  try {\n    const body = await request.json()\n    const validated = contactSchema.parse(body)\n\n    \u002F\u002F Process form data\n    console.log(\"Form submission:\", validated)\n\n    return NextResponse.json({ success: true })\n  } catch (error) {\n    if (error instanceof z.ZodError) {\n      return NextResponse.json(\n        { errors: error.errors },\n        { status: 400 }\n      )\n    }\n\n    return NextResponse.json(\n      { error: \"Internal server error\" },\n      { status: 500 }\n    )\n  }\n}\n```\n\n### Form with Server Action\n\nUsing Next.js 14+ Server Actions:\n\n```tsx\n\u002F\u002F app\u002Fcontact\u002Fpage.tsx\n\"use client\"\n\nimport { zodResolver } from \"@hookform\u002Fresolvers\u002Fzod\"\nimport { useForm } from \"react-hook-form\"\nimport * as z from \"zod\"\nimport { Button } from \"@\u002Fcomponents\u002Fui\u002Fbutton\"\nimport {\n  Form,\n  FormControl,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@\u002Fcomponents\u002Fui\u002Fform\"\nimport { Input } from \"@\u002Fcomponents\u002Fui\u002Finput\"\nimport { Textarea } from \"@\u002Fcomponents\u002Fui\u002Ftextarea\"\nimport { toast } from \"@\u002Fcomponents\u002Fui\u002Fuse-toast\"\n\nconst formSchema = z.object({\n  name: z.string().min(2),\n  email: z.string().email(),\n  message: z.string().min(10),\n})\n\nasync function onSubmit(values: z.infer\u003Ctypeof formSchema>) {\n  try {\n    const response = await fetch(\"\u002Fapi\u002Fcontact\", {\n      method: \"POST\",\n      headers: { \"Content-Type\": \"application\u002Fjson\" },\n      body: JSON.stringify(values),\n    })\n\n    if (!response.ok) throw new Error(\"Failed to submit\")\n\n    toast({\n      title: \"Success!\",\n      description: \"Your message has been sent.\",\n    })\n  } catch (error) {\n    toast({\n      variant: \"destructive\",\n      title: \"Error\",\n      description: \"Failed to send message. Please try again.\",\n    })\n  }\n}\n\nexport default function ContactPage() {\n  const form = useForm\u003Cz.infer\u003Ctypeof formSchema>>({\n    resolver: zodResolver(formSchema),\n  })\n\n  return (\n    \u003Cdiv className=\"container mx-auto max-w-2xl py-8\">\n      \u003CForm {...form}>\n        \u003Cform onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-6\">\n          \u003CFormField\n            control={form.control}\n            name=\"name\"\n            render={({ field }) => (\n              \u003CFormItem>\n                \u003CFormLabel>Name\u003C\u002FFormLabel>\n                \u003CFormControl>\n                  \u003CInput placeholder=\"Your name\" {...field} \u002F>\n                \u003C\u002FFormControl>\n                \u003CFormMessage \u002F>\n              \u003C\u002FFormItem>\n            )}\n          \u002F>\n\n          \u003CFormField\n            control={form.control}\n            name=\"email\"\n            render={({ field }) => (\n              \u003CFormItem>\n                \u003CFormLabel>Email\u003C\u002FFormLabel>\n                \u003CFormControl>\n                  \u003CInput type=\"email\" placeholder=\"your@email.com\" {...field} \u002F>\n                \u003C\u002FFormControl>\n                \u003CFormMessage \u002F>\n              \u003C\u002FFormItem>\n            )}\n          \u002F>\n\n          \u003CFormField\n            control={form.control}\n            name=\"message\"\n            render={({ field }) => (\n              \u003CFormItem>\n                \u003CFormLabel>Message\u003C\u002FFormLabel>\n                \u003CFormControl>\n                  \u003CTextarea\n                    placeholder=\"Your message...\"\n                    className=\"resize-none\"\n                    {...field}\n                  \u002F>\n                \u003C\u002FFormControl>\n                \u003CFormMessage \u002F>\n              \u003C\u002FFormItem>\n            )}\n          \u002F>\n\n          \u003CButton type=\"submit\" className=\"w-full\">\n            Send Message\n          \u003C\u002FButton>\n        \u003C\u002Fform>\n      \u003C\u002FForm>\n    \u003C\u002Fdiv>\n  )\n}\n```\n\n### Metadata with shadcn\u002Fui\n\nUsing shadcn\u002Fui components in metadata:\n\n```tsx\n\u002F\u002F app\u002Flayout.tsx\nimport { Metadata } from \"next\"\n\nexport const metadata: Metadata = {\n  title: {\n    default: \"My App\",\n    template: \"%s | My App\",\n  },\n  description: \"Built with shadcn\u002Fui and Next.js\",\n}\n\n\u002F\u002F app\u002Fabout\u002Fpage.tsx\nimport { Metadata } from \"next\"\nimport { Card, CardContent, CardHeader, CardTitle } from \"@\u002Fcomponents\u002Fui\u002Fcard\"\n\nexport const metadata: Metadata = {\n  title: \"About Us\",\n  description: \"Learn more about our company\",\n}\n\nexport default function AboutPage() {\n  return (\n    \u003Cdiv className=\"container mx-auto py-8\">\n      \u003CCard>\n        \u003CCardHeader>\n          \u003CCardTitle>About Our Company\u003C\u002FCardTitle>\n        \u003C\u002FCardHeader>\n        \u003CCardContent>\n          \u003Cp>We build amazing products with modern web technologies.\u003C\u002Fp>\n        \u003C\u002FCardContent>\n      \u003C\u002FCard>\n    \u003C\u002Fdiv>\n  )\n}\n```\n\n### Font Optimization\n\nOptimize fonts with next\u002Ffont:\n\n```tsx\n\u002F\u002F app\u002Flayout.tsx\nimport { Inter } from \"next\u002Ffont\u002Fgoogle\"\nimport { Toaster } from \"@\u002Fcomponents\u002Fui\u002Ftoaster\"\nimport { cn } from \"@\u002Flib\u002Futils\"\nimport \".\u002Fglobals.css\"\n\nconst inter = Inter({ subsets: [\"latin\"] })\n\nexport default function RootLayout({\n  children,\n}: {\n  children: React.ReactNode\n}) {\n  return (\n    \u003Chtml lang=\"en\" suppressHydrationWarning>\n      \u003Cbody className={cn(\"min-h-screen bg-background font-sans antialiased\", inter.className)}>\n        {children}\n        \u003CToaster \u002F>\n      \u003C\u002Fbody>\n    \u003C\u002Fhtml>\n  )\n}\n```\n\n## Advanced Patterns\n\n### Form with Multiple Fields\n\n```tsx\nconst formSchema = z.object({\n  username: z.string().min(2).max(50),\n  email: z.string().email(),\n  bio: z.string().max(160).min(4),\n  role: z.enum([\"admin\", \"user\", \"guest\"]),\n  notifications: z.boolean().default(false),\n})\n\nexport function AdvancedForm() {\n  const form = useForm\u003Cz.infer\u003Ctypeof formSchema>>({\n    resolver: zodResolver(formSchema),\n    defaultValues: {\n      username: \"\",\n      email: \"\",\n      bio: \"\",\n      role: \"user\",\n      notifications: false,\n    },\n  })\n\n  function onSubmit(values: z.infer\u003Ctypeof formSchema>) {\n    console.log(values)\n  }\n\n  return (\n    \u003CForm {...form}>\n      \u003Cform onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-8\">\n        {\u002F* Username field *\u002F}\n        \u003CFormField\n          control={form.control}\n          name=\"username\"\n          render={({ field }) => (\n            \u003CFormItem>\n              \u003CFormLabel>Username\u003C\u002FFormLabel>\n              \u003CFormControl>\n                \u003CInput placeholder=\"johndoe\" {...field} \u002F>\n              \u003C\u002FFormControl>\n              \u003CFormMessage \u002F>\n            \u003C\u002FFormItem>\n          )}\n        \u002F>\n\n        {\u002F* Email field *\u002F}\n        \u003CFormField\n          control={form.control}\n          name=\"email\"\n          render={({ field }) => (\n            \u003CFormItem>\n              \u003CFormLabel>Email\u003C\u002FFormLabel>\n              \u003CFormControl>\n                \u003CInput type=\"email\" placeholder=\"john@example.com\" {...field} \u002F>\n              \u003C\u002FFormControl>\n              \u003CFormMessage \u002F>\n            \u003C\u002FFormItem>\n          )}\n        \u002F>\n\n        {\u002F* Textarea field *\u002F}\n        \u003CFormField\n          control={form.control}\n          name=\"bio\"\n          render={({ field }) => (\n            \u003CFormItem>\n              \u003CFormLabel>Bio\u003C\u002FFormLabel>\n              \u003CFormControl>\n                \u003CTextarea\n                  placeholder=\"Tell us about yourself\"\n                  className=\"resize-none\"\n                  {...field}\n                \u002F>\n              \u003C\u002FFormControl>\n              \u003CFormMessage \u002F>\n            \u003C\u002FFormItem>\n          )}\n        \u002F>\n\n        {\u002F* Select field *\u002F}\n        \u003CFormField\n          control={form.control}\n          name=\"role\"\n          render={({ field }) => (\n            \u003CFormItem>\n              \u003CFormLabel>Role\u003C\u002FFormLabel>\n              \u003CSelect onValueChange={field.onChange} defaultValue={field.value}>\n                \u003CFormControl>\n                  \u003CSelectTrigger>\n                    \u003CSelectValue placeholder=\"Select a role\" \u002F>\n                  \u003C\u002FSelectTrigger>\n                \u003C\u002FFormControl>\n                \u003CSelectContent>\n                  \u003CSelectItem value=\"admin\">Admin\u003C\u002FSelectItem>\n                  \u003CSelectItem value=\"user\">User\u003C\u002FSelectItem>\n                  \u003CSelectItem value=\"guest\">Guest\u003C\u002FSelectItem>\n                \u003C\u002FSelectContent>\n              \u003C\u002FSelect>\n              \u003CFormMessage \u002F>\n            \u003C\u002FFormItem>\n          )}\n        \u002F>\n\n        {\u002F* Checkbox field *\u002F}\n        \u003CFormField\n          control={form.control}\n          name=\"notifications\"\n          render={({ field }) => (\n            \u003CFormItem className=\"flex flex-row items-start space-x-3 space-y-0\">\n              \u003CFormControl>\n                \u003CCheckbox\n                  checked={field.value}\n                  onCheckedChange={field.onChange}\n                \u002F>\n              \u003C\u002FFormControl>\n              \u003Cdiv className=\"space-y-1 leading-none\">\n                \u003CFormLabel>Email notifications\u003C\u002FFormLabel>\n                \u003CFormDescription>\n                  Receive emails about your account activity.\n                \u003C\u002FFormDescription>\n              \u003C\u002Fdiv>\n            \u003C\u002FFormItem>\n          )}\n        \u002F>\n\n        \u003CButton type=\"submit\">Submit\u003C\u002FButton>\n      \u003C\u002Fform>\n    \u003C\u002FForm>\n  )\n}\n```\n\n## Best Practices\n\n1. **Accessibility**: Components use Radix UI primitives for ARIA compliance\n2. **Customization**: Modify components directly in your codebase\n3. **Type Safety**: Use TypeScript for type-safe props and state\n4. **Validation**: Use Zod schemas for form validation\n5. **Styling**: Leverage Tailwind utilities and CSS variables\n6. **Consistency**: Use the same component patterns across your app\n7. **Testing**: Components are testable with React Testing Library\n8. **Performance**: Components are optimized and tree-shakeable\n\n## Common Component Combinations\n\n### Login Form\n\n```tsx\n\u003CCard className=\"w-[350px]\">\n  \u003CCardHeader>\n    \u003CCardTitle>Login\u003C\u002FCardTitle>\n    \u003CCardDescription>Enter your credentials to continue\u003C\u002FCardDescription>\n  \u003C\u002FCardHeader>\n  \u003CCardContent>\n    \u003CForm {...form}>\n      \u003Cform onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-4\">\n        \u003CFormField\n          control={form.control}\n          name=\"email\"\n          render={({ field }) => (\n            \u003CFormItem>\n              \u003CFormLabel>Email\u003C\u002FFormLabel>\n              \u003CFormControl>\n                \u003CInput type=\"email\" placeholder=\"you@example.com\" {...field} \u002F>\n              \u003C\u002FFormControl>\n              \u003CFormMessage \u002F>\n            \u003C\u002FFormItem>\n          )}\n        \u002F>\n        \u003CFormField\n          control={form.control}\n          name=\"password\"\n          render={({ field }) => (\n            \u003CFormItem>\n              \u003CFormLabel>Password\u003C\u002FFormLabel>\n              \u003CFormControl>\n                \u003CInput type=\"password\" {...field} \u002F>\n              \u003C\u002FFormControl>\n              \u003CFormMessage \u002F>\n            \u003C\u002FFormItem>\n          )}\n        \u002F>\n        \u003CButton type=\"submit\" className=\"w-full\">Login\u003C\u002FButton>\n      \u003C\u002Fform>\n    \u003C\u002FForm>\n  \u003C\u002FCardContent>\n\u003C\u002FCard>\n```\n\n## References\n\n- Official Docs: https:\u002F\u002Fui.shadcn.com\n- Radix UI: https:\u002F\u002Fwww.radix-ui.com\n- React Hook Form: https:\u002F\u002Freact-hook-form.com\n- Zod: https:\u002F\u002Fzod.dev\n- Tailwind CSS: https:\u002F\u002Ftailwindcss.com\n- Examples: https:\u002F\u002Fui.shadcn.com\u002Fexamples\n",{"name":5,"license":15,"language":54,"framework":55,"description":7,"allowed-tools":56},"typescript,tsx","react,nextjs,tailwindcss","Read, Write, Bash, Edit, Glob","main","62141d825eb73b2f691358c081d3da7d67278315",".legacy\u002Fdatasource\u002F.codebuddy\u002Fskills\u002Fshadcn-ui","https:\u002F\u002Fgithub.com\u002Fcastle-x\u002Fsonar","https:\u002F\u002Fgithub.com\u002Fcastle-x","2026-06-01 15:59:22",{"source":8,"skillName":5,"commands":64,"prompt":74,"zipAvailable":75},[65,68,71],{"tool":66,"command":67},"npx","npx skills add castle-x\u002Fsonar --skill shadcn-ui",{"tool":69,"command":70},"bunx","bunx skills add castle-x\u002Fsonar --skill shadcn-ui",{"tool":72,"command":73},"pnpm","pnpm dlx skills add castle-x\u002Fsonar --skill shadcn-ui","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fcastle-x\u002Fsonar\u002Fblob\u002Fmain\u002F.legacy\u002Fdatasource\u002F.codebuddy\u002Fskills\u002Fshadcn-ui\u002FSKILL.md",true,[77,83,87,91],{"path":78,"resourceType":79,"resourceTypeDesc":80,"sizeBytes":81,"sourceHtmlUrl":82},"learn.md","REFERENCE","参考文档",3625,"https:\u002F\u002Fgithub.com\u002Fcastle-x\u002Fsonar\u002Fblob\u002Fmain\u002F.legacy\u002Fdatasource\u002F.codebuddy\u002Fskills\u002Fshadcn-ui\u002Flearn.md",{"path":84,"resourceType":79,"resourceTypeDesc":80,"sizeBytes":85,"sourceHtmlUrl":86},"official-ui-reference.md",51787,"https:\u002F\u002Fgithub.com\u002Fcastle-x\u002Fsonar\u002Fblob\u002Fmain\u002F.legacy\u002Fdatasource\u002F.codebuddy\u002Fskills\u002Fshadcn-ui\u002Fofficial-ui-reference.md",{"path":88,"resourceType":79,"resourceTypeDesc":80,"sizeBytes":89,"sourceHtmlUrl":90},"reference.md",14320,"https:\u002F\u002Fgithub.com\u002Fcastle-x\u002Fsonar\u002Fblob\u002Fmain\u002F.legacy\u002Fdatasource\u002F.codebuddy\u002Fskills\u002Fshadcn-ui\u002Freference.md",{"path":92,"resourceType":79,"resourceTypeDesc":80,"sizeBytes":93,"sourceHtmlUrl":94},"ui-reference.md",41463,"https:\u002F\u002Fgithub.com\u002Fcastle-x\u002Fsonar\u002Fblob\u002Fmain\u002F.legacy\u002Fdatasource\u002F.codebuddy\u002Fskills\u002Fshadcn-ui\u002Fui-reference.md",[96,120,146,170,189,210],{"skillNo":97,"name":98,"nameZh":6,"description":99,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":100,"categories":101,"keywords":106,"publishedAt":49},"01M6PE1J3SKAAEVNCW7NTJ3TWH","tailwind-css-patterns","Comprehensive Tailwind CSS utility-first styling patterns including responsive design, layout utilities, flexbox, grid, spacing, typography, colors, and modern CSS best practices. Use when styling React\u002FVue\u002FSvelte components, building responsive layouts, implementing design systems, or optimizing CSS workflow.","https:\u002F\u002Fgithub.com\u002Fcastle-x\u002Fsonar\u002Fblob\u002Fmain\u002F.legacy\u002Fdatasource\u002F.codebuddy\u002Fskills\u002Ftailwind-css-patterns\u002FSKILL.md",[102,103],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":104,"categoryName":105,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000015","视觉设计",[41,32,107,108,109,110,48,111,47,46,112,113,36,114,115,116,117,118,119,34],"patterns","Tailwind CSS","tailwind css patterns","design","workflow","design systems","styling","responsive design","layout","svelte","utility","Utilities","spacing",{"skillNo":121,"name":122,"nameZh":6,"description":123,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":124,"categories":125,"keywords":133,"publishedAt":49},"01M6PDZXXE4RRAVMJB5JH8S7B7","react-patterns","Comprehensive React 19 patterns expert covering Server Components, Actions, use() hook, useOptimistic, useFormStatus, useFormState, React Compiler, concurrent features, Suspense, and modern TypeScript development. Proactively use for any React development, component architecture, state management, performance optimization, or when implementing React 19's latest features.","https:\u002F\u002Fgithub.com\u002Fcastle-x\u002Fsonar\u002Fblob\u002Fmain\u002F.legacy\u002Fdatasource\u002F.codebuddy\u002Fskills\u002Freact-patterns\u002FSKILL.md",[126,129,130],{"categoryNo":127,"categoryName":128,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000008","测试与质量",{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":131,"categoryName":132,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000010","后端与接口",[46,134,107,135,136,137,47,44,138,139,140,141,40,38,142,36,143,144,145,34],"react patterns","testing","frontend","performance","architecture","component architecture","server","actions","hooks","expert","react 19","Server Components",{"skillNo":147,"name":148,"nameZh":6,"description":149,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":150,"categories":151,"keywords":153,"publishedAt":49},"01M6PDZK79YYADCGJTJDBRK1HQ","vercel-react-native-skills","React Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing animations, or working with native modules. Triggers on tasks involving React Native, Expo, mobile performance, or native platform APIs.","https:\u002F\u002Fgithub.com\u002Fcastle-x\u002Fsonar\u002Fblob\u002Fmain\u002F.legacy\u002Fdatasource\u002F.codebuddy\u002Fskills\u002Freact-native-skills\u002FSKILL.md",[152],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},[46,154,155,156,157,158,137,47,159,160,161,162,163,164,165,166,167,34,168,169],"vercel react native skills","react native","vercel","react native skills","native","tasks","best practices","use","modules","platform","triggers","apps","react native components","with","for","animations",{"skillNo":171,"name":172,"nameZh":6,"description":173,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":174,"categories":175,"keywords":177,"publishedAt":49},"01M6PDZ8YY9QHYZQFWHAFJSJGK","vercel-react-best-practices","React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React\u002FNext.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.","https:\u002F\u002Fgithub.com\u002Fcastle-x\u002Fsonar\u002Fblob\u002Fmain\u002F.legacy\u002Fdatasource\u002F.codebuddy\u002Fskills\u002Freact-best-practices\u002FSKILL.md",[176],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},[46,178,160,179,156,180,137,47,45,181,159,182,183,184,185,107,186,187,164,188],"vercel react best practices","react best practices","writing","guidelines","code","Optimization","data","refactoring","next","pages","data fetching",{"skillNo":190,"name":191,"nameZh":6,"description":192,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":193,"categories":194,"keywords":195,"publishedAt":49},"01M6PDR22TXCNQ5220G6Y1WZ83","openspec-verify-change","Verify implementation matches change artifacts. Use when the user wants to validate that implementation is complete, correct, and coherent before archiving.","https:\u002F\u002Fgithub.com\u002Fcastle-x\u002Fsonar\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fopenspec-verify-change\u002FSKILL.md",[],[196,197,198,199,200,201,202,203,204,205,161,206,207,208,209],"change","openspec verify change","verify","verify change","openspec","cli","validate","artifacts","correct","user","implementation","coherent","verify implementation","complete",{"skillNo":211,"name":212,"nameZh":6,"description":213,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":214,"categories":215,"keywords":216,"publishedAt":49},"01M6PDQXE5GP17RTMCFJ8TQCQT","openspec-sync-specs","Sync delta specs from a change to main specs. Use when the user wants to update main specs with changes from a delta spec, without archiving the change.","https:\u002F\u002Fgithub.com\u002Fcastle-x\u002Fsonar\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fopenspec-sync-specs\u002FSKILL.md",[],[217,218,200,201,219,196,220,205,161,221,57,167,222],"sync","openspec sync specs","spec","update","delta","changes"]