[{"data":1,"prerenderedAt":1200},["ShallowReactive",2],{"navigation":3,"$f2vxmxe0ttlw1b":470,"\u002Fdocs\u002Fregistry\u002Fgetting-started":481,"surround-\u002Fdocs\u002Fregistry\u002Fgetting-started":1197},[4],{"title":5,"path":6,"stem":7,"children":8,"page":18},"Docs","\u002Fdocs","docs",[9,298,324,342,348,365,391,405],{"title":10,"path":11,"stem":12,"children":13,"new":18,"type":297},"Components","\u002Fdocs\u002Fcomponents","docs\u002F02.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,205,209,213,217,221,225,229,233,237,241,245,249,253,257,261,265,269,273,277,281,285,289,293],{"title":15,"path":16,"stem":17,"new":18,"type":19,"children":-1},"Accordion","\u002Fdocs\u002Fcomponents\u002Faccordion","docs\u002Fcomponents\u002Faccordion",false,"component",{"title":21,"path":22,"stem":23,"new":18,"type":19,"children":-1},"Alert","\u002Fdocs\u002Fcomponents\u002Falert","docs\u002Fcomponents\u002Falert",{"title":25,"path":26,"stem":27,"new":18,"type":19,"children":-1},"Alert Dialog","\u002Fdocs\u002Fcomponents\u002Falert-dialog","docs\u002Fcomponents\u002Falert-dialog",{"title":29,"path":30,"stem":31,"new":18,"type":19,"children":-1},"Aspect Ratio","\u002Fdocs\u002Fcomponents\u002Faspect-ratio","docs\u002Fcomponents\u002Faspect-ratio",{"title":33,"path":34,"stem":35,"new":18,"type":19,"children":-1},"Attachment","\u002Fdocs\u002Fcomponents\u002Fattachment","docs\u002Fcomponents\u002Fattachment",{"title":37,"path":38,"stem":39,"new":18,"type":19,"children":-1},"Avatar","\u002Fdocs\u002Fcomponents\u002Favatar","docs\u002Fcomponents\u002Favatar",{"title":41,"path":42,"stem":43,"new":18,"type":19,"children":-1},"Badge","\u002Fdocs\u002Fcomponents\u002Fbadge","docs\u002Fcomponents\u002Fbadge",{"title":45,"path":46,"stem":47,"new":18,"type":19,"children":-1},"Breadcrumb","\u002Fdocs\u002Fcomponents\u002Fbreadcrumb","docs\u002Fcomponents\u002Fbreadcrumb",{"title":49,"path":50,"stem":51,"new":18,"type":19,"children":-1},"Bubble","\u002Fdocs\u002Fcomponents\u002Fbubble","docs\u002Fcomponents\u002Fbubble",{"title":53,"path":54,"stem":55,"new":18,"type":19,"children":-1},"Button","\u002Fdocs\u002Fcomponents\u002Fbutton","docs\u002Fcomponents\u002Fbutton",{"title":57,"path":58,"stem":59,"new":18,"type":19,"children":-1},"Button Group","\u002Fdocs\u002Fcomponents\u002Fbutton-group","docs\u002Fcomponents\u002Fbutton-group",{"title":61,"path":62,"stem":63,"new":18,"type":19,"children":-1},"Calendar","\u002Fdocs\u002Fcomponents\u002Fcalendar","docs\u002Fcomponents\u002Fcalendar",{"title":65,"path":66,"stem":67,"new":18,"type":19,"children":-1},"Card","\u002Fdocs\u002Fcomponents\u002Fcard","docs\u002Fcomponents\u002Fcard",{"title":69,"path":70,"stem":71,"new":18,"type":19,"children":-1},"Carousel","\u002Fdocs\u002Fcomponents\u002Fcarousel","docs\u002Fcomponents\u002Fcarousel",{"title":73,"path":74,"stem":75,"new":18,"type":19,"children":-1},"Chart","\u002Fdocs\u002Fcomponents\u002Fchart","docs\u002Fcomponents\u002Fchart",{"title":77,"path":78,"stem":79,"new":18,"type":19,"children":-1},"Checkbox","\u002Fdocs\u002Fcomponents\u002Fcheckbox","docs\u002Fcomponents\u002Fcheckbox",{"title":81,"path":82,"stem":83,"new":18,"type":19,"children":-1},"Collapsible","\u002Fdocs\u002Fcomponents\u002Fcollapsible","docs\u002Fcomponents\u002Fcollapsible",{"title":85,"path":86,"stem":87,"new":18,"type":19,"children":-1},"Combobox","\u002Fdocs\u002Fcomponents\u002Fcombobox","docs\u002Fcomponents\u002Fcombobox",{"title":89,"path":90,"stem":91,"new":18,"type":19,"children":-1},"Command","\u002Fdocs\u002Fcomponents\u002Fcommand","docs\u002Fcomponents\u002Fcommand",{"title":93,"path":94,"stem":95,"new":18,"type":19,"children":-1},"Context Menu","\u002Fdocs\u002Fcomponents\u002Fcontext-menu","docs\u002Fcomponents\u002Fcontext-menu",{"title":97,"path":98,"stem":99,"new":18,"type":19,"children":-1},"Data Table","\u002Fdocs\u002Fcomponents\u002Fdata-table","docs\u002Fcomponents\u002Fdata-table",{"title":101,"path":102,"stem":103,"new":18,"type":19,"children":-1},"Date Picker","\u002Fdocs\u002Fcomponents\u002Fdate-picker","docs\u002Fcomponents\u002Fdate-picker",{"title":105,"path":106,"stem":107,"new":18,"type":19,"children":-1},"Dialog","\u002Fdocs\u002Fcomponents\u002Fdialog","docs\u002Fcomponents\u002Fdialog",{"title":109,"path":110,"stem":111,"new":18,"type":19,"children":-1},"Drawer","\u002Fdocs\u002Fcomponents\u002Fdrawer","docs\u002Fcomponents\u002Fdrawer",{"title":113,"path":114,"stem":115,"new":18,"type":19,"children":-1},"Dropdown Menu","\u002Fdocs\u002Fcomponents\u002Fdropdown-menu","docs\u002Fcomponents\u002Fdropdown-menu",{"title":117,"path":118,"stem":119,"new":18,"type":19,"children":-1},"Empty","\u002Fdocs\u002Fcomponents\u002Fempty","docs\u002Fcomponents\u002Fempty",{"title":121,"path":122,"stem":123,"new":18,"type":19,"children":-1},"Field","\u002Fdocs\u002Fcomponents\u002Ffield","docs\u002Fcomponents\u002Ffield",{"title":125,"path":126,"stem":127,"new":18,"type":19,"children":-1},"Form","\u002Fdocs\u002Fcomponents\u002Fform","docs\u002Fcomponents\u002Fform",{"title":129,"path":130,"stem":131,"new":18,"type":19,"children":-1},"Hover Card","\u002Fdocs\u002Fcomponents\u002Fhover-card","docs\u002Fcomponents\u002Fhover-card",{"title":133,"path":134,"stem":135,"new":18,"type":19,"children":-1},"Input","\u002Fdocs\u002Fcomponents\u002Finput","docs\u002Fcomponents\u002Finput",{"title":137,"path":138,"stem":139,"new":18,"type":19,"children":-1},"Input Group","\u002Fdocs\u002Fcomponents\u002Finput-group","docs\u002Fcomponents\u002Finput-group",{"title":141,"path":142,"stem":143,"new":18,"type":19,"children":-1},"Input OTP","\u002Fdocs\u002Fcomponents\u002Finput-otp","docs\u002Fcomponents\u002Finput-otp",{"title":145,"path":146,"stem":147,"new":18,"type":19,"children":-1},"Item","\u002Fdocs\u002Fcomponents\u002Fitem","docs\u002Fcomponents\u002Fitem",{"title":149,"path":150,"stem":151,"new":18,"type":19,"children":-1},"Kbd","\u002Fdocs\u002Fcomponents\u002Fkbd","docs\u002Fcomponents\u002Fkbd",{"title":153,"path":154,"stem":155,"new":18,"type":19,"children":-1},"Label","\u002Fdocs\u002Fcomponents\u002Flabel","docs\u002Fcomponents\u002Flabel",{"title":157,"path":158,"stem":159,"new":18,"type":19,"children":-1},"Marker","\u002Fdocs\u002Fcomponents\u002Fmarker","docs\u002Fcomponents\u002Fmarker",{"title":161,"path":162,"stem":163,"new":18,"type":19,"children":-1},"Menubar","\u002Fdocs\u002Fcomponents\u002Fmenubar","docs\u002Fcomponents\u002Fmenubar",{"title":165,"path":166,"stem":167,"new":18,"type":19,"children":-1},"Message","\u002Fdocs\u002Fcomponents\u002Fmessage","docs\u002Fcomponents\u002Fmessage",{"title":169,"path":170,"stem":171,"new":18,"type":19,"children":-1},"Message Scroller","\u002Fdocs\u002Fcomponents\u002Fmessage-scroller","docs\u002Fcomponents\u002Fmessage-scroller",{"title":173,"path":174,"stem":175,"new":18,"type":19,"children":-1},"Native Select","\u002Fdocs\u002Fcomponents\u002Fnative-select","docs\u002Fcomponents\u002Fnative-select",{"title":177,"path":178,"stem":179,"new":18,"type":19,"children":-1},"Navigation Menu","\u002Fdocs\u002Fcomponents\u002Fnavigation-menu","docs\u002Fcomponents\u002Fnavigation-menu",{"title":181,"path":182,"stem":183,"new":18,"type":19,"children":-1},"Number Field","\u002Fdocs\u002Fcomponents\u002Fnumber-field","docs\u002Fcomponents\u002Fnumber-field",{"title":185,"path":186,"stem":187,"new":18,"type":19,"children":-1},"Pagination","\u002Fdocs\u002Fcomponents\u002Fpagination","docs\u002Fcomponents\u002Fpagination",{"title":189,"path":190,"stem":191,"new":18,"type":19,"children":-1},"Pin Input","\u002Fdocs\u002Fcomponents\u002Fpin-input","docs\u002Fcomponents\u002Fpin-input",{"title":193,"path":194,"stem":195,"new":18,"type":19,"children":-1},"Popover","\u002Fdocs\u002Fcomponents\u002Fpopover","docs\u002Fcomponents\u002Fpopover",{"title":197,"path":198,"stem":199,"new":18,"type":19,"children":-1},"Progress","\u002Fdocs\u002Fcomponents\u002Fprogress","docs\u002Fcomponents\u002Fprogress",{"title":201,"path":202,"stem":203,"new":204,"type":19,"children":-1},"Questionnaire","\u002Fdocs\u002Fcomponents\u002Fquestionnaire","docs\u002Fcomponents\u002Fquestionnaire",true,{"title":206,"path":207,"stem":208,"new":18,"type":19,"children":-1},"Radio Group","\u002Fdocs\u002Fcomponents\u002Fradio-group","docs\u002Fcomponents\u002Fradio-group",{"title":210,"path":211,"stem":212,"new":18,"type":19,"children":-1},"Range Calendar","\u002Fdocs\u002Fcomponents\u002Frange-calendar","docs\u002Fcomponents\u002Frange-calendar",{"title":214,"path":215,"stem":216,"new":18,"type":19,"children":-1},"Resizable","\u002Fdocs\u002Fcomponents\u002Fresizable","docs\u002Fcomponents\u002Fresizable",{"title":218,"path":219,"stem":220,"new":18,"type":19,"children":-1},"Scroll Area","\u002Fdocs\u002Fcomponents\u002Fscroll-area","docs\u002Fcomponents\u002Fscroll-area",{"title":222,"path":223,"stem":224,"new":18,"type":19,"children":-1},"Select","\u002Fdocs\u002Fcomponents\u002Fselect","docs\u002Fcomponents\u002Fselect",{"title":226,"path":227,"stem":228,"new":18,"type":19,"children":-1},"Separator","\u002Fdocs\u002Fcomponents\u002Fseparator","docs\u002Fcomponents\u002Fseparator",{"title":230,"path":231,"stem":232,"new":18,"type":19,"children":-1},"Sheet","\u002Fdocs\u002Fcomponents\u002Fsheet","docs\u002Fcomponents\u002Fsheet",{"title":234,"path":235,"stem":236,"new":18,"type":19,"children":-1},"Sidebar","\u002Fdocs\u002Fcomponents\u002Fsidebar","docs\u002Fcomponents\u002Fsidebar",{"title":238,"path":239,"stem":240,"new":18,"type":19,"children":-1},"Skeleton","\u002Fdocs\u002Fcomponents\u002Fskeleton","docs\u002Fcomponents\u002Fskeleton",{"title":242,"path":243,"stem":244,"new":18,"type":19,"children":-1},"Slider","\u002Fdocs\u002Fcomponents\u002Fslider","docs\u002Fcomponents\u002Fslider",{"title":246,"path":247,"stem":248,"new":18,"type":19,"children":-1},"Sonner","\u002Fdocs\u002Fcomponents\u002Fsonner","docs\u002Fcomponents\u002Fsonner",{"title":250,"path":251,"stem":252,"new":18,"type":19,"children":-1},"Spinner","\u002Fdocs\u002Fcomponents\u002Fspinner","docs\u002Fcomponents\u002Fspinner",{"title":254,"path":255,"stem":256,"new":18,"type":19,"children":-1},"Stepper","\u002Fdocs\u002Fcomponents\u002Fstepper","docs\u002Fcomponents\u002Fstepper",{"title":258,"path":259,"stem":260,"new":18,"type":19,"children":-1},"Switch","\u002Fdocs\u002Fcomponents\u002Fswitch","docs\u002Fcomponents\u002Fswitch",{"title":262,"path":263,"stem":264,"new":18,"type":19,"children":-1},"Table","\u002Fdocs\u002Fcomponents\u002Ftable","docs\u002Fcomponents\u002Ftable",{"title":266,"path":267,"stem":268,"new":18,"type":19,"children":-1},"Tabs","\u002Fdocs\u002Fcomponents\u002Ftabs","docs\u002Fcomponents\u002Ftabs",{"title":270,"path":271,"stem":272,"new":18,"type":19,"children":-1},"Tags Input","\u002Fdocs\u002Fcomponents\u002Ftags-input","docs\u002Fcomponents\u002Ftags-input",{"title":274,"path":275,"stem":276,"new":18,"type":19,"children":-1},"Textarea","\u002Fdocs\u002Fcomponents\u002Ftextarea","docs\u002Fcomponents\u002Ftextarea",{"title":278,"path":279,"stem":280,"new":18,"type":19,"children":-1},"Toast","\u002Fdocs\u002Fcomponents\u002Ftoast","docs\u002Fcomponents\u002Ftoast",{"title":282,"path":283,"stem":284,"new":18,"type":19,"children":-1},"Toggle","\u002Fdocs\u002Fcomponents\u002Ftoggle","docs\u002Fcomponents\u002Ftoggle",{"title":286,"path":287,"stem":288,"new":18,"type":19,"children":-1},"Toggle Group","\u002Fdocs\u002Fcomponents\u002Ftoggle-group","docs\u002Fcomponents\u002Ftoggle-group",{"title":290,"path":291,"stem":292,"new":18,"type":19,"children":-1},"Tooltip","\u002Fdocs\u002Fcomponents\u002Ftooltip","docs\u002Fcomponents\u002Ftooltip",{"title":294,"path":295,"stem":296,"new":18,"type":19,"children":-1},"Typography","\u002Fdocs\u002Fcomponents\u002Ftypography","docs\u002Fcomponents\u002Ftypography","group",{"title":299,"path":300,"stem":301,"children":302,"new":18,"type":297},"Installation","\u002Fdocs\u002Finstallation","docs\u002F02.installation",[303,308,312,316,320],{"title":304,"path":305,"stem":306,"new":18,"type":307,"children":-1},"Vite","\u002Fdocs\u002Finstallation\u002Fvite","docs\u002Finstallation\u002F01.vite","page",{"title":309,"path":310,"stem":311,"new":18,"type":307,"children":-1},"Nuxt","\u002Fdocs\u002Finstallation\u002Fnuxt","docs\u002Finstallation\u002F02.nuxt",{"title":313,"path":314,"stem":315,"new":18,"type":307,"children":-1},"Astro","\u002Fdocs\u002Finstallation\u002Fastro","docs\u002Finstallation\u002F03.astro",{"title":317,"path":318,"stem":319,"new":18,"type":307,"children":-1},"Laravel","\u002Fdocs\u002Finstallation\u002Flaravel","docs\u002Finstallation\u002F04.laravel",{"title":321,"path":322,"stem":323,"new":18,"type":307,"children":-1},"Manual Installation","\u002Fdocs\u002Finstallation\u002Fmanual","docs\u002Finstallation\u002F05.manual",{"title":325,"path":326,"stem":327,"children":328,"new":18,"type":297},"Dark Mode","\u002Fdocs\u002Fdark-mode","docs\u002F05.dark-mode",[329,332,335,339],{"title":304,"path":330,"stem":331,"new":18,"type":307,"children":-1},"\u002Fdocs\u002Fdark-mode\u002Fvite","docs\u002Fdark-mode\u002F01.vite",{"title":309,"path":333,"stem":334,"new":18,"type":307,"children":-1},"\u002Fdocs\u002Fdark-mode\u002Fnuxt","docs\u002Fdark-mode\u002F02.nuxt",{"title":336,"path":337,"stem":338,"new":18,"type":307,"children":-1},"Vitepress","\u002Fdocs\u002Fdark-mode\u002Fvitepress","docs\u002Fdark-mode\u002F03.vitepress",{"title":313,"path":340,"stem":341,"new":18,"type":307,"children":-1},"\u002Fdocs\u002Fdark-mode\u002Fastro","docs\u002Fdark-mode\u002F04.astro",{"title":343,"path":344,"stem":345,"children":346,"new":18,"type":297},"Directory","\u002Fdocs\u002Fdirectory","docs\u002Fdirectory\u002Findex",[347],{"title":343,"path":344,"stem":345,"new":18,"type":307,"children":-1},{"title":349,"path":350,"stem":351,"children":352,"new":18,"type":297},"Forms","\u002Fdocs\u002Fforms","docs\u002Fforms",[353,357,361],{"title":354,"path":355,"stem":356,"new":18,"type":307,"children":-1},"VeeValidate","\u002Fdocs\u002Fforms\u002Fvee-validate","docs\u002Fforms\u002F01.vee-validate",{"title":358,"path":359,"stem":360,"new":18,"type":307,"children":-1},"TanStack Form","\u002Fdocs\u002Fforms\u002Ftanstack-form","docs\u002Fforms\u002F02.tanstack-form",{"title":362,"path":363,"stem":364,"new":18,"type":307,"children":-1},"Formisch","\u002Fdocs\u002Fforms\u002Fformisch","docs\u002Fforms\u002F03.formisch",{"title":366,"path":367,"stem":368,"children":369,"new":18,"type":297},"Registry","\u002Fdocs\u002Fregistry","docs\u002Fregistry\u002Findex",[370,371,375,379,383,387],{"title":366,"path":367,"stem":368,"new":18,"type":307,"children":-1},{"title":372,"path":373,"stem":374,"new":18,"type":307,"children":-1},"Examples","\u002Fdocs\u002Fregistry\u002Fexamples","docs\u002Fregistry\u002Fexamples",{"title":376,"path":377,"stem":378,"new":18,"type":307,"children":-1},"FAQ","\u002Fdocs\u002Fregistry\u002Ffaq","docs\u002Fregistry\u002Ffaq",{"title":380,"path":381,"stem":382,"new":18,"type":307,"children":-1},"Getting Started","\u002Fdocs\u002Fregistry\u002Fgetting-started","docs\u002Fregistry\u002Fgetting-started",{"title":384,"path":385,"stem":386,"new":18,"type":307,"children":-1},"registry-item.json","\u002Fdocs\u002Fregistry\u002Fregistry-item-json","docs\u002Fregistry\u002Fregistry-item-json",{"title":388,"path":389,"stem":390,"new":18,"type":307,"children":-1},"registry.json","\u002Fdocs\u002Fregistry\u002Fregistry-json","docs\u002Fregistry\u002Fregistry-json",{"title":392,"path":393,"stem":394,"children":395,"new":18,"type":297},"Utilities","\u002Fdocs\u002Futilities","docs\u002Futilities\u002Findex",[396,397,401],{"title":392,"path":393,"stem":394,"new":18,"type":307,"children":-1},{"title":398,"path":399,"stem":400,"new":18,"type":307,"children":-1},"scroll-fade","\u002Fdocs\u002Futilities\u002Fscroll-fade","docs\u002Futilities\u002Fscroll-fade",{"title":402,"path":403,"stem":404,"new":18,"type":307,"children":-1},"shimmer","\u002Fdocs\u002Futilities\u002Fshimmer","docs\u002Futilities\u002Fshimmer",{"path":6,"stem":7,"title":406,"type":297,"children":407},"Get Started",[408,412,419,423,427,433,437,441,445,449,453,457,461,465],{"title":409,"path":410,"stem":411,"new":18,"type":307,"children":-1},"Introduction","\u002Fdocs\u002Fintroduction","docs\u002F01.introduction",{"title":299,"path":300,"stem":301,"children":413,"new":18,"type":297},[414,415,416,417,418],{"title":304,"path":305,"stem":306,"new":18,"type":307,"children":-1},{"title":309,"path":310,"stem":311,"new":18,"type":307,"children":-1},{"title":313,"path":314,"stem":315,"new":18,"type":307,"children":-1},{"title":317,"path":318,"stem":319,"new":18,"type":307,"children":-1},{"title":321,"path":322,"stem":323,"new":18,"type":307,"children":-1},{"title":420,"path":421,"stem":422,"new":18,"type":307,"children":-1},"components.json","\u002Fdocs\u002Fcomponents-json","docs\u002F03.components-json",{"title":424,"path":425,"stem":426,"new":18,"type":307,"children":-1},"Theming","\u002Fdocs\u002Ftheming","docs\u002F04.theming",{"title":325,"path":326,"stem":327,"children":428,"new":18,"type":297},[429,430,431,432],{"title":304,"path":330,"stem":331,"new":18,"type":307,"children":-1},{"title":309,"path":333,"stem":334,"new":18,"type":307,"children":-1},{"title":336,"path":337,"stem":338,"new":18,"type":307,"children":-1},{"title":313,"path":340,"stem":341,"new":18,"type":307,"children":-1},{"title":434,"path":435,"stem":436,"new":18,"type":307,"children":-1},"CLI","\u002Fdocs\u002Fcli","docs\u002F06.cli",{"title":438,"path":439,"stem":440,"new":18,"type":307,"children":-1},"JavaScript","\u002Fdocs\u002Fjavascript","docs\u002F07.javascript",{"title":442,"path":443,"stem":444,"new":18,"type":307,"children":-1},"RTL","\u002Fdocs\u002Frtl","docs\u002F08.rtl",{"title":446,"path":447,"stem":448,"new":18,"type":307,"children":-1},"Figma","\u002Fdocs\u002Ffigma","docs\u002F09.figma",{"title":450,"path":451,"stem":452,"new":18,"type":307,"children":-1},"Changelog","\u002Fdocs\u002Fchangelog","docs\u002F10.changelog",{"title":454,"path":455,"stem":456,"new":18,"type":307,"children":-1},"Legacy Docs","\u002Fdocs\u002Flegacy","docs\u002F11.legacy",{"title":458,"path":459,"stem":460,"new":18,"type":307,"children":-1},"Skills","\u002Fdocs\u002Fskills","docs\u002Fskills",{"title":462,"path":463,"stem":464,"new":18,"type":307,"children":-1},"Typeset","\u002Fdocs\u002Ftypeset","docs\u002Ftypeset",{"title":392,"path":393,"stem":394,"children":466,"new":18,"type":297},[467,468,469],{"title":392,"path":393,"stem":394,"new":18,"type":307,"children":-1},{"title":398,"path":399,"stem":400,"new":18,"type":307,"children":-1},{"title":402,"path":403,"stem":404,"new":18,"type":307,"children":-1},{"repo":471},{"id":472,"name":473,"repo":474,"description":475,"createdAt":476,"updatedAt":477,"pushedAt":478,"stars":479,"watchers":479,"forks":479,"defaultBranch":480},1360880822,"v-design","v-stella\u002Fv-design","An open-source Vue design system and component registry.","2026-09-08T03:28:46Z","2026-09-09T08:39:14Z","2026-09-09T08:36:47Z",0,"dev",{"id":482,"title":380,"body":483,"description":1190,"extension":1191,"links":1192,"meta":1193,"navigation":204,"new":18,"path":381,"rawbody":1194,"seo":1195,"stem":382,"__hash__":1196},"content\u002Fdocs\u002Fregistry\u002Fgetting-started.md",{"type":484,"value":485,"toc":1163},"minimark",[486,490,493,497,508,516,550,554,699,703,789,793,800,806,816,820,823,827,832,842,853,857,861,864,960,964,974,980,984,994,1000,1010,1014,1021,1027,1030,1034,1040,1044,1047,1061,1074,1078,1144,1150,1157],[487,488,489],"p",{},"This guide will walk you through the process of setting up your own component registry.",[487,491,492],{},"It assumes you already have a project with components and would like to turn it into a registry.",[494,495,388],"h2",{"id":496},"registryjson",[487,498,499,500,503,504,507],{},"The ",[501,502,388],"code",{}," file is only required if you're using the ",[501,505,506],{},"shadcn-vue"," CLI to build your registry.",[487,509,510,511,515],{},"If you're using a different build system, you can skip this step as long as your build system produces valid JSON files that conform to the ",[512,513,514],"a",{"href":385},"registry-item schema specification",".",[517,518,519,524,530,541],"steps",{},[520,521,523],"h3",{"id":522},"add-a-registryjson-file","Add a registry.json file",[487,525,526,527,529],{},"Create a ",[501,528,388],{}," file in the root of your project. Your project can be a Nuxt, Vite, or any other project that supports Vue.",[531,532,538],"pre",{"className":533,"code":535,"language":536,"meta":537},[534],"language-json","{\n  \"$schema\": \"https:\u002F\u002Fshadcn-vue.com\u002Fschema\u002Fregistry.json\",\n  \"name\": \"acme\",\n  \"homepage\": \"https:\u002F\u002Facme.com\",\n  \"items\": [\n    \u002F\u002F ...\n  ]\n}\n","json","showLineNumbers title=\"registry.json\"",[501,539,535],{"__ignoreMap":540},"",[487,542,543,544,546,547,515],{},"This ",[501,545,388],{}," file must conform to the ",[512,548,549],{"href":389},"registry schema specification",[494,551,553],{"id":552},"add-a-registry-item","Add a registry item",[517,555,556,560,567,576,599,607,630,634,639,658,678,693],{},[520,557,559],{"id":558},"create-your-component","Create your component",[487,561,562,563,566],{},"Add your first component. Here's an example of a simple ",[501,564,565],{},"\u003CHelloWorld \u002F>"," component:",[531,568,574],{"className":569,"code":571,"language":572,"meta":573},[570],"language-vue","\u003Cscript setup lang=\"ts\">\nimport { Button } from \"@\u002Fcomponents\u002Fui\u002Fbutton\"\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CButton>Hello World\u003C\u002FButton>\n\u003C\u002Ftemplate>\n","vue","showLineNumbers title=\"registry\u002Fnew-york\u002FHelloWorld\u002FHelloWorld.vue\"",[501,575,571],{"__ignoreMap":540},[577,578,581],"callout",{"className":579},[580],"mt-6",[487,582,583,587,588,591,592,594,595,598],{},[584,585,586],"strong",{},"Note:"," This example places the component in the ",[501,589,590],{},"registry\u002Fnew-york","\ndirectory. You can place it anywhere in your project as long as you set the\ncorrect path in the ",[501,593,388],{}," file and you follow the ",[501,596,597],{},"registry\u002F[NAME]","\ndirectory structure.",[531,600,605],{"className":601,"code":603,"language":604,"meta":540},[602],"language-txt","registry\n└── new-york\n    └── HelloWorld\n        └── HelloWorld.vue\n","txt",[501,606,603],{"__ignoreMap":540},[577,608,611,621],{"className":609},[580,610],"[&_pre]:mb-0",[487,612,613,616,617,620],{},[584,614,615],{},"Important:"," If you're placing your component in a custom directory, make\nsure it is configured in your ",[501,618,619],{},"tailwind.config.ts"," file.",[531,622,628],{"className":623,"code":625,"language":626,"meta":627},[624],"language-ts","\u002F\u002F tailwind.config.ts\nexport default {\n  content: [\".\u002Fregistry\u002F**\u002F*.{js,ts,jsx,tsx,vue}\"],\n}\n","ts","showLineNumbers",[501,629,625],{"__ignoreMap":540},[520,631,633],{"id":632},"add-your-component-to-the-registry","Add your component to the registry",[487,635,636,637,515],{},"To add your component to the registry, you need to add your component definition to ",[501,638,388],{},[531,640,656],{"className":641,"code":642,"highlights":643,"language":536,"meta":537},[534],"{\n  \"$schema\": \"https:\u002F\u002Fshadcn-vue.com\u002Fschema\u002Fregistry.json\",\n  \"name\": \"acme\",\n  \"homepage\": \"https:\u002F\u002Facme.com\",\n  \"items\": [\n    {\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\u002Fnew-york\u002FHelloWorld\u002FHelloWorld.vue\",\n          \"type\": \"registry:component\"\n        }\n      ]\n    }\n  ]\n}\n",[644,645,646,647,648,649,650,651,652,653,654,655],6,7,8,9,10,11,12,13,14,15,16,17,[501,657,642],{"__ignoreMap":540},[487,659,660,661,664,665,664,668,664,671,674,675,515],{},"You define your registry item by adding a ",[501,662,663],{},"name",", ",[501,666,667],{},"type",[501,669,670],{},"title",[501,672,673],{},"description"," and ",[501,676,677],{},"files",[487,679,680,681,674,684,686,687,689,690,692],{},"For every file you add, you must specify the ",[501,682,683],{},"path",[501,685,667],{}," of the file. The ",[501,688,683],{}," is the relative path to the file from the root of your project. The ",[501,691,667],{}," is the type of the file.",[487,694,695,696,515],{},"You can read more about the registry item schema and file types in the ",[512,697,698],{"href":385},"registry item schema docs",[494,700,702],{"id":701},"build-your-registry","Build your registry",[517,704,705,709,720,728,732,742,749,753,756,762],{},[520,706,708],{"id":707},"install-the-shadcn-vue-cli","Install the shadcn-vue CLI",[487,710,711,712,715,716,719],{},"Note: the ",[501,713,714],{},"build"," command is currently only available in the ",[501,717,718],{},"shadcn-vue@canary"," version of the CLI.",[531,721,726],{"className":722,"code":724,"language":725,"meta":540},[723],"language-bash","npm install shadcn-vue@latest\n","bash",[501,727,724],{"__ignoreMap":540},[520,729,731],{"id":730},"add-a-build-script","Add a build script",[487,733,734,735,738,739,620],{},"Add a ",[501,736,737],{},"registry:build"," script to your ",[501,740,741],{},"package.json",[531,743,747],{"className":744,"code":745,"language":536,"meta":746},[534],"{\n  \"scripts\": {\n    \"registry:build\": \"shadcn-vue build\"\n  }\n}\n","showLineNumbers title=\"package.json\"",[501,748,745],{"__ignoreMap":540},[520,750,752],{"id":751},"run-the-build-script","Run the build script",[487,754,755],{},"Run the build script to generate the registry JSON files.",[531,757,760],{"className":758,"code":759,"language":725,"meta":540},[723],"npm run registry:build\n",[501,761,759],{"__ignoreMap":540},[577,763,765,777],{"className":764},[580],[487,766,767,769,770,773,774,515],{},[584,768,586],{}," By default, the build script will generate the registry JSON files in ",[501,771,772],{},"public\u002Fr"," e.g ",[501,775,776],{},"public\u002Fr\u002Fhello-world.json",[487,778,779,780,783,784,788],{},"You can change the output directory by passing the ",[501,781,782],{},"--output"," option. See the ",[512,785,787],{"href":786},"\u002Fdocs\u002Fcli#build","shadcn-vue build command"," for more information.",[494,790,792],{"id":791},"serve-your-registry","Serve your registry",[487,794,795,796,799],{},"If you're running your registry on Nuxt, you can now serve your registry by running the ",[501,797,798],{},"nuxt"," server. The command might differ for other frameworks.",[531,801,804],{"className":802,"code":803,"language":725,"meta":540},[723],"npm run dev\n",[501,805,803],{"__ignoreMap":540},[487,807,808,809,812,813,515],{},"Your files will now be served at ",[501,810,811],{},"http:\u002F\u002Flocalhost:3000\u002Fr\u002F[NAME].json"," eg. ",[501,814,815],{},"http:\u002F\u002Flocalhost:3000\u002Fr\u002Fhello-world.json",[494,817,819],{"id":818},"publish-your-registry","Publish your registry",[487,821,822],{},"To make your registry available to other developers, you can publish it by deploying your project to a public URL.",[494,824,826],{"id":825},"adding-auth","Adding Auth",[487,828,499,829,831],{},[501,830,506],{}," CLI does not offer a built-in way to add auth to your registry. We recommend handling authorization on your registry server.",[487,833,834,835,838,839,515],{},"A common simple approach is to use a ",[501,836,837],{},"token"," query parameter to authenticate requests to your registry. e.g. ",[501,840,841],{},"http:\u002F\u002Flocalhost:3000\u002Fr\u002Fhello-world.json?token=[SECURE_TOKEN_HERE]",[487,843,844,845,848,849,852],{},"Use the secure token to authenticate requests and return a 401 Unauthorized response if the token is invalid. Both the ",[501,846,847],{},"shadcn"," CLI and ",[501,850,851],{},"Open in v0"," will handle the 401 response and display a message to the user.",[577,854,856],{"className":855},[580],"\n  **Note:** Make sure to encrypt and expire tokens.\n",[494,858,860],{"id":859},"guidelines","Guidelines",[487,862,863],{},"Here are some guidelines to follow when building components for a registry.",[865,866,867,883,894,914,935,947],"ul",{},[868,869,870,871,874,875,878,879,882],"li",{},"Place your registry item in the ",[501,872,873],{},"registry\u002F[STYLE]\u002F[NAME]"," directory. I'm using ",[501,876,877],{},"new-york"," as an example. It can be anything you want as long as it's nested under the ",[501,880,881],{},"registry"," directory.",[868,884,885,886,664,888,664,890,674,892,515],{},"The following properties are required for the block definition: ",[501,887,663],{},[501,889,673],{},[501,891,667],{},[501,893,677],{},[868,895,896,897,900,901,664,904,664,907,910,911,515],{},"Make sure to list all registry dependencies in ",[501,898,899],{},"registryDependencies",". A registry dependency is the name of the component in the registry eg. ",[501,902,903],{},"input",[501,905,906],{},"button",[501,908,909],{},"card",", etc or a URL to a registry item eg. ",[501,912,913],{},"http:\u002F\u002Flocalhost:3000\u002Fr\u002Feditor.json",[868,915,916,917,920,921,664,924,927,928,931,932,515],{},"Make sure to list all dependencies in ",[501,918,919],{},"dependencies",". A dependency is the name of the package in the registry eg. ",[501,922,923],{},"zod",[501,925,926],{},"sonner",", etc. To set a version, you can use the ",[501,929,930],{},"name@version"," format eg. ",[501,933,934],{},"zod@^3.20.0",[868,936,937,812,944],{},[584,938,939,940,943],{},"Imports should always use the ",[501,941,942],{},"@\u002Fregistry"," path.",[501,945,946],{},"import { HelloWorld } from \"@\u002Fregistry\u002Fnew-york\u002Fhello-world\u002Fhello-world\"",[868,948,949,950,664,953,664,956,959],{},"Ideally, place your files within a registry item in ",[501,951,952],{},"components",[501,954,955],{},"hooks",[501,957,958],{},"lib"," directories.",[494,961,963],{"id":962},"install-using-the-cli","Install using the CLI",[487,965,966,967,969,970,973],{},"To install a registry item using the ",[501,968,506],{}," CLI, use the ",[501,971,972],{},"add"," command followed by the URL of the registry item.",[531,975,978],{"className":976,"code":977,"language":725,"meta":540},[723],"npx shadcn-vue@latest add http:\u002F\u002Flocalhost:3000\u002Fr\u002Fhello-world.json\n",[501,979,977],{"__ignoreMap":540},[494,981,983],{"id":982},"install-from-github","Install from GitHub",[487,985,986,987,990,991,993],{},"If your registry lives in a ",[584,988,989],{},"public"," GitHub repository with a ",[501,992,388],{},"\nat its root, you do not have to build, host or configure anything. The CLI can\nread it directly:",[531,995,998],{"className":996,"code":997,"language":725,"meta":540},[723],"npx shadcn-vue@latest add owner\u002Frepo\u002Fhello-world\n",[501,999,997],{"__ignoreMap":540},[487,1001,1002,1003,1005,1006,1009],{},"The CLI resolves the repository's default branch, reads ",[501,1004,388],{}," from the\nroot, finds the item by name, and fetches each of its ",[501,1007,1008],{},"files[].path"," from the\nsame commit. Every file of an item comes from one commit, so a branch that moves\nmid-install cannot give you a half-updated component.",[520,1011,1013],{"id":1012},"pinning-a-branch-tag-or-commit","Pinning a branch, tag or commit",[487,1015,1016,1017,1020],{},"Append ",[501,1018,1019],{},"#ref"," to install from somewhere other than the default branch:",[531,1022,1025],{"className":1023,"code":1024,"language":725,"meta":540},[723],"npx shadcn-vue@latest add owner\u002Frepo\u002Fhello-world#main\nnpx shadcn-vue@latest add owner\u002Frepo\u002Fhello-world#v1.2.0\nnpx shadcn-vue@latest add owner\u002Frepo\u002Fhello-world#1a2b3c4d5e6f7a8b9c0d1e2f3a4b5c6d7e8f9a0b\n",[501,1026,1024],{"__ignoreMap":540},[487,1028,1029],{},"Branches win over tags when a name is ambiguous, and an annotated tag resolves to\nthe commit it points at.",[520,1031,1033],{"id":1032},"listing-what-a-repository-publishes","Listing what a repository publishes",[531,1035,1038],{"className":1036,"code":1037,"language":725,"meta":540},[723],"npx shadcn-vue@latest search owner\u002Frepo\n",[501,1039,1037],{"__ignoreMap":540},[520,1041,1043],{"id":1042},"only-install-from-repositories-you-trust","Only install from repositories you trust",[487,1045,1046],{},"Adding a registry item runs third-party code on your machine. This is true of\nevery registry — hosted, local or GitHub — but the GitHub form is worth calling\nout because it needs no configuration, so a single command from a README is\nenough to install from a repository you have never looked at.",[487,1048,1049,1050,1052,1053,1056,1057,1060],{},"A registry item can list npm ",[501,1051,919],{},", which the CLI installs with your\npackage manager, which in turn runs that package's install scripts. It can also\nwrite files into your project. Treat ",[501,1054,1055],{},"npx shadcn-vue@latest add owner\u002Frepo\u002Fitem","\nwith the same care as ",[501,1058,1059],{},"npm install owner-repo"," — read the registry first if you\ndo not know who owns it.",[487,1062,1063,1064,674,1066,1069,1070,1073],{},"The CLI does reject ",[501,1065,683],{},[501,1067,1068],{},"target"," values that are absolute or use ",[501,1071,1072],{},".."," to\nescape the project, both for the item you asked for and at the point files are\nwritten. That is a guard against mistakes and a hostile item's easiest trick; it\nis not a sandbox.",[520,1075,1077],{"id":1076},"notes","Notes",[865,1079,1080,1103,1117,1130],{},[868,1081,1082,1085,1086,1089,1090,1085,1094,1097,1098,1100,1101,515],{},[584,1083,1084],{},"Item names may contain slashes."," ",[501,1087,1088],{},"owner\u002Frepo\u002Fforms\u002Flogin"," installs the item\n",[1091,1092,1093],"em",{},"named",[501,1095,1096],{},"forms\u002Flogin"," from the root ",[501,1099,388],{},". It is not a path to a\nnested ",[501,1102,388],{},[868,1104,1105,1085,1108,1111,1112,1116],{},[584,1106,1107],{},"The repository must be public.",[501,1109,1110],{},"raw.githubusercontent.com"," does not serve\nprivate repositories. Use a hosted registry with ",[512,1113,1115],{"href":1114},"#adding-auth","auth"," instead.",[868,1118,1119,1122,1123,1126,1127,515],{},[584,1120,1121],{},"Git is required."," The CLI shells out to ",[501,1124,1125],{},"git ls-remote"," to resolve the ref,\nwhich is what lets it find the default branch instead of guessing ",[501,1128,1129],{},"main",[868,1131,1132,1137,1138,1140,1141,1143],{},[584,1133,1134,1136],{},[501,1135,899],{}," are resolved the usual way."," A full URL is fetched\nas-is; a bare name such as ",[501,1139,906],{}," resolves against the default ",[501,1142,506],{},"\nregistry, exactly as it does for any other registry item. Note that a\ndependency can point anywhere, so trusting a repository means trusting what it\ndepends on too.",[487,1145,1146,1147,1149],{},"If you would rather not type the repository on every command, register a\nnamespace in ",[501,1148,420],{}," and install by that instead. A namespace maps to\na hosted registry URL template — not to a GitHub repository — so this is an\nalternative to the GitHub form above rather than a shorthand for it:",[531,1151,1155],{"className":1152,"code":1153,"language":536,"meta":1154},[534],"{\n  \"registries\": {\n    \"@acme\": \"https:\u002F\u002Facme.com\u002Fr\u002F{name}.json\"\n  }\n}\n","title=\"components.json\"",[501,1156,1153],{"__ignoreMap":540},[531,1158,1161],{"className":1159,"code":1160,"language":725,"meta":540},[723],"npx shadcn-vue@latest add @acme\u002Fhello-world\n",[501,1162,1160],{"__ignoreMap":540},{"title":540,"searchDepth":1164,"depth":1164,"links":1165},2,[1166,1170,1174,1179,1180,1181,1182,1183,1184],{"id":496,"depth":1164,"text":388,"children":1167},[1168],{"id":522,"depth":1169,"text":523},3,{"id":552,"depth":1164,"text":553,"children":1171},[1172,1173],{"id":558,"depth":1169,"text":559},{"id":632,"depth":1169,"text":633},{"id":701,"depth":1164,"text":702,"children":1175},[1176,1177,1178],{"id":707,"depth":1169,"text":708},{"id":730,"depth":1169,"text":731},{"id":751,"depth":1169,"text":752},{"id":791,"depth":1164,"text":792},{"id":818,"depth":1164,"text":819},{"id":825,"depth":1164,"text":826},{"id":859,"depth":1164,"text":860},{"id":962,"depth":1164,"text":963},{"id":982,"depth":1164,"text":983,"children":1185},[1186,1187,1188,1189],{"id":1012,"depth":1169,"text":1013},{"id":1032,"depth":1169,"text":1033},{"id":1042,"depth":1169,"text":1043},{"id":1076,"depth":1169,"text":1077},"Learn how to get setup and run your own component registry.","md",null,{},"---\ntitle: Getting Started\ndescription: Learn how to get setup and run your own component registry.\n---\n\nThis guide will walk you through the process of setting up your own component registry.\n\nIt assumes you already have a project with components and would like to turn it into a registry.\n\n\u003C!-- If you're starting a new registry project, you can use the [registry template](https:\u002F\u002Fgithub.com\u002Fshadcn-ui\u002Fregistry-template) as a starting point. We have already configured it for you. -->\n\n## registry.json\n\nThe `registry.json` file is only required if you're using the `shadcn-vue` CLI to build your registry.\n\nIf you're using a different build system, you can skip this step as long as your build system produces valid JSON files that conform to the [registry-item schema specification](\u002Fdocs\u002Fregistry\u002Fregistry-item-json).\n\n\u003CSteps>\n\n### Add a registry.json file\n\nCreate a `registry.json` file in the root of your project. Your project can be a Nuxt, Vite, or any other project that supports Vue.\n\n```json showLineNumbers title=\"registry.json\"\n{\n  \"$schema\": \"https:\u002F\u002Fshadcn-vue.com\u002Fschema\u002Fregistry.json\",\n  \"name\": \"acme\",\n  \"homepage\": \"https:\u002F\u002Facme.com\",\n  \"items\": [\n    \u002F\u002F ...\n  ]\n}\n```\n\nThis `registry.json` file must conform to the [registry schema specification](\u002Fdocs\u002Fregistry\u002Fregistry-json).\n\n\u003C\u002FSteps>\n\n## Add a registry item\n\n\u003CSteps>\n\n### Create your component\n\nAdd your first component. Here's an example of a simple `\u003CHelloWorld \u002F>` component:\n\n```vue showLineNumbers title=\"registry\u002Fnew-york\u002FHelloWorld\u002FHelloWorld.vue\"\n\u003Cscript setup lang=\"ts\">\nimport { Button } from \"@\u002Fcomponents\u002Fui\u002Fbutton\"\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CButton>Hello World\u003C\u002FButton>\n\u003C\u002Ftemplate>\n```\n\n\u003CCallout class=\"mt-6\">\n\n  **Note:** This example places the component in the `registry\u002Fnew-york`\n  directory. You can place it anywhere in your project as long as you set the\n  correct path in the `registry.json` file and you follow the `registry\u002F[NAME]`\n  directory structure.\n\n\u003C\u002FCallout>\n\n```txt\nregistry\n└── new-york\n    └── HelloWorld\n        └── HelloWorld.vue\n```\n\n\u003CCallout class=\"mt-6 [&_pre]:mb-0\">\n\n  **Important:** If you're placing your component in a custom directory, make\n  sure it is configured in your `tailwind.config.ts` file.\n\n```ts showLineNumbers\n\u002F\u002F tailwind.config.ts\nexport default {\n  content: [\".\u002Fregistry\u002F**\u002F*.{js,ts,jsx,tsx,vue}\"],\n}\n```\n\n\u003C\u002FCallout>\n\n### Add your component to the registry\n\nTo add your component to the registry, you need to add your component definition to `registry.json`.\n\n```json showLineNumbers title=\"registry.json\"  {6-17}\n{\n  \"$schema\": \"https:\u002F\u002Fshadcn-vue.com\u002Fschema\u002Fregistry.json\",\n  \"name\": \"acme\",\n  \"homepage\": \"https:\u002F\u002Facme.com\",\n  \"items\": [\n    {\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\u002Fnew-york\u002FHelloWorld\u002FHelloWorld.vue\",\n          \"type\": \"registry:component\"\n        }\n      ]\n    }\n  ]\n}\n```\n\nYou define your registry item by adding a `name`, `type`, `title`, `description` and `files`.\n\nFor every file you add, you must specify the `path` and `type` of the file. The `path` is the relative path to the file from the root of your project. The `type` is the type of the file.\n\nYou can read more about the registry item schema and file types in the [registry item schema docs](\u002Fdocs\u002Fregistry\u002Fregistry-item-json).\n\n\u003C\u002FSteps>\n\n## Build your registry\n\n\u003CSteps>\n\n### Install the shadcn-vue CLI\n\nNote: the `build` command is currently only available in the `shadcn-vue@canary` version of the CLI.\n\n```bash\nnpm install shadcn-vue@latest\n```\n\n### Add a build script\n\nAdd a `registry:build` script to your `package.json` file.\n\n```json showLineNumbers title=\"package.json\"\n{\n  \"scripts\": {\n    \"registry:build\": \"shadcn-vue build\"\n  }\n}\n```\n\n### Run the build script\n\nRun the build script to generate the registry JSON files.\n\n```bash\nnpm run registry:build\n```\n\n\u003CCallout class=\"mt-6\">\n\n**Note:** By default, the build script will generate the registry JSON files in `public\u002Fr` e.g `public\u002Fr\u002Fhello-world.json`.\n\nYou can change the output directory by passing the `--output` option. See the [shadcn-vue build command](\u002Fdocs\u002Fcli#build) for more information.\n\n\u003C\u002FCallout>\n\n\u003C\u002FSteps>\n\n## Serve your registry\n\nIf you're running your registry on Nuxt, you can now serve your registry by running the `nuxt` server. The command might differ for other frameworks.\n\n```bash\nnpm run dev\n```\n\nYour files will now be served at `http:\u002F\u002Flocalhost:3000\u002Fr\u002F[NAME].json` eg. `http:\u002F\u002Flocalhost:3000\u002Fr\u002Fhello-world.json`.\n\n## Publish your registry\n\nTo make your registry available to other developers, you can publish it by deploying your project to a public URL.\n\n## Adding Auth\n\nThe `shadcn-vue` CLI does not offer a built-in way to add auth to your registry. We recommend handling authorization on your registry server.\n\nA common simple approach is to use a `token` query parameter to authenticate requests to your registry. e.g. `http:\u002F\u002Flocalhost:3000\u002Fr\u002Fhello-world.json?token=[SECURE_TOKEN_HERE]`.\n\nUse the secure token to authenticate requests and return a 401 Unauthorized response if the token is invalid. Both the `shadcn` CLI and `Open in v0` will handle the 401 response and display a message to the user.\n\n\u003CCallout class=\"mt-6\">\n  **Note:** Make sure to encrypt and expire tokens.\n\u003C\u002FCallout>\n\n## Guidelines\n\nHere are some guidelines to follow when building components for a registry.\n\n- Place your registry item in the `registry\u002F[STYLE]\u002F[NAME]` directory. I'm using `new-york` as an example. It can be anything you want as long as it's nested under the `registry` directory.\n- The following properties are required for the block definition: `name`, `description`, `type` and `files`.\n- Make sure to list all registry dependencies in `registryDependencies`. A registry dependency is the name of the component in the registry eg. `input`, `button`, `card`, etc or a URL to a registry item eg. `http:\u002F\u002Flocalhost:3000\u002Fr\u002Feditor.json`.\n- Make sure to list all dependencies in `dependencies`. A dependency is the name of the package in the registry eg. `zod`, `sonner`, etc. To set a version, you can use the `name@version` format eg. `zod@^3.20.0`.\n- **Imports should always use the `@\u002Fregistry` path.** eg. `import { HelloWorld } from \"@\u002Fregistry\u002Fnew-york\u002Fhello-world\u002Fhello-world\"`\n- Ideally, place your files within a registry item in `components`, `hooks`, `lib` directories.\n\n## Install using the CLI\n\nTo install a registry item using the `shadcn-vue` CLI, use the `add` command followed by the URL of the registry item.\n\n```bash\nnpx shadcn-vue@latest add http:\u002F\u002Flocalhost:3000\u002Fr\u002Fhello-world.json\n```\n\n## Install from GitHub\n\nIf your registry lives in a **public** GitHub repository with a `registry.json`\nat its root, you do not have to build, host or configure anything. The CLI can\nread it directly:\n\n```bash\nnpx shadcn-vue@latest add owner\u002Frepo\u002Fhello-world\n```\n\nThe CLI resolves the repository's default branch, reads `registry.json` from the\nroot, finds the item by name, and fetches each of its `files[].path` from the\nsame commit. Every file of an item comes from one commit, so a branch that moves\nmid-install cannot give you a half-updated component.\n\n### Pinning a branch, tag or commit\n\nAppend `#ref` to install from somewhere other than the default branch:\n\n```bash\nnpx shadcn-vue@latest add owner\u002Frepo\u002Fhello-world#main\nnpx shadcn-vue@latest add owner\u002Frepo\u002Fhello-world#v1.2.0\nnpx shadcn-vue@latest add owner\u002Frepo\u002Fhello-world#1a2b3c4d5e6f7a8b9c0d1e2f3a4b5c6d7e8f9a0b\n```\n\nBranches win over tags when a name is ambiguous, and an annotated tag resolves to\nthe commit it points at.\n\n### Listing what a repository publishes\n\n```bash\nnpx shadcn-vue@latest search owner\u002Frepo\n```\n\n### Only install from repositories you trust\n\nAdding a registry item runs third-party code on your machine. This is true of\nevery registry — hosted, local or GitHub — but the GitHub form is worth calling\nout because it needs no configuration, so a single command from a README is\nenough to install from a repository you have never looked at.\n\nA registry item can list npm `dependencies`, which the CLI installs with your\npackage manager, which in turn runs that package's install scripts. It can also\nwrite files into your project. Treat `npx shadcn-vue@latest add owner\u002Frepo\u002Fitem`\nwith the same care as `npm install owner-repo` — read the registry first if you\ndo not know who owns it.\n\nThe CLI does reject `path` and `target` values that are absolute or use `..` to\nescape the project, both for the item you asked for and at the point files are\nwritten. That is a guard against mistakes and a hostile item's easiest trick; it\nis not a sandbox.\n\n### Notes\n\n- **Item names may contain slashes.** `owner\u002Frepo\u002Fforms\u002Flogin` installs the item\n  *named* `forms\u002Flogin` from the root `registry.json`. It is not a path to a\n  nested `registry.json`.\n- **The repository must be public.** `raw.githubusercontent.com` does not serve\n  private repositories. Use a hosted registry with [auth](#adding-auth) instead.\n- **Git is required.** The CLI shells out to `git ls-remote` to resolve the ref,\n  which is what lets it find the default branch instead of guessing `main`.\n- **`registryDependencies` are resolved the usual way.** A full URL is fetched\n  as-is; a bare name such as `button` resolves against the default `shadcn-vue`\n  registry, exactly as it does for any other registry item. Note that a\n  dependency can point anywhere, so trusting a repository means trusting what it\n  depends on too.\n\nIf you would rather not type the repository on every command, register a\nnamespace in `components.json` and install by that instead. A namespace maps to\na hosted registry URL template — not to a GitHub repository — so this is an\nalternative to the GitHub form above rather than a shorthand for it:\n\n```json title=\"components.json\"\n{\n  \"registries\": {\n    \"@acme\": \"https:\u002F\u002Facme.com\u002Fr\u002F{name}.json\"\n  }\n}\n```\n\n```bash\nnpx shadcn-vue@latest add @acme\u002Fhello-world\n```\n",{"title":380,"description":1190},"Sfzh6u1C3b74CZWbCNEXLgeEuFAC02_eb91FqbqnUyo",[1198,1199],{"title":376,"path":377,"stem":378,"children":-1},{"title":384,"path":385,"stem":386,"children":-1},1788943242198]