[{"data":1,"prerenderedAt":698},["ShallowReactive",2],{"navigation":3,"$fMW9jOOkNpZriWVK3P_bZYNOyYR2IEPvrHsC7cDBlJJc":408,"/docs/skills":421,"surround-/docs/skills":696},[4],{"title":5,"path":6,"stem":7,"children":8,"page":18},"Docs","/docs","docs",[9,273,299,317,330,356],{"title":10,"path":11,"stem":12,"children":13,"new":18,"type":272},"Components","/docs/components","docs/02.components",[14,20,24,28,32,36,40,44,48,52,56,60,64,68,72,76,80,84,88,92,96,100,104,108,112,116,120,124,128,132,136,140,144,148,152,156,160,164,168,172,176,180,184,188,192,196,200,204,208,212,216,220,224,228,232,236,240,244,248,252,256,260,264,268],{"title":15,"path":16,"stem":17,"new":18,"type":19,"children":-1},"Accordion","/docs/components/accordion","docs/components/accordion",false,"component",{"title":21,"path":22,"stem":23,"new":18,"type":19,"children":-1},"Alert","/docs/components/alert","docs/components/alert",{"title":25,"path":26,"stem":27,"new":18,"type":19,"children":-1},"Alert Dialog","/docs/components/alert-dialog","docs/components/alert-dialog",{"title":29,"path":30,"stem":31,"new":18,"type":19,"children":-1},"Aspect Ratio","/docs/components/aspect-ratio","docs/components/aspect-ratio",{"title":33,"path":34,"stem":35,"new":18,"type":19,"children":-1},"Avatar","/docs/components/avatar","docs/components/avatar",{"title":37,"path":38,"stem":39,"new":18,"type":19,"children":-1},"Badge","/docs/components/badge","docs/components/badge",{"title":41,"path":42,"stem":43,"new":18,"type":19,"children":-1},"Breadcrumb","/docs/components/breadcrumb","docs/components/breadcrumb",{"title":45,"path":46,"stem":47,"new":18,"type":19,"children":-1},"Button","/docs/components/button","docs/components/button",{"title":49,"path":50,"stem":51,"new":18,"type":19,"children":-1},"Button Group","/docs/components/button-group","docs/components/button-group",{"title":53,"path":54,"stem":55,"new":18,"type":19,"children":-1},"Calendar","/docs/components/calendar","docs/components/calendar",{"title":57,"path":58,"stem":59,"new":18,"type":19,"children":-1},"Card","/docs/components/card","docs/components/card",{"title":61,"path":62,"stem":63,"new":18,"type":19,"children":-1},"Carousel","/docs/components/carousel","docs/components/carousel",{"title":65,"path":66,"stem":67,"new":18,"type":19,"children":-1},"Chart","/docs/components/chart","docs/components/chart",{"title":69,"path":70,"stem":71,"new":18,"type":19,"children":-1},"Checkbox","/docs/components/checkbox","docs/components/checkbox",{"title":73,"path":74,"stem":75,"new":18,"type":19,"children":-1},"Collapsible","/docs/components/collapsible","docs/components/collapsible",{"title":77,"path":78,"stem":79,"new":18,"type":19,"children":-1},"Combobox","/docs/components/combobox","docs/components/combobox",{"title":81,"path":82,"stem":83,"new":18,"type":19,"children":-1},"Command","/docs/components/command","docs/components/command",{"title":85,"path":86,"stem":87,"new":18,"type":19,"children":-1},"Context Menu","/docs/components/context-menu","docs/components/context-menu",{"title":89,"path":90,"stem":91,"new":18,"type":19,"children":-1},"Data Table","/docs/components/data-table","docs/components/data-table",{"title":93,"path":94,"stem":95,"new":18,"type":19,"children":-1},"Date Picker","/docs/components/date-picker","docs/components/date-picker",{"title":97,"path":98,"stem":99,"new":18,"type":19,"children":-1},"Dialog","/docs/components/dialog","docs/components/dialog",{"title":101,"path":102,"stem":103,"new":18,"type":19,"children":-1},"Drawer","/docs/components/drawer","docs/components/drawer",{"title":105,"path":106,"stem":107,"new":18,"type":19,"children":-1},"Dropdown Menu","/docs/components/dropdown-menu","docs/components/dropdown-menu",{"title":109,"path":110,"stem":111,"new":18,"type":19,"children":-1},"Empty","/docs/components/empty","docs/components/empty",{"title":113,"path":114,"stem":115,"new":18,"type":19,"children":-1},"Field","/docs/components/field","docs/components/field",{"title":117,"path":118,"stem":119,"new":18,"type":19,"children":-1},"Form","/docs/components/form","docs/components/form",{"title":121,"path":122,"stem":123,"new":18,"type":19,"children":-1},"Hover Card","/docs/components/hover-card","docs/components/hover-card",{"title":125,"path":126,"stem":127,"new":18,"type":19,"children":-1},"Input","/docs/components/input","docs/components/input",{"title":129,"path":130,"stem":131,"new":18,"type":19,"children":-1},"Input Group","/docs/components/input-group","docs/components/input-group",{"title":133,"path":134,"stem":135,"new":18,"type":19,"children":-1},"Input OTP","/docs/components/input-otp","docs/components/input-otp",{"title":137,"path":138,"stem":139,"new":18,"type":19,"children":-1},"Item","/docs/components/item","docs/components/item",{"title":141,"path":142,"stem":143,"new":18,"type":19,"children":-1},"Kbd","/docs/components/kbd","docs/components/kbd",{"title":145,"path":146,"stem":147,"new":18,"type":19,"children":-1},"Label","/docs/components/label","docs/components/label",{"title":149,"path":150,"stem":151,"new":18,"type":19,"children":-1},"Menubar","/docs/components/menubar","docs/components/menubar",{"title":153,"path":154,"stem":155,"new":18,"type":19,"children":-1},"Native Select","/docs/components/native-select","docs/components/native-select",{"title":157,"path":158,"stem":159,"new":18,"type":19,"children":-1},"Navigation Menu","/docs/components/navigation-menu","docs/components/navigation-menu",{"title":161,"path":162,"stem":163,"new":18,"type":19,"children":-1},"Number Field","/docs/components/number-field","docs/components/number-field",{"title":165,"path":166,"stem":167,"new":18,"type":19,"children":-1},"Pagination","/docs/components/pagination","docs/components/pagination",{"title":169,"path":170,"stem":171,"new":18,"type":19,"children":-1},"Pin Input","/docs/components/pin-input","docs/components/pin-input",{"title":173,"path":174,"stem":175,"new":18,"type":19,"children":-1},"Popover","/docs/components/popover","docs/components/popover",{"title":177,"path":178,"stem":179,"new":18,"type":19,"children":-1},"Progress","/docs/components/progress","docs/components/progress",{"title":181,"path":182,"stem":183,"new":18,"type":19,"children":-1},"Radio Group","/docs/components/radio-group","docs/components/radio-group",{"title":185,"path":186,"stem":187,"new":18,"type":19,"children":-1},"Range Calendar","/docs/components/range-calendar","docs/components/range-calendar",{"title":189,"path":190,"stem":191,"new":18,"type":19,"children":-1},"Resizable","/docs/components/resizable","docs/components/resizable",{"title":193,"path":194,"stem":195,"new":18,"type":19,"children":-1},"Scroll Area","/docs/components/scroll-area","docs/components/scroll-area",{"title":197,"path":198,"stem":199,"new":18,"type":19,"children":-1},"Select","/docs/components/select","docs/components/select",{"title":201,"path":202,"stem":203,"new":18,"type":19,"children":-1},"Separator","/docs/components/separator","docs/components/separator",{"title":205,"path":206,"stem":207,"new":18,"type":19,"children":-1},"Sheet","/docs/components/sheet","docs/components/sheet",{"title":209,"path":210,"stem":211,"new":18,"type":19,"children":-1},"Sidebar","/docs/components/sidebar","docs/components/sidebar",{"title":213,"path":214,"stem":215,"new":18,"type":19,"children":-1},"Skeleton","/docs/components/skeleton","docs/components/skeleton",{"title":217,"path":218,"stem":219,"new":18,"type":19,"children":-1},"Slider","/docs/components/slider","docs/components/slider",{"title":221,"path":222,"stem":223,"new":18,"type":19,"children":-1},"Sonner","/docs/components/sonner","docs/components/sonner",{"title":225,"path":226,"stem":227,"new":18,"type":19,"children":-1},"Spinner","/docs/components/spinner","docs/components/spinner",{"title":229,"path":230,"stem":231,"new":18,"type":19,"children":-1},"Stepper","/docs/components/stepper","docs/components/stepper",{"title":233,"path":234,"stem":235,"new":18,"type":19,"children":-1},"Switch","/docs/components/switch","docs/components/switch",{"title":237,"path":238,"stem":239,"new":18,"type":19,"children":-1},"Table","/docs/components/table","docs/components/table",{"title":241,"path":242,"stem":243,"new":18,"type":19,"children":-1},"Tabs","/docs/components/tabs","docs/components/tabs",{"title":245,"path":246,"stem":247,"new":18,"type":19,"children":-1},"Tags Input","/docs/components/tags-input","docs/components/tags-input",{"title":249,"path":250,"stem":251,"new":18,"type":19,"children":-1},"Textarea","/docs/components/textarea","docs/components/textarea",{"title":253,"path":254,"stem":255,"new":18,"type":19,"children":-1},"Toast","/docs/components/toast","docs/components/toast",{"title":257,"path":258,"stem":259,"new":18,"type":19,"children":-1},"Toggle","/docs/components/toggle","docs/components/toggle",{"title":261,"path":262,"stem":263,"new":18,"type":19,"children":-1},"Toggle Group","/docs/components/toggle-group","docs/components/toggle-group",{"title":265,"path":266,"stem":267,"new":18,"type":19,"children":-1},"Tooltip","/docs/components/tooltip","docs/components/tooltip",{"title":269,"path":270,"stem":271,"new":18,"type":19,"children":-1},"Typography","/docs/components/typography","docs/components/typography","group",{"title":274,"path":275,"stem":276,"children":277,"new":18,"type":272},"Installation","/docs/installation","docs/02.installation",[278,283,287,291,295],{"title":279,"path":280,"stem":281,"new":18,"type":282,"children":-1},"Vite","/docs/installation/vite","docs/installation/01.vite","page",{"title":284,"path":285,"stem":286,"new":18,"type":282,"children":-1},"Nuxt","/docs/installation/nuxt","docs/installation/02.nuxt",{"title":288,"path":289,"stem":290,"new":18,"type":282,"children":-1},"Astro","/docs/installation/astro","docs/installation/03.astro",{"title":292,"path":293,"stem":294,"new":18,"type":282,"children":-1},"Laravel","/docs/installation/laravel","docs/installation/04.laravel",{"title":296,"path":297,"stem":298,"new":18,"type":282,"children":-1},"Manual Installation","/docs/installation/manual","docs/installation/05.manual",{"title":300,"path":301,"stem":302,"children":303,"new":18,"type":272},"Dark Mode","/docs/dark-mode","docs/05.dark-mode",[304,307,310,314],{"title":279,"path":305,"stem":306,"new":18,"type":282,"children":-1},"/docs/dark-mode/vite","docs/dark-mode/01.vite",{"title":284,"path":308,"stem":309,"new":18,"type":282,"children":-1},"/docs/dark-mode/nuxt","docs/dark-mode/02.nuxt",{"title":311,"path":312,"stem":313,"new":18,"type":282,"children":-1},"Vitepress","/docs/dark-mode/vitepress","docs/dark-mode/03.vitepress",{"title":288,"path":315,"stem":316,"new":18,"type":282,"children":-1},"/docs/dark-mode/astro","docs/dark-mode/04.astro",{"title":318,"path":319,"stem":320,"children":321,"new":18,"type":272},"Forms","/docs/forms","docs/forms",[322,326],{"title":323,"path":324,"stem":325,"new":18,"type":282,"children":-1},"VeeValidate","/docs/forms/vee-validate","docs/forms/01.vee-validate",{"title":327,"path":328,"stem":329,"new":18,"type":282,"children":-1},"TanStack Form","/docs/forms/tanstack-form","docs/forms/02.tanstack-form",{"title":331,"path":332,"stem":333,"children":334,"new":18,"type":272},"Registry","/docs/registry","docs/registry/index",[335,336,340,344,348,352],{"title":331,"path":332,"stem":333,"new":18,"type":282,"children":-1},{"title":337,"path":338,"stem":339,"new":18,"type":282,"children":-1},"Examples","/docs/registry/examples","docs/registry/examples",{"title":341,"path":342,"stem":343,"new":18,"type":282,"children":-1},"FAQ","/docs/registry/faq","docs/registry/faq",{"title":345,"path":346,"stem":347,"new":18,"type":282,"children":-1},"Getting Started","/docs/registry/getting-started","docs/registry/getting-started",{"title":349,"path":350,"stem":351,"new":18,"type":282,"children":-1},"registry-item.json","/docs/registry/registry-item-json","docs/registry/registry-item-json",{"title":353,"path":354,"stem":355,"new":18,"type":282,"children":-1},"registry.json","/docs/registry/registry-json","docs/registry/registry-json",{"path":6,"stem":7,"title":357,"type":272,"children":358},"Get Started",[359,363,370,374,378,384,388,392,396,400,404],{"title":360,"path":361,"stem":362,"new":18,"type":282,"children":-1},"Introduction","/docs/introduction","docs/01.introduction",{"title":274,"path":275,"stem":276,"children":364,"new":18,"type":272},[365,366,367,368,369],{"title":279,"path":280,"stem":281,"new":18,"type":282,"children":-1},{"title":284,"path":285,"stem":286,"new":18,"type":282,"children":-1},{"title":288,"path":289,"stem":290,"new":18,"type":282,"children":-1},{"title":292,"path":293,"stem":294,"new":18,"type":282,"children":-1},{"title":296,"path":297,"stem":298,"new":18,"type":282,"children":-1},{"title":371,"path":372,"stem":373,"new":18,"type":282,"children":-1},"components.json","/docs/components-json","docs/03.components-json",{"title":375,"path":376,"stem":377,"new":18,"type":282,"children":-1},"Theming","/docs/theming","docs/04.theming",{"title":300,"path":301,"stem":302,"children":379,"new":18,"type":272},[380,381,382,383],{"title":279,"path":305,"stem":306,"new":18,"type":282,"children":-1},{"title":284,"path":308,"stem":309,"new":18,"type":282,"children":-1},{"title":311,"path":312,"stem":313,"new":18,"type":282,"children":-1},{"title":288,"path":315,"stem":316,"new":18,"type":282,"children":-1},{"title":385,"path":386,"stem":387,"new":18,"type":282,"children":-1},"CLI","/docs/cli","docs/06.cli",{"title":389,"path":390,"stem":391,"new":18,"type":282,"children":-1},"JavaScript","/docs/javascript","docs/07.javascript",{"title":393,"path":394,"stem":395,"new":18,"type":282,"children":-1},"Figma","/docs/figma","docs/09.figma",{"title":397,"path":398,"stem":399,"new":18,"type":282,"children":-1},"Changelog","/docs/changelog","docs/10.changelog",{"title":401,"path":402,"stem":403,"new":18,"type":282,"children":-1},"Legacy Docs","/docs/legacy","docs/11.legacy",{"title":405,"path":406,"stem":407,"new":18,"type":282,"children":-1},"Skills","/docs/skills","docs/skills",{"repo":409},{"id":410,"name":411,"repo":412,"description":413,"createdAt":414,"updatedAt":415,"pushedAt":416,"stars":417,"watchers":418,"forks":419,"defaultBranch":420},658791894,"shadcn-vue","unovue/shadcn-vue","Vue port of shadcn-ui","2023-06-26T13:53:23Z","2026-05-11T08:33:37Z","2026-04-18T09:28:34Z",9908,38,646,"dev",{"id":422,"title":405,"body":423,"description":688,"extension":689,"links":690,"meta":691,"navigation":692,"new":18,"path":406,"rawbody":693,"seo":694,"stem":407,"__hash__":695},"content/docs/skills.md",{"type":424,"value":425,"toc":674},"minimark",[426,430,433,463,470,473,478,488,491,502,504,508,511,516,527,531,560,564,567,571,577,581,584,586,590,639,643],[427,428,429],"p",{},"Skills give AI assistants like Claude Code project-aware context about shadcn-vue. When installed, your AI assistant knows how to find, install, compose, and customize components using the correct APIs and patterns for your project.",[427,431,432],{},"For example, you can ask your AI assistant to:",[434,435,436,443,448,453],"ul",{},[437,438,439],"li",{},[440,441,442],"em",{},"\"Add a login form with email and password fields.\"",[437,444,445],{},[440,446,447],{},"\"Create a settings page with a form for updating profile information.\"",[437,449,450],{},[440,451,452],{},"\"Build a dashboard with a sidebar, stats cards, and a data table.\"",[437,454,455],{},[440,456,457,458,462],{},"\"Switch to --preset ",[459,460,461],"span",{},"CODE","\"",[427,464,465,466,469],{},"The skill reads your project's ",[467,468,371],"code",{}," and provides the assistant with your framework, aliases, installed components, icon library, and base library so it can generate correct code on the first try.",[471,472],"hr",{},[474,475,477],"h2",{"id":476},"install","Install",[479,480,486],"pre",{"className":481,"code":483,"language":484,"meta":485},[482],"language-bash","npx skills add unovue/shadcn-vue\n","bash","",[467,487,483],{"__ignoreMap":485},[427,489,490],{},"This installs the shadcn-vue skill into your project. Once installed, your AI assistant automatically loads it when working with shadcn-vue components.",[427,492,493,494,501],{},"Learn more about skills at ",[495,496,500],"a",{"href":497,"rel":498},"https://skills.sh",[499],"nofollow","skills.sh",".",[471,503],{},[474,505,507],{"id":506},"whats-included","What's Included",[427,509,510],{},"The skill provides your AI assistant with the following knowledge:",[512,513,515],"h3",{"id":514},"project-context","Project Context",[427,517,518,519,522,523,526],{},"On every interaction, the skill runs ",[467,520,521],{},"shadcn-vue info --json"," to get your project's configuration: framework, Tailwind version, aliases, base library (",[467,524,525],{},"reka","), icon library, installed components, and resolved file paths.",[512,528,530],{"id":529},"cli-commands","CLI Commands",[427,532,533,534,537,538,537,541,537,544,537,547,537,549,537,552,555,556,559],{},"Full reference for all CLI commands: ",[467,535,536],{},"init",", ",[467,539,540],{},"add",[467,542,543],{},"search",[467,545,546],{},"view",[467,548,7],{},[467,550,551],{},"diff",[467,553,554],{},"info",", and ",[467,557,558],{},"build",". Includes flags, smart merge workflows, presets, and templates.",[512,561,563],{"id":562},"theming-and-customization","Theming and Customization",[427,565,566],{},"How CSS variables, OKLCH colors, dark mode, custom colors, border radius, and component variants work. Includes guidance for both Tailwind v3 and v4.",[512,568,570],{"id":569},"registry-authoring","Registry Authoring",[427,572,573,574,576],{},"How to build and publish custom component registries: ",[467,575,353],{}," format, item types, file objects, dependencies, CSS variables, building, hosting, and user configuration.",[512,578,580],{"id":579},"mcp-server","MCP Server",[427,582,583],{},"Setup and tools for the shadcn-vue MCP server, which lets AI assistants search, browse, and install components from registries.",[471,585],{},[474,587,589],{"id":588},"how-it-works","How It Works",[591,592,593,603,612,626],"ol",{},[437,594,595,599,600,602],{},[596,597,598],"strong",{},"Project detection"," — The skill activates when it finds a ",[467,601,371],{}," file in your project.",[437,604,605,608,609,611],{},[596,606,607],{},"Context injection"," — It runs ",[467,610,521],{}," to read your project configuration and injects the result into the assistant's context.",[437,613,614,617,618,621,622,625],{},[596,615,616],{},"Pattern enforcement"," — The assistant follows shadcn-vue composition rules: using ",[467,619,620],{},"FieldGroup"," for forms, ",[467,623,624],{},"ToggleGroup"," for option sets, semantic colors, and correct base-specific APIs.",[437,627,628,631,632,537,635,638],{},[596,629,630],{},"Component discovery"," — The assistant uses ",[467,633,634],{},"shadcn-vue docs",[467,636,637],{},"shadcn-vue search",", or MCP tools to find components and their documentation before generating code.",[474,640,642],{"id":641},"learn-more","Learn More",[434,644,645,651,657,663,668],{},[437,646,647,650],{},[495,648,385],{"href":649},"/docs/06.cli"," — Full CLI command reference",[437,652,653,656],{},[495,654,580],{"href":655},"/docs/mcp"," — Connect the MCP server for registry access",[437,658,659,662],{},[495,660,375],{"href":661},"/docs/04.theming"," — CSS variables and customization",[437,664,665,667],{},[495,666,331],{"href":332}," — Building and publishing custom registries",[437,669,670,673],{},[495,671,500],{"href":497,"rel":672},[499]," — Learn more about AI skills",{"title":485,"searchDepth":675,"depth":675,"links":676},2,[677,678,686,687],{"id":476,"depth":675,"text":477},{"id":506,"depth":675,"text":507,"children":679},[680,682,683,684,685],{"id":514,"depth":681,"text":515},3,{"id":529,"depth":681,"text":530},{"id":562,"depth":681,"text":563},{"id":569,"depth":681,"text":570},{"id":579,"depth":681,"text":580},{"id":588,"depth":675,"text":589},{"id":641,"depth":675,"text":642},"Give your AI assistant deep knowledge of shadcn-vue components, patterns, and best practices.","md",null,{},true,"---\ntitle: Skills\ndescription: Give your AI assistant deep knowledge of shadcn-vue components, patterns, and best practices.\n---\n\nSkills give AI assistants like Claude Code project-aware context about shadcn-vue. When installed, your AI assistant knows how to find, install, compose, and customize components using the correct APIs and patterns for your project.\n\nFor example, you can ask your AI assistant to:\n\n- _\"Add a login form with email and password fields.\"_\n- _\"Create a settings page with a form for updating profile information.\"_\n- _\"Build a dashboard with a sidebar, stats cards, and a data table.\"_\n- _\"Switch to --preset [CODE]\"_\n\nThe skill reads your project's `components.json` and provides the assistant with your framework, aliases, installed components, icon library, and base library so it can generate correct code on the first try.\n\n---\n\n## Install\n\n```bash\nnpx skills add unovue/shadcn-vue\n```\n\nThis installs the shadcn-vue skill into your project. Once installed, your AI assistant automatically loads it when working with shadcn-vue components.\n\nLearn more about skills at [skills.sh](https://skills.sh).\n\n---\n\n## What's Included\n\nThe skill provides your AI assistant with the following knowledge:\n\n### Project Context\n\nOn every interaction, the skill runs `shadcn-vue info --json` to get your project's configuration: framework, Tailwind version, aliases, base library (`reka`), icon library, installed components, and resolved file paths.\n\n### CLI Commands\n\nFull reference for all CLI commands: `init`, `add`, `search`, `view`, `docs`, `diff`, `info`, and `build`. Includes flags, smart merge workflows, presets, and templates.\n\n### Theming and Customization\n\nHow CSS variables, OKLCH colors, dark mode, custom colors, border radius, and component variants work. Includes guidance for both Tailwind v3 and v4.\n\n### Registry Authoring\n\nHow to build and publish custom component registries: `registry.json` format, item types, file objects, dependencies, CSS variables, building, hosting, and user configuration.\n\n### MCP Server\n\nSetup and tools for the shadcn-vue MCP server, which lets AI assistants search, browse, and install components from registries.\n\n---\n\n## How It Works\n\n1. **Project detection** — The skill activates when it finds a `components.json` file in your project.\n2. **Context injection** — It runs `shadcn-vue info --json` to read your project configuration and injects the result into the assistant's context.\n3. **Pattern enforcement** — The assistant follows shadcn-vue composition rules: using `FieldGroup` for forms, `ToggleGroup` for option sets, semantic colors, and correct base-specific APIs.\n4. **Component discovery** — The assistant uses `shadcn-vue docs`, `shadcn-vue search`, or MCP tools to find components and their documentation before generating code.\n\n## Learn More\n\n- [CLI](/docs/06.cli) — Full CLI command reference\n- [MCP Server](/docs/mcp) — Connect the MCP server for registry access\n- [Theming](/docs/04.theming) — CSS variables and customization\n- [Registry](/docs/registry) — Building and publishing custom registries\n- [skills.sh](https://skills.sh) — Learn more about AI skills\n",{"title":405,"description":688},"GGC7u9CttW-gj61rKdQZyRAzBig2uIIcZTqngmUOAuQ",[697,690],{"title":353,"path":354,"stem":355,"children":-1},1778516989108]