[{"data":1,"prerenderedAt":817},["ShallowReactive",2],{"navigation":3,"$fMW9jOOkNpZriWVK3P_bZYNOyYR2IEPvrHsC7cDBlJJc":405,"/docs/registry/examples":418,"surround-/docs/registry/examples":814},[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":386,"body":420,"description":807,"extension":808,"links":809,"meta":810,"navigation":132,"new":17,"path":387,"rawbody":811,"seo":812,"stem":388,"__hash__":813},"content/docs/registry/examples.md",{"type":421,"value":422,"toc":777},"minimark",[423,428,433,442,488,499,503,510,513,520,573,579,583,587,594,598,604,610,614,618,624,631,635,638,642,658,664,668,672,679,685,689,695,699,703,710,713,720,724,728,735,739,746,750,757,761,771],[424,425,427],"h2",{"id":426},"registrystyle","registry:style",[429,430,432],"h3",{"id":431},"custom-style-that-extends-shadcn-vue","Custom style that extends shadcn-vue",[434,435,436,437,441],"p",{},"The following registry item is a custom style that extends shadcn-vue. On ",[438,439,440],"code",{},"npx shadcn-vue init",", it will:",[443,444,445,453,464,470,481],"ul",{},[446,447,448,449,452],"li",{},"Install ",[438,450,451],{},"@iconify/vue"," as a dependency.",[446,454,455,456,459,460,463],{},"Add the ",[438,457,458],{},"Login01"," block and ",[438,461,462],{},"calendar"," component to the project.",[446,465,455,466,469],{},[438,467,468],{},"editor"," from a remote registry.",[446,471,472,473,476,477,480],{},"Set the ",[438,474,475],{},"font-sans"," variable to ",[438,478,479],{},"Inter, sans-serif",".",[446,482,483,484,487],{},"Install a ",[438,485,486],{},"brand"," color in light and dark mode.",[489,490,496],"pre",{"className":491,"code":493,"language":494,"meta":495},[492],"language-json","{\n  \"$schema\": \"https://shadcn-vue.com/schema/registry-item.json\",\n  \"name\": \"example-style\",\n  \"type\": \"registry:style\",\n  \"dependencies\": [\"@iconify/vue\"],\n  \"registryDependencies\": [\n    \"Login01\",\n    \"calendar\",\n    \"https://example.com/r/editor.json\"\n  ],\n  \"cssVars\": {\n    \"theme\": {\n      \"font-sans\": \"Inter, sans-serif\"\n    },\n    \"light\": {\n      \"brand\": \"20 14.3% 4.1%\"\n    },\n    \"dark\": {\n      \"brand\": \"20 14.3% 4.1%\"\n    }\n  }\n}\n","json","showLineNumbers title=\"example-style.json\"",[438,497,493],{"__ignoreMap":498},"",[429,500,502],{"id":501},"custom-style-from-scratch","Custom style from scratch",[434,504,505,506,509],{},"The following registry item is a custom style that doesn't extend shadcn-vue. See the ",[438,507,508],{},"extends: none"," field.",[434,511,512],{},"It can be used to create a new style from scratch i.e custom components, css vars, dependencies, etc.",[434,514,515,516,519],{},"On ",[438,517,518],{},"npx shadcn-vue add",", the following will:",[443,521,522,532,538,555],{},[446,523,448,524,527,528,531],{},[438,525,526],{},"tailwind-merge"," and ",[438,529,530],{},"clsx"," as dependencies.",[446,533,455,534,537],{},[438,535,536],{},"utils"," registry item from the shadcn-vue registry.",[446,539,455,540,543,544,543,547,550,551,554],{},[438,541,542],{},"button",", ",[438,545,546],{},"input",[438,548,549],{},"label",", and ",[438,552,553],{},"select"," components from a remote registry.",[446,556,557,558,543,561,543,564,543,567,543,570,480],{},"Install new css vars: ",[438,559,560],{},"main",[438,562,563],{},"bg",[438,565,566],{},"border",[438,568,569],{},"text",[438,571,572],{},"ring",[489,574,577],{"className":575,"code":576,"language":494,"meta":495},[492],"{\n  \"$schema\": \"https://shadcn-vue.com/schema/registry-item.json\",\n  \"extends\": \"none\",\n  \"name\": \"new-style\",\n  \"type\": \"registry:style\",\n  \"dependencies\": [\"tailwind-merge\", \"clsx\"],\n  \"registryDependencies\": [\n    \"utils\",\n    \"https://example.com/r/button.json\",\n    \"https://example.com/r/input.json\",\n    \"https://example.com/r/label.json\",\n    \"https://example.com/r/select.json\"\n  ],\n  \"cssVars\": {\n    \"theme\": {\n      \"font-sans\": \"Inter, sans-serif\"\n    },\n    \"light\": {\n      \"main\": \"#88aaee\",\n      \"bg\": \"#dfe5f2\",\n      \"border\": \"#000\",\n      \"text\": \"#000\",\n      \"ring\": \"#000\"\n    },\n    \"dark\": {\n      \"main\": \"#88aaee\",\n      \"bg\": \"#272933\",\n      \"border\": \"#000\",\n      \"text\": \"#e6e6e6\",\n      \"ring\": \"#fff\"\n    }\n  }\n}\n",[438,578,576],{"__ignoreMap":498},[424,580,582],{"id":581},"registrytheme","registry:theme",[429,584,586],{"id":585},"custom-theme","Custom theme",[489,588,592],{"className":589,"code":590,"language":494,"meta":591},[492],"{\n  \"$schema\": \"https://shadcn-vue.com/schema/registry-item.json\",\n  \"name\": \"custom-theme\",\n  \"type\": \"registry:theme\",\n  \"cssVars\": {\n    \"light\": {\n      \"background\": \"oklch(1 0 0)\",\n      \"foreground\": \"oklch(0.141 0.005 285.823)\",\n      \"primary\": \"oklch(0.546 0.245 262.881)\",\n      \"primary-foreground\": \"oklch(0.97 0.014 254.604)\",\n      \"ring\": \"oklch(0.746 0.16 232.661)\",\n      \"sidebar-primary\": \"oklch(0.546 0.245 262.881)\",\n      \"sidebar-primary-foreground\": \"oklch(0.97 0.014 254.604)\",\n      \"sidebar-ring\": \"oklch(0.746 0.16 232.661)\"\n    },\n    \"dark\": {\n      \"background\": \"oklch(1 0 0)\",\n      \"foreground\": \"oklch(0.141 0.005 285.823)\",\n      \"primary\": \"oklch(0.707 0.165 254.624)\",\n      \"primary-foreground\": \"oklch(0.97 0.014 254.604)\",\n      \"ring\": \"oklch(0.707 0.165 254.624)\",\n      \"sidebar-primary\": \"oklch(0.707 0.165 254.624)\",\n      \"sidebar-primary-foreground\": \"oklch(0.97 0.014 254.604)\",\n      \"sidebar-ring\": \"oklch(0.707 0.165 254.624)\"\n    }\n  }\n}\n","showLineNumbers title=\"example-theme.json\"",[438,593,590],{"__ignoreMap":498},[429,595,597],{"id":596},"custom-colors","Custom colors",[434,599,600,601,603],{},"The following style will init using shadcn-vue defaults and then add a custom ",[438,602,486],{}," color.",[489,605,608],{"className":606,"code":607,"language":494,"meta":495},[492],"{\n  \"$schema\": \"https://shadcn-vue.com/schema/registry-item.json\",\n  \"name\": \"custom-style\",\n  \"type\": \"registry:style\",\n  \"cssVars\": {\n    \"light\": {\n      \"brand\": \"oklch(0.99 0.00 0)\"\n    },\n    \"dark\": {\n      \"brand\": \"oklch(0.14 0.00 286)\"\n    }\n  }\n}\n",[438,609,607],{"__ignoreMap":498},[424,611,613],{"id":612},"registryblock","registry:block",[429,615,617],{"id":616},"custom-block","Custom block",[434,619,620,621,623],{},"This blocks installs the ",[438,622,458],{}," block from the shadcn-vue registry.",[489,625,629],{"className":626,"code":627,"language":494,"meta":628},[492],"{\n  \"$schema\": \"https://shadcn-vue.com/schema/registry-item.json\",\n  \"name\": \"Login01\",\n  \"type\": \"registry:block\",\n  \"description\": \"A simple login form.\",\n  \"registryDependencies\": [\"button\", \"card\", \"input\", \"label\"],\n  \"files\": [\n    {\n      \"path\": \"blocks/Login01/page.vue\",\n      \"content\": \"import { LoginForm } ...\",\n      \"type\": \"registry:page\",\n      \"target\": \"pages/login/index.vue\"\n    },\n    {\n      \"path\": \"blocks/login-01/components/LoginForm.vue\",\n      \"content\": \"...\",\n      \"type\": \"registry:component\"\n    }\n  ]\n}\n","showLineNumbers title=\"Login01.json\"",[438,630,627],{"__ignoreMap":498},[429,632,634],{"id":633},"install-a-block-and-override-primitives","Install a block and override primitives",[434,636,637],{},"You can install a block fromt the shadcn-vue registry and override the primitives using your custom ones.",[434,639,515,640,519],{},[438,641,518],{},[443,643,644,648],{},[446,645,455,646,623],{},[438,647,458],{},[446,649,650,651,543,653,550,655,657],{},"Override the ",[438,652,542],{},[438,654,546],{},[438,656,549],{}," primitives with the ones from the remote registry.",[489,659,662],{"className":660,"code":661,"language":494,"meta":495},[492],"{\n  \"$schema\": \"https://shadcn-vue.com/schema/registry-item.json\",\n  \"name\": \"custom-login\",\n  \"type\": \"registry:block\",\n  \"registryDependencies\": [\n    \"Login01\",\n    \"https://example.com/r/button.json\",\n    \"https://example.com/r/input.json\",\n    \"https://example.com/r/label.json\"\n  ]\n}\n",[438,663,661],{"__ignoreMap":498},[424,665,667],{"id":666},"css-variables","CSS Variables",[429,669,671],{"id":670},"custom-theme-variables","Custom Theme Variables",[434,673,674,675,678],{},"Add custom theme variables to the ",[438,676,677],{},"theme"," object.",[489,680,683],{"className":681,"code":682,"language":494,"meta":591},[492],"{\n  \"$schema\": \"https://shadcn-vue.com/schema/registry-item.json\",\n  \"name\": \"custom-theme\",\n  \"type\": \"registry:theme\",\n  \"cssVars\": {\n    \"theme\": {\n      \"font-heading\": \"Inter, sans-serif\",\n      \"shadow-card\": \"0 0 0 1px rgba(0, 0, 0, 0.1)\"\n    }\n  }\n}\n",[438,684,682],{"__ignoreMap":498},[429,686,688],{"id":687},"override-tailwind-css-variables","Override Tailwind CSS variables",[489,690,693],{"className":691,"code":692,"language":494,"meta":591},[492],"{\n  \"$schema\": \"https://shadcn-vue.com/schema/registry-item.json\",\n  \"name\": \"custom-theme\",\n  \"type\": \"registry:theme\",\n  \"cssVars\": {\n    \"theme\": {\n      \"spacing\": \"0.2rem\",\n      \"breakpoint-sm\": \"640px\",\n      \"breakpoint-md\": \"768px\",\n      \"breakpoint-lg\": \"1024px\",\n      \"breakpoint-xl\": \"1280px\",\n      \"breakpoint-2xl\": \"1536px\"\n    }\n  }\n}\n",[438,694,692],{"__ignoreMap":498},[424,696,698],{"id":697},"add-custom-css","Add custom CSS",[429,700,702],{"id":701},"base-styles","Base styles",[489,704,708],{"className":705,"code":706,"language":494,"meta":707},[492],"{\n  \"$schema\": \"https://shadcn-vue.com/schema/registry-item.json\",\n  \"name\": \"custom-style\",\n  \"type\": \"registry:style\",\n  \"css\": {\n    \"@layer base\": {\n      \"h1\": {\n        \"font-size\": \"var(--text-2xl)\"\n      },\n      \"h2\": {\n        \"font-size\": \"var(--text-xl)\"\n      }\n    }\n  }\n}\n","showLineNumbers title=\"example-base.json\"",[438,709,706],{"__ignoreMap":498},[429,711,91],{"id":712},"components",[489,714,718],{"className":715,"code":716,"language":494,"meta":717},[492],"{\n  \"$schema\": \"https://shadcn-vue.com/schema/registry-item.json\",\n  \"name\": \"custom-card\",\n  \"type\": \"registry:component\",\n  \"css\": {\n    \"@layer components\": {\n      \"card\": {\n        \"background-color\": \"var(--color-white)\",\n        \"border-radius\": \"var(--rounded-lg)\",\n        \"padding\": \"var(--spacing-6)\",\n        \"box-shadow\": \"var(--shadow-xl)\"\n      }\n    }\n  }\n}\n","showLineNumbers title=\"example-card.json\"",[438,719,716],{"__ignoreMap":498},[424,721,723],{"id":722},"add-custom-utilities","Add custom utilities",[429,725,727],{"id":726},"simple-utility","Simple utility",[489,729,733],{"className":730,"code":731,"language":494,"meta":732},[492],"{\n  \"$schema\": \"https://shadcn-vue.com/schema/registry-item.json\",\n  \"name\": \"custom-component\",\n  \"type\": \"registry:component\",\n  \"css\": {\n    \"@utility content-auto\": {\n      \"content-visibility\": \"auto\"\n    }\n  }\n}\n","showLineNumbers title=\"example-component.json\"",[438,734,731],{"__ignoreMap":498},[429,736,738],{"id":737},"complex-utility","Complex utility",[489,740,744],{"className":741,"code":742,"language":494,"meta":743},[492],"{\n  \"$schema\": \"https://shadcn-vue.com/schema/registry-item.json\",\n  \"name\": \"custom-component\",\n  \"type\": \"registry:component\",\n  \"css\": {\n    \"@utility scrollbar-hidden\": {\n      \"scrollbar-hidden\": {\n        \"&::-webkit-scrollbar\": {\n          \"display\": \"none\"\n        }\n      }\n    }\n  }\n}\n","showLineNumbers title=\"example-utility.json\"",[438,745,742],{"__ignoreMap":498},[429,747,749],{"id":748},"functional-utilities","Functional utilities",[489,751,755],{"className":752,"code":753,"language":494,"meta":754},[492],"{\n  \"$schema\": \"https://shadcn-vue.com/schema/registry-item.json\",\n  \"name\": \"custom-component\",\n  \"type\": \"registry:component\",\n  \"css\": {\n    \"@utility tab-*\": {\n      \"tab-size\": \"var(--tab-size-*)\"\n    }\n  }\n}\n","showLineNumbers title=\"example-functional.json\"",[438,756,753],{"__ignoreMap":498},[424,758,760],{"id":759},"add-custom-animations","Add custom animations",[434,762,763,764,767,768,770],{},"Note: you need to define both ",[438,765,766],{},"@keyframes"," in css and ",[438,769,677],{}," in cssVars to use animations.",[489,772,775],{"className":773,"code":774,"language":494,"meta":732},[492],"{\n  \"$schema\": \"https://shadcn-vue.com/schema/registry-item.json\",\n  \"name\": \"custom-component\",\n  \"type\": \"registry:component\",\n  \"cssVars\": {\n    \"theme\": {\n      \"--animate-wiggle\": \"wiggle 1s ease-in-out infinite\"\n    }\n  },\n  \"css\": {\n    \"@keyframes wiggle\": {\n      \"0%, 100%\": {\n        \"transform\": \"rotate(-3deg)\"\n      },\n      \"50%\": {\n        \"transform\": \"rotate(3deg)\"\n      }\n    }\n  }\n}\n",[438,776,774],{"__ignoreMap":498},{"title":498,"searchDepth":778,"depth":778,"links":779},2,[780,785,789,793,797,801,806],{"id":426,"depth":778,"text":427,"children":781},[782,784],{"id":431,"depth":783,"text":432},3,{"id":501,"depth":783,"text":502},{"id":581,"depth":778,"text":582,"children":786},[787,788],{"id":585,"depth":783,"text":586},{"id":596,"depth":783,"text":597},{"id":612,"depth":778,"text":613,"children":790},[791,792],{"id":616,"depth":783,"text":617},{"id":633,"depth":783,"text":634},{"id":666,"depth":778,"text":667,"children":794},[795,796],{"id":670,"depth":783,"text":671},{"id":687,"depth":783,"text":688},{"id":697,"depth":778,"text":698,"children":798},[799,800],{"id":701,"depth":783,"text":702},{"id":712,"depth":783,"text":91},{"id":722,"depth":778,"text":723,"children":802},[803,804,805],{"id":726,"depth":783,"text":727},{"id":737,"depth":783,"text":738},{"id":748,"depth":783,"text":749},{"id":759,"depth":778,"text":760},"Examples of registry items: styles, components, css vars, etc.","md",null,{},"---\ntitle: Examples\ndescription: \"Examples of registry items: styles, components, css vars, etc.\"\n---\n\n## registry:style\n\n### Custom style that extends shadcn-vue\n\nThe following registry item is a custom style that extends shadcn-vue. On `npx shadcn-vue init`, it will:\n\n- Install `@iconify/vue` as a dependency.\n- Add the `Login01` block and `calendar` component to the project.\n- Add the `editor` from a remote registry.\n- Set the `font-sans` variable to `Inter, sans-serif`.\n- Install a `brand` color in light and dark mode.\n\n```json showLineNumbers title=\"example-style.json\"\n{\n  \"$schema\": \"https://shadcn-vue.com/schema/registry-item.json\",\n  \"name\": \"example-style\",\n  \"type\": \"registry:style\",\n  \"dependencies\": [\"@iconify/vue\"],\n  \"registryDependencies\": [\n    \"Login01\",\n    \"calendar\",\n    \"https://example.com/r/editor.json\"\n  ],\n  \"cssVars\": {\n    \"theme\": {\n      \"font-sans\": \"Inter, sans-serif\"\n    },\n    \"light\": {\n      \"brand\": \"20 14.3% 4.1%\"\n    },\n    \"dark\": {\n      \"brand\": \"20 14.3% 4.1%\"\n    }\n  }\n}\n```\n\n### Custom style from scratch\n\nThe following registry item is a custom style that doesn't extend shadcn-vue. See the `extends: none` field.\n\nIt can be used to create a new style from scratch i.e custom components, css vars, dependencies, etc.\n\nOn `npx shadcn-vue add`, the following will:\n\n- Install `tailwind-merge` and `clsx` as dependencies.\n- Add the `utils` registry item from the shadcn-vue registry.\n- Add the `button`, `input`, `label`, and `select` components from a remote registry.\n- Install new css vars: `main`, `bg`, `border`, `text`, `ring`.\n\n```json showLineNumbers title=\"example-style.json\"\n{\n  \"$schema\": \"https://shadcn-vue.com/schema/registry-item.json\",\n  \"extends\": \"none\",\n  \"name\": \"new-style\",\n  \"type\": \"registry:style\",\n  \"dependencies\": [\"tailwind-merge\", \"clsx\"],\n  \"registryDependencies\": [\n    \"utils\",\n    \"https://example.com/r/button.json\",\n    \"https://example.com/r/input.json\",\n    \"https://example.com/r/label.json\",\n    \"https://example.com/r/select.json\"\n  ],\n  \"cssVars\": {\n    \"theme\": {\n      \"font-sans\": \"Inter, sans-serif\"\n    },\n    \"light\": {\n      \"main\": \"#88aaee\",\n      \"bg\": \"#dfe5f2\",\n      \"border\": \"#000\",\n      \"text\": \"#000\",\n      \"ring\": \"#000\"\n    },\n    \"dark\": {\n      \"main\": \"#88aaee\",\n      \"bg\": \"#272933\",\n      \"border\": \"#000\",\n      \"text\": \"#e6e6e6\",\n      \"ring\": \"#fff\"\n    }\n  }\n}\n```\n\n## registry:theme\n\n### Custom theme\n\n```json showLineNumbers title=\"example-theme.json\"\n{\n  \"$schema\": \"https://shadcn-vue.com/schema/registry-item.json\",\n  \"name\": \"custom-theme\",\n  \"type\": \"registry:theme\",\n  \"cssVars\": {\n    \"light\": {\n      \"background\": \"oklch(1 0 0)\",\n      \"foreground\": \"oklch(0.141 0.005 285.823)\",\n      \"primary\": \"oklch(0.546 0.245 262.881)\",\n      \"primary-foreground\": \"oklch(0.97 0.014 254.604)\",\n      \"ring\": \"oklch(0.746 0.16 232.661)\",\n      \"sidebar-primary\": \"oklch(0.546 0.245 262.881)\",\n      \"sidebar-primary-foreground\": \"oklch(0.97 0.014 254.604)\",\n      \"sidebar-ring\": \"oklch(0.746 0.16 232.661)\"\n    },\n    \"dark\": {\n      \"background\": \"oklch(1 0 0)\",\n      \"foreground\": \"oklch(0.141 0.005 285.823)\",\n      \"primary\": \"oklch(0.707 0.165 254.624)\",\n      \"primary-foreground\": \"oklch(0.97 0.014 254.604)\",\n      \"ring\": \"oklch(0.707 0.165 254.624)\",\n      \"sidebar-primary\": \"oklch(0.707 0.165 254.624)\",\n      \"sidebar-primary-foreground\": \"oklch(0.97 0.014 254.604)\",\n      \"sidebar-ring\": \"oklch(0.707 0.165 254.624)\"\n    }\n  }\n}\n```\n\n### Custom colors\n\nThe following style will init using shadcn-vue defaults and then add a custom `brand` color.\n\n```json showLineNumbers title=\"example-style.json\"\n{\n  \"$schema\": \"https://shadcn-vue.com/schema/registry-item.json\",\n  \"name\": \"custom-style\",\n  \"type\": \"registry:style\",\n  \"cssVars\": {\n    \"light\": {\n      \"brand\": \"oklch(0.99 0.00 0)\"\n    },\n    \"dark\": {\n      \"brand\": \"oklch(0.14 0.00 286)\"\n    }\n  }\n}\n```\n\n## registry:block\n\n### Custom block\n\nThis blocks installs the `Login01` block from the shadcn-vue registry.\n\n```json showLineNumbers title=\"Login01.json\"\n{\n  \"$schema\": \"https://shadcn-vue.com/schema/registry-item.json\",\n  \"name\": \"Login01\",\n  \"type\": \"registry:block\",\n  \"description\": \"A simple login form.\",\n  \"registryDependencies\": [\"button\", \"card\", \"input\", \"label\"],\n  \"files\": [\n    {\n      \"path\": \"blocks/Login01/page.vue\",\n      \"content\": \"import { LoginForm } ...\",\n      \"type\": \"registry:page\",\n      \"target\": \"pages/login/index.vue\"\n    },\n    {\n      \"path\": \"blocks/login-01/components/LoginForm.vue\",\n      \"content\": \"...\",\n      \"type\": \"registry:component\"\n    }\n  ]\n}\n```\n\n### Install a block and override primitives\n\nYou can install a block fromt the shadcn-vue registry and override the primitives using your custom ones.\n\nOn `npx shadcn-vue add`, the following will:\n\n- Add the `Login01` block from the shadcn-vue registry.\n- Override the `button`, `input`, and `label` primitives with the ones from the remote registry.\n\n```json showLineNumbers title=\"example-style.json\"\n{\n  \"$schema\": \"https://shadcn-vue.com/schema/registry-item.json\",\n  \"name\": \"custom-login\",\n  \"type\": \"registry:block\",\n  \"registryDependencies\": [\n    \"Login01\",\n    \"https://example.com/r/button.json\",\n    \"https://example.com/r/input.json\",\n    \"https://example.com/r/label.json\"\n  ]\n}\n```\n\n## CSS Variables\n\n### Custom Theme Variables\n\nAdd custom theme variables to the `theme` object.\n\n```json showLineNumbers title=\"example-theme.json\"\n{\n  \"$schema\": \"https://shadcn-vue.com/schema/registry-item.json\",\n  \"name\": \"custom-theme\",\n  \"type\": \"registry:theme\",\n  \"cssVars\": {\n    \"theme\": {\n      \"font-heading\": \"Inter, sans-serif\",\n      \"shadow-card\": \"0 0 0 1px rgba(0, 0, 0, 0.1)\"\n    }\n  }\n}\n```\n\n### Override Tailwind CSS variables\n\n```json showLineNumbers title=\"example-theme.json\"\n{\n  \"$schema\": \"https://shadcn-vue.com/schema/registry-item.json\",\n  \"name\": \"custom-theme\",\n  \"type\": \"registry:theme\",\n  \"cssVars\": {\n    \"theme\": {\n      \"spacing\": \"0.2rem\",\n      \"breakpoint-sm\": \"640px\",\n      \"breakpoint-md\": \"768px\",\n      \"breakpoint-lg\": \"1024px\",\n      \"breakpoint-xl\": \"1280px\",\n      \"breakpoint-2xl\": \"1536px\"\n    }\n  }\n}\n```\n\n## Add custom CSS\n\n### Base styles\n\n```json showLineNumbers title=\"example-base.json\"\n{\n  \"$schema\": \"https://shadcn-vue.com/schema/registry-item.json\",\n  \"name\": \"custom-style\",\n  \"type\": \"registry:style\",\n  \"css\": {\n    \"@layer base\": {\n      \"h1\": {\n        \"font-size\": \"var(--text-2xl)\"\n      },\n      \"h2\": {\n        \"font-size\": \"var(--text-xl)\"\n      }\n    }\n  }\n}\n```\n\n### Components\n\n```json showLineNumbers title=\"example-card.json\"\n{\n  \"$schema\": \"https://shadcn-vue.com/schema/registry-item.json\",\n  \"name\": \"custom-card\",\n  \"type\": \"registry:component\",\n  \"css\": {\n    \"@layer components\": {\n      \"card\": {\n        \"background-color\": \"var(--color-white)\",\n        \"border-radius\": \"var(--rounded-lg)\",\n        \"padding\": \"var(--spacing-6)\",\n        \"box-shadow\": \"var(--shadow-xl)\"\n      }\n    }\n  }\n}\n```\n\n## Add custom utilities\n\n### Simple utility\n\n```json showLineNumbers title=\"example-component.json\"\n{\n  \"$schema\": \"https://shadcn-vue.com/schema/registry-item.json\",\n  \"name\": \"custom-component\",\n  \"type\": \"registry:component\",\n  \"css\": {\n    \"@utility content-auto\": {\n      \"content-visibility\": \"auto\"\n    }\n  }\n}\n```\n\n### Complex utility\n\n```json showLineNumbers title=\"example-utility.json\"\n{\n  \"$schema\": \"https://shadcn-vue.com/schema/registry-item.json\",\n  \"name\": \"custom-component\",\n  \"type\": \"registry:component\",\n  \"css\": {\n    \"@utility scrollbar-hidden\": {\n      \"scrollbar-hidden\": {\n        \"&::-webkit-scrollbar\": {\n          \"display\": \"none\"\n        }\n      }\n    }\n  }\n}\n```\n\n### Functional utilities\n\n```json showLineNumbers title=\"example-functional.json\"\n{\n  \"$schema\": \"https://shadcn-vue.com/schema/registry-item.json\",\n  \"name\": \"custom-component\",\n  \"type\": \"registry:component\",\n  \"css\": {\n    \"@utility tab-*\": {\n      \"tab-size\": \"var(--tab-size-*)\"\n    }\n  }\n}\n```\n\n## Add custom animations\n\nNote: you need to define both `@keyframes` in css and `theme` in cssVars to use animations.\n\n```json showLineNumbers title=\"example-component.json\"\n{\n  \"$schema\": \"https://shadcn-vue.com/schema/registry-item.json\",\n  \"name\": \"custom-component\",\n  \"type\": \"registry:component\",\n  \"cssVars\": {\n    \"theme\": {\n      \"--animate-wiggle\": \"wiggle 1s ease-in-out infinite\"\n    }\n  },\n  \"css\": {\n    \"@keyframes wiggle\": {\n      \"0%, 100%\": {\n        \"transform\": \"rotate(-3deg)\"\n      },\n      \"50%\": {\n        \"transform\": \"rotate(3deg)\"\n      }\n    }\n  }\n}\n```\n",{"title":386,"description":807},"t6C49e1W2t5IZQWz8_2Fz5lA0jN0eu3orPSM00pHTOg",[815,816],{"title":380,"path":381,"stem":382,"children":-1},{"title":390,"path":391,"stem":392,"children":-1},1775650002025]