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