[{"data":1,"prerenderedAt":954},["ShallowReactive",2],{"navigation":3,"$fMW9jOOkNpZriWVK3P_bZYNOyYR2IEPvrHsC7cDBlJJc":405,"/docs/registry/registry-item-json":418,"surround-/docs/registry/registry-item-json":951},[4],{"title":5,"path":6,"stem":7,"children":8,"page":17},"Docs","/docs","docs",[9,90,353,360,366,379],{"path":6,"stem":7,"title":10,"type":11,"children":12},"Get Started","group",[13,19,44,48,52,70,74,78,82,86],{"title":14,"path":15,"stem":16,"new":17,"type":18,"children":-1},"Introduction","/docs/introduction","docs/01.introduction",false,"page",{"title":20,"path":21,"stem":22,"children":23,"new":17,"type":11},"Installation","/docs/installation","docs/02.installation",[24,28,32,36,40],{"title":25,"path":26,"stem":27,"new":17,"type":18,"children":-1},"Vite","/docs/installation/vite","docs/installation/01.vite",{"title":29,"path":30,"stem":31,"new":17,"type":18,"children":-1},"Nuxt","/docs/installation/nuxt","docs/installation/02.nuxt",{"title":33,"path":34,"stem":35,"new":17,"type":18,"children":-1},"Astro","/docs/installation/astro","docs/installation/03.astro",{"title":37,"path":38,"stem":39,"new":17,"type":18,"children":-1},"Laravel","/docs/installation/laravel","docs/installation/04.laravel",{"title":41,"path":42,"stem":43,"new":17,"type":18,"children":-1},"Manual Installation","/docs/installation/manual","docs/installation/05.manual",{"title":45,"path":46,"stem":47,"new":17,"type":18,"children":-1},"components.json","/docs/components-json","docs/03.components-json",{"title":49,"path":50,"stem":51,"new":17,"type":18,"children":-1},"Theming","/docs/theming","docs/04.theming",{"title":53,"path":54,"stem":55,"children":56,"new":17,"type":11},"Dark Mode","/docs/dark-mode","docs/05.dark-mode",[57,60,63,67],{"title":25,"path":58,"stem":59,"new":17,"type":18,"children":-1},"/docs/dark-mode/vite","docs/dark-mode/01.vite",{"title":29,"path":61,"stem":62,"new":17,"type":18,"children":-1},"/docs/dark-mode/nuxt","docs/dark-mode/02.nuxt",{"title":64,"path":65,"stem":66,"new":17,"type":18,"children":-1},"Vitepress","/docs/dark-mode/vitepress","docs/dark-mode/03.vitepress",{"title":33,"path":68,"stem":69,"new":17,"type":18,"children":-1},"/docs/dark-mode/astro","docs/dark-mode/04.astro",{"title":71,"path":72,"stem":73,"new":17,"type":18,"children":-1},"CLI","/docs/cli","docs/06.cli",{"title":75,"path":76,"stem":77,"new":17,"type":18,"children":-1},"JavaScript","/docs/javascript","docs/07.javascript",{"title":79,"path":80,"stem":81,"new":17,"type":18,"children":-1},"Figma","/docs/figma","docs/09.figma",{"title":83,"path":84,"stem":85,"new":17,"type":18,"children":-1},"Changelog","/docs/changelog","docs/10.changelog",{"title":87,"path":88,"stem":89,"new":17,"type":18,"children":-1},"Legacy Docs","/docs/legacy","docs/11.legacy",{"title":91,"path":92,"stem":93,"children":94,"new":17,"type":11},"Components","/docs/components","docs/02.components",[95,100,104,108,112,116,120,124,128,133,137,141,145,149,153,157,161,165,169,173,177,181,185,189,193,197,201,205,209,213,217,221,225,229,233,237,241,245,249,253,257,261,265,269,273,277,281,285,289,293,297,301,305,309,313,317,321,325,329,333,337,341,345,349],{"title":96,"path":97,"stem":98,"new":17,"type":99,"children":-1},"Accordion","/docs/components/accordion","docs/components/accordion","component",{"title":101,"path":102,"stem":103,"new":17,"type":99,"children":-1},"Alert","/docs/components/alert","docs/components/alert",{"title":105,"path":106,"stem":107,"new":17,"type":99,"children":-1},"Alert Dialog","/docs/components/alert-dialog","docs/components/alert-dialog",{"title":109,"path":110,"stem":111,"new":17,"type":99,"children":-1},"Aspect Ratio","/docs/components/aspect-ratio","docs/components/aspect-ratio",{"title":113,"path":114,"stem":115,"new":17,"type":99,"children":-1},"Avatar","/docs/components/avatar","docs/components/avatar",{"title":117,"path":118,"stem":119,"new":17,"type":99,"children":-1},"Badge","/docs/components/badge","docs/components/badge",{"title":121,"path":122,"stem":123,"new":17,"type":99,"children":-1},"Breadcrumb","/docs/components/breadcrumb","docs/components/breadcrumb",{"title":125,"path":126,"stem":127,"new":17,"type":99,"children":-1},"Button","/docs/components/button","docs/components/button",{"title":129,"path":130,"stem":131,"new":132,"type":99,"children":-1},"Button Group","/docs/components/button-group","docs/components/button-group",true,{"title":134,"path":135,"stem":136,"new":17,"type":99,"children":-1},"Calendar","/docs/components/calendar","docs/components/calendar",{"title":138,"path":139,"stem":140,"new":17,"type":99,"children":-1},"Card","/docs/components/card","docs/components/card",{"title":142,"path":143,"stem":144,"new":17,"type":99,"children":-1},"Carousel","/docs/components/carousel","docs/components/carousel",{"title":146,"path":147,"stem":148,"new":17,"type":99,"children":-1},"Chart","/docs/components/chart","docs/components/chart",{"title":150,"path":151,"stem":152,"new":17,"type":99,"children":-1},"Checkbox","/docs/components/checkbox","docs/components/checkbox",{"title":154,"path":155,"stem":156,"new":17,"type":99,"children":-1},"Collapsible","/docs/components/collapsible","docs/components/collapsible",{"title":158,"path":159,"stem":160,"new":17,"type":99,"children":-1},"Combobox","/docs/components/combobox","docs/components/combobox",{"title":162,"path":163,"stem":164,"new":17,"type":99,"children":-1},"Command","/docs/components/command","docs/components/command",{"title":166,"path":167,"stem":168,"new":17,"type":99,"children":-1},"Context Menu","/docs/components/context-menu","docs/components/context-menu",{"title":170,"path":171,"stem":172,"new":17,"type":99,"children":-1},"Data Table","/docs/components/data-table","docs/components/data-table",{"title":174,"path":175,"stem":176,"new":17,"type":99,"children":-1},"Date Picker","/docs/components/date-picker","docs/components/date-picker",{"title":178,"path":179,"stem":180,"new":17,"type":99,"children":-1},"Dialog","/docs/components/dialog","docs/components/dialog",{"title":182,"path":183,"stem":184,"new":17,"type":99,"children":-1},"Drawer","/docs/components/drawer","docs/components/drawer",{"title":186,"path":187,"stem":188,"new":17,"type":99,"children":-1},"Dropdown Menu","/docs/components/dropdown-menu","docs/components/dropdown-menu",{"title":190,"path":191,"stem":192,"new":132,"type":99,"children":-1},"Empty","/docs/components/empty","docs/components/empty",{"title":194,"path":195,"stem":196,"new":132,"type":99,"children":-1},"Field","/docs/components/field","docs/components/field",{"title":198,"path":199,"stem":200,"new":17,"type":99,"children":-1},"Form","/docs/components/form","docs/components/form",{"title":202,"path":203,"stem":204,"new":17,"type":99,"children":-1},"Hover Card","/docs/components/hover-card","docs/components/hover-card",{"title":206,"path":207,"stem":208,"new":17,"type":99,"children":-1},"Input","/docs/components/input","docs/components/input",{"title":210,"path":211,"stem":212,"new":132,"type":99,"children":-1},"Input Group","/docs/components/input-group","docs/components/input-group",{"title":214,"path":215,"stem":216,"new":17,"type":99,"children":-1},"Input OTP","/docs/components/input-otp","docs/components/input-otp",{"title":218,"path":219,"stem":220,"new":132,"type":99,"children":-1},"Item","/docs/components/item","docs/components/item",{"title":222,"path":223,"stem":224,"new":132,"type":99,"children":-1},"Kbd","/docs/components/kbd","docs/components/kbd",{"title":226,"path":227,"stem":228,"new":17,"type":99,"children":-1},"Label","/docs/components/label","docs/components/label",{"title":230,"path":231,"stem":232,"new":17,"type":99,"children":-1},"Menubar","/docs/components/menubar","docs/components/menubar",{"title":234,"path":235,"stem":236,"new":132,"type":99,"children":-1},"Native Select","/docs/components/native-select","docs/components/native-select",{"title":238,"path":239,"stem":240,"new":17,"type":99,"children":-1},"Navigation Menu","/docs/components/navigation-menu","docs/components/navigation-menu",{"title":242,"path":243,"stem":244,"new":17,"type":99,"children":-1},"Number Field","/docs/components/number-field","docs/components/number-field",{"title":246,"path":247,"stem":248,"new":17,"type":99,"children":-1},"Pagination","/docs/components/pagination","docs/components/pagination",{"title":250,"path":251,"stem":252,"new":17,"type":99,"children":-1},"Pin Input","/docs/components/pin-input","docs/components/pin-input",{"title":254,"path":255,"stem":256,"new":17,"type":99,"children":-1},"Popover","/docs/components/popover","docs/components/popover",{"title":258,"path":259,"stem":260,"new":17,"type":99,"children":-1},"Progress","/docs/components/progress","docs/components/progress",{"title":262,"path":263,"stem":264,"new":17,"type":99,"children":-1},"Radio Group","/docs/components/radio-group","docs/components/radio-group",{"title":266,"path":267,"stem":268,"new":17,"type":99,"children":-1},"Range Calendar","/docs/components/range-calendar","docs/components/range-calendar",{"title":270,"path":271,"stem":272,"new":17,"type":99,"children":-1},"Resizable","/docs/components/resizable","docs/components/resizable",{"title":274,"path":275,"stem":276,"new":17,"type":99,"children":-1},"Scroll Area","/docs/components/scroll-area","docs/components/scroll-area",{"title":278,"path":279,"stem":280,"new":17,"type":99,"children":-1},"Select","/docs/components/select","docs/components/select",{"title":282,"path":283,"stem":284,"new":17,"type":99,"children":-1},"Separator","/docs/components/separator","docs/components/separator",{"title":286,"path":287,"stem":288,"new":17,"type":99,"children":-1},"Sheet","/docs/components/sheet","docs/components/sheet",{"title":290,"path":291,"stem":292,"new":17,"type":99,"children":-1},"Sidebar","/docs/components/sidebar","docs/components/sidebar",{"title":294,"path":295,"stem":296,"new":17,"type":99,"children":-1},"Skeleton","/docs/components/skeleton","docs/components/skeleton",{"title":298,"path":299,"stem":300,"new":17,"type":99,"children":-1},"Slider","/docs/components/slider","docs/components/slider",{"title":302,"path":303,"stem":304,"new":17,"type":99,"children":-1},"Sonner","/docs/components/sonner","docs/components/sonner",{"title":306,"path":307,"stem":308,"new":132,"type":99,"children":-1},"Spinner","/docs/components/spinner","docs/components/spinner",{"title":310,"path":311,"stem":312,"new":17,"type":99,"children":-1},"Stepper","/docs/components/stepper","docs/components/stepper",{"title":314,"path":315,"stem":316,"new":17,"type":99,"children":-1},"Switch","/docs/components/switch","docs/components/switch",{"title":318,"path":319,"stem":320,"new":17,"type":99,"children":-1},"Table","/docs/components/table","docs/components/table",{"title":322,"path":323,"stem":324,"new":17,"type":99,"children":-1},"Tabs","/docs/components/tabs","docs/components/tabs",{"title":326,"path":327,"stem":328,"new":17,"type":99,"children":-1},"Tags Input","/docs/components/tags-input","docs/components/tags-input",{"title":330,"path":331,"stem":332,"new":17,"type":99,"children":-1},"Textarea","/docs/components/textarea","docs/components/textarea",{"title":334,"path":335,"stem":336,"new":17,"type":99,"children":-1},"Toast","/docs/components/toast","docs/components/toast",{"title":338,"path":339,"stem":340,"new":17,"type":99,"children":-1},"Toggle","/docs/components/toggle","docs/components/toggle",{"title":342,"path":343,"stem":344,"new":17,"type":99,"children":-1},"Toggle Group","/docs/components/toggle-group","docs/components/toggle-group",{"title":346,"path":347,"stem":348,"new":17,"type":99,"children":-1},"Tooltip","/docs/components/tooltip","docs/components/tooltip",{"title":350,"path":351,"stem":352,"new":17,"type":99,"children":-1},"Typography","/docs/components/typography","docs/components/typography",{"title":20,"path":21,"stem":22,"children":354,"new":17,"type":11},[355,356,357,358,359],{"title":25,"path":26,"stem":27,"new":17,"type":18,"children":-1},{"title":29,"path":30,"stem":31,"new":17,"type":18,"children":-1},{"title":33,"path":34,"stem":35,"new":17,"type":18,"children":-1},{"title":37,"path":38,"stem":39,"new":17,"type":18,"children":-1},{"title":41,"path":42,"stem":43,"new":17,"type":18,"children":-1},{"title":53,"path":54,"stem":55,"children":361,"new":17,"type":11},[362,363,364,365],{"title":25,"path":58,"stem":59,"new":17,"type":18,"children":-1},{"title":29,"path":61,"stem":62,"new":17,"type":18,"children":-1},{"title":64,"path":65,"stem":66,"new":17,"type":18,"children":-1},{"title":33,"path":68,"stem":69,"new":17,"type":18,"children":-1},{"title":367,"path":368,"stem":369,"children":370,"new":17,"type":11},"Forms","/docs/forms","docs/forms",[371,375],{"title":372,"path":373,"stem":374,"new":17,"type":18,"children":-1},"VeeValidate","/docs/forms/vee-validate","docs/forms/01.vee-validate",{"title":376,"path":377,"stem":378,"new":17,"type":18,"children":-1},"TanStack Form","/docs/forms/tanstack-form","docs/forms/02.tanstack-form",{"title":380,"path":381,"stem":382,"children":383,"new":17,"type":11},"Registry","/docs/registry","docs/registry/index",[384,385,389,393,397,401],{"title":380,"path":381,"stem":382,"new":17,"type":18,"children":-1},{"title":386,"path":387,"stem":388,"new":17,"type":18,"children":-1},"Examples","/docs/registry/examples","docs/registry/examples",{"title":390,"path":391,"stem":392,"new":17,"type":18,"children":-1},"FAQ","/docs/registry/faq","docs/registry/faq",{"title":394,"path":395,"stem":396,"new":17,"type":18,"children":-1},"Getting Started","/docs/registry/getting-started","docs/registry/getting-started",{"title":398,"path":399,"stem":400,"new":17,"type":18,"children":-1},"registry-item.json","/docs/registry/registry-item-json","docs/registry/registry-item-json",{"title":402,"path":403,"stem":404,"new":17,"type":18,"children":-1},"registry.json","/docs/registry/registry-json","docs/registry/registry-json",{"repo":406},{"id":407,"name":408,"repo":409,"description":410,"createdAt":411,"updatedAt":412,"pushedAt":413,"stars":414,"watchers":415,"forks":416,"defaultBranch":417},658791894,"shadcn-vue","unovue/shadcn-vue","Vue port of shadcn-ui","2023-06-26T13:53:23Z","2026-04-06T17:33:41Z","2026-04-06T17:33:39Z",9706,37,634,"dev",{"id":419,"title":398,"body":420,"description":944,"extension":945,"links":946,"meta":947,"navigation":132,"new":17,"path":399,"rawbody":948,"seo":949,"stem":400,"__hash__":950},"content/docs/registry/registry-item-json.md",{"type":421,"value":422,"toc":923},"minimark",[423,431,442,447,461,466,474,480,483,488,494,497,500,506,509,514,520,523,528,534,537,627,630,635,638,644,647,656,663,669,673,676,707,713,716,719,734,747,753,756,761,764,773,775,784,793,802,805,815,829,836,842,846,849,855,858,876,882,884,889,895,898,903,909,912,917],[424,425,426,427,430],"p",{},"The ",[428,429,398],"code",{}," schema is used to define your custom registry items.",[432,433,439],"pre",{"className":434,"code":436,"language":437,"meta":438},[435],"language-json","{\n  \"$schema\": \"https://shadcn-vue.com/schema/registry-item.json\",\n  \"name\": \"hello-world\",\n  \"type\": \"registry:block\",\n  \"title\": \"Hello World\",\n  \"description\": \"A simple hello world component.\",\n  \"files\": [\n    {\n      \"path\": \"registry/new-york/HelloWorld/HelloWorld.vue\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/new-york/HelloWorld/useHelloWorld.ts\",\n      \"type\": \"registry:hook\"\n    }\n  ]\n}\n","json","showLineNumbers title=\"registry-item.json\"",[428,440,436],{"__ignoreMap":441},"",[443,444,446],"h2",{"id":445},"definitions","Definitions",[424,448,449,450,452,453,460],{},"You can see the JSON Schema for ",[428,451,398],{}," ",[454,455,459],"a",{"href":456,"rel":457},"https://shadcn-vue.com/schema/registry-item.json",[458],"nofollow","here",".",[462,463,465],"h3",{"id":464},"schema","$schema",[424,467,426,468,470,471,473],{},[428,469,465],{}," property is used to specify the schema for the ",[428,472,398],{}," file.",[432,475,478],{"className":476,"code":477,"language":437,"meta":438},[435],"{\n  \"$schema\": \"https://shadcn-vue.com/schema/registry-item.json\"\n}\n",[428,479,477],{"__ignoreMap":441},[462,481,482],{"id":482},"name",[424,484,426,485,487],{},[428,486,482],{}," property is used to specify the name of your registry item.",[432,489,492],{"className":490,"code":491,"language":437,"meta":438},[435],"{\n  \"name\": \"hello-world\"\n}\n",[428,493,491],{"__ignoreMap":441},[462,495,496],{"id":496},"title",[424,498,499],{},"A human-readable title for your registry item. Keep it short and descriptive.",[432,501,504],{"className":502,"code":503,"language":437,"meta":438},[435],"{\n  \"title\": \"Hello World\"\n}\n",[428,505,503],{"__ignoreMap":441},[462,507,508],{"id":508},"description",[424,510,511,512,460],{},"A description of your registry item. This can be longer and more detailed than the ",[428,513,496],{},[432,515,518],{"className":516,"code":517,"language":437,"meta":438},[435],"{\n  \"description\": \"A simple hello world component.\"\n}\n",[428,519,517],{"__ignoreMap":441},[462,521,522],{"id":522},"type",[424,524,426,525,527],{},[428,526,522],{}," property is used to specify the type of your registry item.",[432,529,532],{"className":530,"code":531,"language":437,"meta":438},[435],"{\n  \"type\": \"registry:block\"\n}\n",[428,533,531],{"__ignoreMap":441},[424,535,536],{},"The following types are supported:",[538,539,540,553],"table",{},[541,542,543],"thead",{},[544,545,546,550],"tr",{},[547,548,549],"th",{},"Type",[547,551,552],{},"Description",[554,555,556,567,577,587,597,607,617],"tbody",{},[544,557,558,564],{},[559,560,561],"td",{},[428,562,563],{},"registry:block",[559,565,566],{},"Use for complex components with multiple files.",[544,568,569,574],{},[559,570,571],{},[428,572,573],{},"registry:component",[559,575,576],{},"Use for simple components.",[544,578,579,584],{},[559,580,581],{},[428,582,583],{},"registry:lib",[559,585,586],{},"Use for lib and utils.",[544,588,589,594],{},[559,590,591],{},[428,592,593],{},"registry:hook",[559,595,596],{},"Use for composables (hooks).",[544,598,599,604],{},[559,600,601],{},[428,602,603],{},"registry:ui",[559,605,606],{},"Use for UI components and single-file primitives",[544,608,609,614],{},[559,610,611],{},[428,612,613],{},"registry:page",[559,615,616],{},"Use for page or file-based routes.",[544,618,619,624],{},[559,620,621],{},[428,622,623],{},"registry:file",[559,625,626],{},"Use for miscellaneous files.",[462,628,629],{"id":629},"author",[424,631,426,632,634],{},[428,633,629],{}," property is used to specify the author of the registry item.",[424,636,637],{},"It can be unique to the registry item or the same as the author of the registry.",[432,639,642],{"className":640,"code":641,"language":437,"meta":438},[435],"{\n  \"author\": \"John Doe \u003Cjohn@doe.com>\"\n}\n",[428,643,641],{"__ignoreMap":441},[462,645,646],{"id":646},"dependencies",[424,648,426,649,651,652,655],{},[428,650,646],{}," property is used to specify the dependencies of your registry item. This is for ",[428,653,654],{},"npm"," packages.",[424,657,658,659,662],{},"Use ",[428,660,661],{},"@version"," to specify the version of your registry item.",[432,664,667],{"className":665,"code":666,"language":437,"meta":438},[435],"{\n  \"dependencies\": [\n    \"reka-ui\",\n    \"zod\",\n    \"lucide-vue-next\",\n    \"name@1.0.2\"\n  ]\n}\n",[428,668,666],{"__ignoreMap":441},[462,670,672],{"id":671},"registrydependencies","registryDependencies",[424,674,675],{},"Used for registry dependencies. Can be names or URLs.",[677,678,679,701],"ul",{},[680,681,682,683,686,687,690,691,690,694,697,698,460],"li",{},"For ",[428,684,685],{},"shadcn/ui"," registry items such as ",[428,688,689],{},"button",", ",[428,692,693],{},"input",[428,695,696],{},"select",", etc use the name eg. ",[428,699,700],{},"['button', 'input', 'select']",[680,702,703,704,460],{},"For custom registry items use the URL of the registry item eg. ",[428,705,706],{},"['https://example.com/r/hello-world.json']",[432,708,711],{"className":709,"code":710,"language":437,"meta":438},[435],"{\n  \"registryDependencies\": [\n    \"button\",\n    \"input\",\n    \"select\",\n    \"https://example.com/r/editor.json\"\n  ]\n}\n",[428,712,710],{"__ignoreMap":441},[424,714,715],{},"Note: The CLI will automatically resolve remote registry dependencies.",[462,717,718],{"id":718},"files",[424,720,426,721,723,724,690,727,729,730,733],{},[428,722,718],{}," property is used to specify the files of your registry item. Each file has a ",[428,725,726],{},"path",[428,728,522],{}," and ",[428,731,732],{},"target"," (optional) property.",[424,735,736],{},[737,738,426,739,741,742,729,744,746],"strong",{},[428,740,732],{}," property is required for ",[428,743,613],{},[428,745,623],{}," types.",[432,748,751],{"className":749,"code":750,"language":437,"meta":438},[435],"{\n  \"files\": [\n    {\n      \"path\": \"registry/new-york/HelloWorld/page.vue\",\n      \"type\": \"registry:page\",\n      \"target\": \"pages/hello/index.vue\"\n    },\n    {\n      \"path\": \"registry/new-york/HelloWorld/HelloWorld.vue\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/new-york/HelloWorld/useHelloWorld.ts\",\n      \"type\": \"registry:hook\"\n    },\n    {\n      \"path\": \"registry/new-york/HelloWorld/.env\",\n      \"type\": \"registry:file\",\n      \"target\": \"~/.env\"\n    }\n  ]\n}\n",[428,752,750],{"__ignoreMap":441},[754,755,726],"h4",{"id":726},[424,757,426,758,760],{},[428,759,726],{}," property is used to specify the path to the file in your registry. This path is used by the build script to parse, transform and build the registry JSON payload.",[754,762,522],{"id":763},"type-1",[424,765,426,766,768,769,772],{},[428,767,522],{}," property is used to specify the type of the file. See the ",[454,770,522],{"href":771},"#type"," section for more information.",[754,774,732],{"id":732},[424,776,426,777,779,780,729,782,746],{},[428,778,732],{}," property is used to indicate where the file should be placed in a project. This is optional and only required for ",[428,781,613],{},[428,783,623],{},[424,785,786,787,789,790,792],{},"By default, the ",[428,788,408],{}," cli will read a project's ",[428,791,45],{}," file to determine the target path. For some files, such as routes or config you can specify the target path manually.",[424,794,658,795,798,799,460],{},[428,796,797],{},"~"," to refer to the root of the project e.g ",[428,800,801],{},"~/foo.config.js",[462,803,804],{"id":804},"tailwind",[424,806,807,810,811,814],{},[737,808,809],{},"DEPRECATED:"," Use ",[428,812,813],{},"cssVars.theme"," instead for Tailwind v4 projects.",[424,816,426,817,819,820,690,823,729,826,460],{},[428,818,804],{}," property is used for tailwind configuration such as ",[428,821,822],{},"theme",[428,824,825],{},"plugins",[428,827,828],{},"content",[424,830,831,832,835],{},"You can use the ",[428,833,834],{},"tailwind.config"," property to add colors, animations and plugins to your registry item.",[432,837,840],{"className":838,"code":839,"language":437,"meta":438},[435],"{\n  \"tailwind\": {\n    \"config\": {\n      \"theme\": {\n        \"extend\": {\n          \"colors\": {\n            \"brand\": \"hsl(var(--brand))\"\n          },\n          \"keyframes\": {\n            \"wiggle\": {\n              \"0%, 100%\": { \"transform\": \"rotate(-3deg)\" },\n              \"50%\": { \"transform\": \"rotate(3deg)\" }\n            }\n          },\n          \"animation\": {\n            \"wiggle\": \"wiggle 1s ease-in-out infinite\"\n          }\n        }\n      }\n    }\n  }\n}\n",[428,841,839],{"__ignoreMap":441},[462,843,845],{"id":844},"cssvars","cssVars",[424,847,848],{},"Use to define CSS variables for your registry item.",[432,850,853],{"className":851,"code":852,"language":437,"meta":438},[435],"{\n  \"cssVars\": {\n    \"light\": {\n      \"brand\": \"20 14.3% 4.1%\",\n      \"radius\": \"0.5rem\"\n    },\n    \"dark\": {\n      \"brand\": \"20 14.3% 4.1%\"\n    }\n  }\n}\n",[428,854,852],{"__ignoreMap":441},[462,856,857],{"id":857},"css",[424,859,658,860,862,863,690,866,690,869,690,872,875],{},[428,861,857],{}," to add new rules to the project's CSS file eg. ",[428,864,865],{},"@layer base",[428,867,868],{},"@layer components",[428,870,871],{},"@utility",[428,873,874],{},"@keyframes",", etc.",[432,877,880],{"className":878,"code":879,"language":437,"meta":438},[435],"{\n  \"css\": {\n    \"@layer base\": {\n      \"body\": {\n        \"font-size\": \"var(--text-base)\",\n        \"line-height\": \"1.5\"\n      }\n    },\n    \"@layer components\": {\n      \"button\": {\n        \"background-color\": \"var(--color-primary)\",\n        \"color\": \"var(--color-white)\"\n      }\n    },\n    \"@utility text-magic\": {\n      \"font-size\": \"var(--text-base)\",\n      \"line-height\": \"1.5\"\n    },\n    \"@keyframes wiggle\": {\n      \"0%, 100%\": {\n        \"transform\": \"rotate(-3deg)\"\n      },\n      \"50%\": {\n        \"transform\": \"rotate(3deg)\"\n      }\n    }\n  }\n}\n",[428,881,879],{"__ignoreMap":441},[462,883,7],{"id":7},[424,885,658,886,888],{},[428,887,7],{}," to show custom documentation or message when installing your registry item via the CLI.",[432,890,893],{"className":891,"code":892,"language":437,"meta":438},[435],"{\n  \"docs\": \"Remember to add the FOO_BAR environment variable to your .env file.\"\n}\n",[428,894,892],{"__ignoreMap":441},[462,896,897],{"id":897},"categories",[424,899,658,900,902],{},[428,901,897],{}," to organize your registry item.",[432,904,907],{"className":905,"code":906,"language":437,"meta":438},[435],"{\n  \"categories\": [\"sidebar\", \"dashboard\"]\n}\n",[428,908,906],{"__ignoreMap":441},[462,910,911],{"id":911},"meta",[424,913,658,914,916],{},[428,915,911],{}," to add additional metadata to your registry item. You can add any key/value pair that you want to be available to the registry item.",[432,918,921],{"className":919,"code":920,"language":437,"meta":438},[435],"{\n  \"meta\": { \"foo\": \"bar\" }\n}\n",[428,922,920],{"__ignoreMap":441},{"title":441,"searchDepth":924,"depth":924,"links":925},2,[926],{"id":445,"depth":924,"text":446,"children":927},[928,930,931,932,933,934,935,936,937,938,939,940,941,942,943],{"id":464,"depth":929,"text":465},3,{"id":482,"depth":929,"text":482},{"id":496,"depth":929,"text":496},{"id":508,"depth":929,"text":508},{"id":522,"depth":929,"text":522},{"id":629,"depth":929,"text":629},{"id":646,"depth":929,"text":646},{"id":671,"depth":929,"text":672},{"id":718,"depth":929,"text":718},{"id":804,"depth":929,"text":804},{"id":844,"depth":929,"text":845},{"id":857,"depth":929,"text":857},{"id":7,"depth":929,"text":7},{"id":897,"depth":929,"text":897},{"id":911,"depth":929,"text":911},"Specification for registry items.","md",null,{},"---\ntitle: registry-item.json\ndescription: Specification for registry items.\n---\n\nThe `registry-item.json` schema is used to define your custom registry items.\n\n```json showLineNumbers title=\"registry-item.json\"\n{\n  \"$schema\": \"https://shadcn-vue.com/schema/registry-item.json\",\n  \"name\": \"hello-world\",\n  \"type\": \"registry:block\",\n  \"title\": \"Hello World\",\n  \"description\": \"A simple hello world component.\",\n  \"files\": [\n    {\n      \"path\": \"registry/new-york/HelloWorld/HelloWorld.vue\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/new-york/HelloWorld/useHelloWorld.ts\",\n      \"type\": \"registry:hook\"\n    }\n  ]\n}\n```\n\n## Definitions\n\nYou can see the JSON Schema for `registry-item.json` [here](https://shadcn-vue.com/schema/registry-item.json).\n\n### $schema\n\nThe `$schema` property is used to specify the schema for the `registry-item.json` file.\n\n```json showLineNumbers title=\"registry-item.json\"\n{\n  \"$schema\": \"https://shadcn-vue.com/schema/registry-item.json\"\n}\n```\n\n### name\n\nThe `name` property is used to specify the name of your registry item.\n\n```json showLineNumbers title=\"registry-item.json\"\n{\n  \"name\": \"hello-world\"\n}\n```\n\n### title\n\nA human-readable title for your registry item. Keep it short and descriptive.\n\n```json showLineNumbers title=\"registry-item.json\"\n{\n  \"title\": \"Hello World\"\n}\n```\n\n### description\n\nA description of your registry item. This can be longer and more detailed than the `title`.\n\n```json showLineNumbers title=\"registry-item.json\"\n{\n  \"description\": \"A simple hello world component.\"\n}\n```\n\n### type\n\nThe `type` property is used to specify the type of your registry item.\n\n```json showLineNumbers title=\"registry-item.json\"\n{\n  \"type\": \"registry:block\"\n}\n```\n\nThe following types are supported:\n\n| Type                 | Description                                      |\n| -------------------- | ------------------------------------------------ |\n| `registry:block`     | Use for complex components with multiple files.  |\n| `registry:component` | Use for simple components.                       |\n| `registry:lib`       | Use for lib and utils.                           |\n| `registry:hook`      | Use for composables (hooks).                                   |\n| `registry:ui`        | Use for UI components and single-file primitives |\n| `registry:page`      | Use for page or file-based routes.               |\n| `registry:file`      | Use for miscellaneous files.                     |\n\n### author\n\nThe `author` property is used to specify the author of the registry item.\n\nIt can be unique to the registry item or the same as the author of the registry.\n\n```json showLineNumbers title=\"registry-item.json\"\n{\n  \"author\": \"John Doe \u003Cjohn@doe.com>\"\n}\n```\n\n### dependencies\n\nThe `dependencies` property is used to specify the dependencies of your registry item. This is for `npm` packages.\n\nUse `@version` to specify the version of your registry item.\n\n```json showLineNumbers title=\"registry-item.json\"\n{\n  \"dependencies\": [\n    \"reka-ui\",\n    \"zod\",\n    \"lucide-vue-next\",\n    \"name@1.0.2\"\n  ]\n}\n```\n\n### registryDependencies\n\nUsed for registry dependencies. Can be names or URLs.\n\n- For `shadcn/ui` registry items such as `button`, `input`, `select`, etc use the name eg. `['button', 'input', 'select']`.\n- For custom registry items use the URL of the registry item eg. `['https://example.com/r/hello-world.json']`.\n\n```json showLineNumbers title=\"registry-item.json\"\n{\n  \"registryDependencies\": [\n    \"button\",\n    \"input\",\n    \"select\",\n    \"https://example.com/r/editor.json\"\n  ]\n}\n```\n\nNote: The CLI will automatically resolve remote registry dependencies.\n\n### files\n\nThe `files` property is used to specify the files of your registry item. Each file has a `path`, `type` and `target` (optional) property.\n\n**The `target` property is required for `registry:page` and `registry:file` types.**\n\n```json showLineNumbers title=\"registry-item.json\"\n{\n  \"files\": [\n    {\n      \"path\": \"registry/new-york/HelloWorld/page.vue\",\n      \"type\": \"registry:page\",\n      \"target\": \"pages/hello/index.vue\"\n    },\n    {\n      \"path\": \"registry/new-york/HelloWorld/HelloWorld.vue\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/new-york/HelloWorld/useHelloWorld.ts\",\n      \"type\": \"registry:hook\"\n    },\n    {\n      \"path\": \"registry/new-york/HelloWorld/.env\",\n      \"type\": \"registry:file\",\n      \"target\": \"~/.env\"\n    }\n  ]\n}\n```\n\n#### path\n\nThe `path` property is used to specify the path to the file in your registry. This path is used by the build script to parse, transform and build the registry JSON payload.\n\n#### type\n\nThe `type` property is used to specify the type of the file. See the [type](#type) section for more information.\n\n#### target\n\nThe `target` property is used to indicate where the file should be placed in a project. This is optional and only required for `registry:page` and `registry:file` types.\n\nBy default, the `shadcn-vue` cli will read a project's `components.json` file to determine the target path. For some files, such as routes or config you can specify the target path manually.\n\nUse `~` to refer to the root of the project e.g `~/foo.config.js`.\n\n### tailwind\n\n**DEPRECATED:** Use `cssVars.theme` instead for Tailwind v4 projects.\n\nThe `tailwind` property is used for tailwind configuration such as `theme`, `plugins` and `content`.\n\nYou can use the `tailwind.config` property to add colors, animations and plugins to your registry item.\n\n```json showLineNumbers title=\"registry-item.json\"\n{\n  \"tailwind\": {\n    \"config\": {\n      \"theme\": {\n        \"extend\": {\n          \"colors\": {\n            \"brand\": \"hsl(var(--brand))\"\n          },\n          \"keyframes\": {\n            \"wiggle\": {\n              \"0%, 100%\": { \"transform\": \"rotate(-3deg)\" },\n              \"50%\": { \"transform\": \"rotate(3deg)\" }\n            }\n          },\n          \"animation\": {\n            \"wiggle\": \"wiggle 1s ease-in-out infinite\"\n          }\n        }\n      }\n    }\n  }\n}\n```\n\n### cssVars\n\nUse to define CSS variables for your registry item.\n\n```json showLineNumbers title=\"registry-item.json\"\n{\n  \"cssVars\": {\n    \"light\": {\n      \"brand\": \"20 14.3% 4.1%\",\n      \"radius\": \"0.5rem\"\n    },\n    \"dark\": {\n      \"brand\": \"20 14.3% 4.1%\"\n    }\n  }\n}\n```\n\n### css\n\nUse `css` to add new rules to the project's CSS file eg. `@layer base`, `@layer components`, `@utility`, `@keyframes`, etc.\n\n```json showLineNumbers title=\"registry-item.json\"\n{\n  \"css\": {\n    \"@layer base\": {\n      \"body\": {\n        \"font-size\": \"var(--text-base)\",\n        \"line-height\": \"1.5\"\n      }\n    },\n    \"@layer components\": {\n      \"button\": {\n        \"background-color\": \"var(--color-primary)\",\n        \"color\": \"var(--color-white)\"\n      }\n    },\n    \"@utility text-magic\": {\n      \"font-size\": \"var(--text-base)\",\n      \"line-height\": \"1.5\"\n    },\n    \"@keyframes wiggle\": {\n      \"0%, 100%\": {\n        \"transform\": \"rotate(-3deg)\"\n      },\n      \"50%\": {\n        \"transform\": \"rotate(3deg)\"\n      }\n    }\n  }\n}\n```\n\n### docs\n\nUse `docs` to show custom documentation or message when installing your registry item via the CLI.\n\n```json showLineNumbers title=\"registry-item.json\"\n{\n  \"docs\": \"Remember to add the FOO_BAR environment variable to your .env file.\"\n}\n```\n\n### categories\n\nUse `categories` to organize your registry item.\n\n```json showLineNumbers title=\"registry-item.json\"\n{\n  \"categories\": [\"sidebar\", \"dashboard\"]\n}\n```\n\n### meta\n\nUse `meta` to add additional metadata to your registry item. You can add any key/value pair that you want to be available to the registry item.\n\n```json showLineNumbers title=\"registry-item.json\"\n{\n  \"meta\": { \"foo\": \"bar\" }\n}\n```\n",{"title":398,"description":944},"S5PzQlaEuB5pV7Y992oJgV1uHV0Yl2hlupyZFA4N93w",[952,953],{"title":394,"path":395,"stem":396,"children":-1},{"title":402,"path":403,"stem":404,"children":-1},1775650004009]