[{"data":1,"prerenderedAt":904},["ShallowReactive",2],{"navigation":3,"$f1jvagmno7cfld":496,"\u002Fdocs\u002Fregistry\u002Fexamples":507,"surround-\u002Fdocs\u002Fregistry\u002Fexamples":901},[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":400,"body":509,"description":895,"extension":896,"links":501,"meta":897,"navigation":220,"new":18,"path":401,"rawbody":898,"seo":899,"stem":402,"__hash__":900},"content\u002Fdocs\u002Fregistry\u002Fexamples.md",{"type":510,"value":511,"toc":865},"minimark",[512,517,522,531,577,588,592,599,602,609,661,667,671,675,682,686,692,698,702,706,712,719,723,726,730,746,752,756,760,767,773,777,783,787,791,798,801,808,812,816,823,827,834,838,845,849,859],[513,514,516],"h2",{"id":515},"registrystyle","registry:style",[518,519,521],"h3",{"id":520},"custom-style-that-extends-hui-kit","Custom style that extends hui-kit",[523,524,525,526,530],"p",{},"The following registry item is a custom style that extends hui-kit. On ",[527,528,529],"code",{},"npx hui-kit init",", it will:",[532,533,534,542,553,559,570],"ul",{},[535,536,537,538,541],"li",{},"Install ",[527,539,540],{},"@iconify\u002Fvue"," as a dependency.",[535,543,544,545,548,549,552],{},"Add the ",[527,546,547],{},"Login01"," block and ",[527,550,551],{},"calendar"," component to the project.",[535,554,544,555,558],{},[527,556,557],{},"editor"," from a remote registry.",[535,560,561,562,565,566,569],{},"Set the ",[527,563,564],{},"font-sans"," variable to ",[527,567,568],{},"Inter, sans-serif",".",[535,571,572,573,576],{},"Install a ",[527,574,575],{},"brand"," color in light and dark mode.",[578,579,585],"pre",{"className":580,"code":582,"language":583,"meta":584},[581],"language-json","{\n  \"$schema\": \"https:\u002F\u002Fclientik.github.io\u002Fhui-vue\u002Fschema\u002Fregistry-item.json\",\n  \"name\": \"example-style\",\n  \"type\": \"registry:style\",\n  \"dependencies\": [\"@iconify\u002Fvue\"],\n  \"registryDependencies\": [\n    \"Login01\",\n    \"calendar\",\n    \"https:\u002F\u002Fexample.com\u002Fr\u002Feditor.json\"\n  ],\n  \"cssVars\": {\n    \"theme\": {\n      \"font-sans\": \"Inter, sans-serif\"\n    },\n    \"light\": {\n      \"brand\": \"20 14.3% 4.1%\"\n    },\n    \"dark\": {\n      \"brand\": \"20 14.3% 4.1%\"\n    }\n  }\n}\n","json","showLineNumbers title=\"example-style.json\"",[527,586,582],{"__ignoreMap":587},"",[518,589,591],{"id":590},"custom-style-from-scratch","Custom style from scratch",[523,593,594,595,598],{},"The following registry item is a custom style that doesn't extend hui-kit. See the ",[527,596,597],{},"extends: none"," field.",[523,600,601],{},"It can be used to create a new style from scratch i.e custom components, css vars, dependencies, etc.",[523,603,604,605,608],{},"On ",[527,606,607],{},"npx hui-kit add",", the following will:",[532,610,611,621,627,644],{},[535,612,537,613,616,617,620],{},[527,614,615],{},"tailwind-merge"," and ",[527,618,619],{},"clsx"," as dependencies.",[535,622,544,623,626],{},[527,624,625],{},"utils"," registry item from the hui-kit registry.",[535,628,544,629,632,633,632,636,639,640,643],{},[527,630,631],{},"button",", ",[527,634,635],{},"input",[527,637,638],{},"label",", and ",[527,641,642],{},"select"," components from a remote registry.",[535,645,646,647,632,649,632,652,632,655,632,658,569],{},"Install new css vars: ",[527,648,506],{},[527,650,651],{},"bg",[527,653,654],{},"border",[527,656,657],{},"text",[527,659,660],{},"ring",[578,662,665],{"className":663,"code":664,"language":583,"meta":584},[581],"{\n  \"$schema\": \"https:\u002F\u002Fclientik.github.io\u002Fhui-vue\u002Fschema\u002Fregistry-item.json\",\n  \"extends\": \"none\",\n  \"name\": \"new-style\",\n  \"type\": \"registry:style\",\n  \"dependencies\": [\"tailwind-merge\", \"clsx\"],\n  \"registryDependencies\": [\n    \"utils\",\n    \"https:\u002F\u002Fexample.com\u002Fr\u002Fbutton.json\",\n    \"https:\u002F\u002Fexample.com\u002Fr\u002Finput.json\",\n    \"https:\u002F\u002Fexample.com\u002Fr\u002Flabel.json\",\n    \"https:\u002F\u002Fexample.com\u002Fr\u002Fselect.json\"\n  ],\n  \"cssVars\": {\n    \"theme\": {\n      \"font-sans\": \"Inter, sans-serif\"\n    },\n    \"light\": {\n      \"main\": \"#88aaee\",\n      \"bg\": \"#dfe5f2\",\n      \"border\": \"#000\",\n      \"text\": \"#000\",\n      \"ring\": \"#000\"\n    },\n    \"dark\": {\n      \"main\": \"#88aaee\",\n      \"bg\": \"#272933\",\n      \"border\": \"#000\",\n      \"text\": \"#e6e6e6\",\n      \"ring\": \"#fff\"\n    }\n  }\n}\n",[527,666,664],{"__ignoreMap":587},[513,668,670],{"id":669},"registrytheme","registry:theme",[518,672,674],{"id":673},"custom-theme","Custom theme",[578,676,680],{"className":677,"code":678,"language":583,"meta":679},[581],"{\n  \"$schema\": \"https:\u002F\u002Fclientik.github.io\u002Fhui-vue\u002Fschema\u002Fregistry-item.json\",\n  \"name\": \"custom-theme\",\n  \"type\": \"registry:theme\",\n  \"cssVars\": {\n    \"light\": {\n      \"background\": \"oklch(1 0 0)\",\n      \"foreground\": \"oklch(0.141 0.005 285.823)\",\n      \"primary\": \"oklch(0.546 0.245 262.881)\",\n      \"primary-foreground\": \"oklch(0.97 0.014 254.604)\",\n      \"ring\": \"oklch(0.746 0.16 232.661)\",\n      \"sidebar-primary\": \"oklch(0.546 0.245 262.881)\",\n      \"sidebar-primary-foreground\": \"oklch(0.97 0.014 254.604)\",\n      \"sidebar-ring\": \"oklch(0.746 0.16 232.661)\"\n    },\n    \"dark\": {\n      \"background\": \"oklch(1 0 0)\",\n      \"foreground\": \"oklch(0.141 0.005 285.823)\",\n      \"primary\": \"oklch(0.707 0.165 254.624)\",\n      \"primary-foreground\": \"oklch(0.97 0.014 254.604)\",\n      \"ring\": \"oklch(0.707 0.165 254.624)\",\n      \"sidebar-primary\": \"oklch(0.707 0.165 254.624)\",\n      \"sidebar-primary-foreground\": \"oklch(0.97 0.014 254.604)\",\n      \"sidebar-ring\": \"oklch(0.707 0.165 254.624)\"\n    }\n  }\n}\n","showLineNumbers title=\"example-theme.json\"",[527,681,678],{"__ignoreMap":587},[518,683,685],{"id":684},"custom-colors","Custom colors",[523,687,688,689,691],{},"The following style will init using hui-kit defaults and then add a custom ",[527,690,575],{}," color.",[578,693,696],{"className":694,"code":695,"language":583,"meta":584},[581],"{\n  \"$schema\": \"https:\u002F\u002Fclientik.github.io\u002Fhui-vue\u002Fschema\u002Fregistry-item.json\",\n  \"name\": \"custom-style\",\n  \"type\": \"registry:style\",\n  \"cssVars\": {\n    \"light\": {\n      \"brand\": \"oklch(0.99 0.00 0)\"\n    },\n    \"dark\": {\n      \"brand\": \"oklch(0.14 0.00 286)\"\n    }\n  }\n}\n",[527,697,695],{"__ignoreMap":587},[513,699,701],{"id":700},"registryblock","registry:block",[518,703,705],{"id":704},"custom-block","Custom block",[523,707,708,709,711],{},"This blocks installs the ",[527,710,547],{}," block from the hui-kit registry.",[578,713,717],{"className":714,"code":715,"language":583,"meta":716},[581],"{\n  \"$schema\": \"https:\u002F\u002Fclientik.github.io\u002Fhui-vue\u002Fschema\u002Fregistry-item.json\",\n  \"name\": \"Login01\",\n  \"type\": \"registry:block\",\n  \"description\": \"A simple login form.\",\n  \"registryDependencies\": [\"button\", \"card\", \"input\", \"label\"],\n  \"files\": [\n    {\n      \"path\": \"blocks\u002FLogin01\u002Fpage.vue\",\n      \"content\": \"import { LoginForm } ...\",\n      \"type\": \"registry:page\",\n      \"target\": \"pages\u002Flogin\u002Findex.vue\"\n    },\n    {\n      \"path\": \"blocks\u002Flogin-01\u002Fcomponents\u002FLoginForm.vue\",\n      \"content\": \"...\",\n      \"type\": \"registry:component\"\n    }\n  ]\n}\n","showLineNumbers title=\"Login01.json\"",[527,718,715],{"__ignoreMap":587},[518,720,722],{"id":721},"install-a-block-and-override-primitives","Install a block and override primitives",[523,724,725],{},"You can install a block fromt the hui-kit registry and override the primitives using your custom ones.",[523,727,604,728,608],{},[527,729,607],{},[532,731,732,736],{},[535,733,544,734,711],{},[527,735,547],{},[535,737,738,739,632,741,639,743,745],{},"Override the ",[527,740,631],{},[527,742,635],{},[527,744,638],{}," primitives with the ones from the remote registry.",[578,747,750],{"className":748,"code":749,"language":583,"meta":584},[581],"{\n  \"$schema\": \"https:\u002F\u002Fclientik.github.io\u002Fhui-vue\u002Fschema\u002Fregistry-item.json\",\n  \"name\": \"custom-login\",\n  \"type\": \"registry:block\",\n  \"registryDependencies\": [\n    \"Login01\",\n    \"https:\u002F\u002Fexample.com\u002Fr\u002Fbutton.json\",\n    \"https:\u002F\u002Fexample.com\u002Fr\u002Finput.json\",\n    \"https:\u002F\u002Fexample.com\u002Fr\u002Flabel.json\"\n  ]\n}\n",[527,751,749],{"__ignoreMap":587},[513,753,755],{"id":754},"css-variables","CSS Variables",[518,757,759],{"id":758},"custom-theme-variables","Custom Theme Variables",[523,761,762,763,766],{},"Add custom theme variables to the ",[527,764,765],{},"theme"," object.",[578,768,771],{"className":769,"code":770,"language":583,"meta":679},[581],"{\n  \"$schema\": \"https:\u002F\u002Fclientik.github.io\u002Fhui-vue\u002Fschema\u002Fregistry-item.json\",\n  \"name\": \"custom-theme\",\n  \"type\": \"registry:theme\",\n  \"cssVars\": {\n    \"theme\": {\n      \"font-heading\": \"Inter, sans-serif\",\n      \"shadow-card\": \"0 0 0 1px rgba(0, 0, 0, 0.1)\"\n    }\n  }\n}\n",[527,772,770],{"__ignoreMap":587},[518,774,776],{"id":775},"override-tailwind-css-variables","Override Tailwind CSS variables",[578,778,781],{"className":779,"code":780,"language":583,"meta":679},[581],"{\n  \"$schema\": \"https:\u002F\u002Fclientik.github.io\u002Fhui-vue\u002Fschema\u002Fregistry-item.json\",\n  \"name\": \"custom-theme\",\n  \"type\": \"registry:theme\",\n  \"cssVars\": {\n    \"theme\": {\n      \"spacing\": \"0.2rem\",\n      \"breakpoint-sm\": \"640px\",\n      \"breakpoint-md\": \"768px\",\n      \"breakpoint-lg\": \"1024px\",\n      \"breakpoint-xl\": \"1280px\",\n      \"breakpoint-2xl\": \"1536px\"\n    }\n  }\n}\n",[527,782,780],{"__ignoreMap":587},[513,784,786],{"id":785},"add-custom-css","Add custom CSS",[518,788,790],{"id":789},"base-styles","Base styles",[578,792,796],{"className":793,"code":794,"language":583,"meta":795},[581],"{\n  \"$schema\": \"https:\u002F\u002Fclientik.github.io\u002Fhui-vue\u002Fschema\u002Fregistry-item.json\",\n  \"name\": \"custom-style\",\n  \"type\": \"registry:style\",\n  \"css\": {\n    \"@layer base\": {\n      \"h1\": {\n        \"font-size\": \"var(--text-2xl)\"\n      },\n      \"h2\": {\n        \"font-size\": \"var(--text-xl)\"\n      }\n    }\n  }\n}\n","showLineNumbers title=\"example-base.json\"",[527,797,794],{"__ignoreMap":587},[518,799,10],{"id":800},"components",[578,802,806],{"className":803,"code":804,"language":583,"meta":805},[581],"{\n  \"$schema\": \"https:\u002F\u002Fclientik.github.io\u002Fhui-vue\u002Fschema\u002Fregistry-item.json\",\n  \"name\": \"custom-card\",\n  \"type\": \"registry:component\",\n  \"css\": {\n    \"@layer components\": {\n      \"card\": {\n        \"background-color\": \"var(--color-white)\",\n        \"border-radius\": \"var(--rounded-lg)\",\n        \"padding\": \"var(--spacing-6)\",\n        \"box-shadow\": \"var(--shadow-xl)\"\n      }\n    }\n  }\n}\n","showLineNumbers title=\"example-card.json\"",[527,807,804],{"__ignoreMap":587},[513,809,811],{"id":810},"add-custom-utilities","Add custom utilities",[518,813,815],{"id":814},"simple-utility","Simple utility",[578,817,821],{"className":818,"code":819,"language":583,"meta":820},[581],"{\n  \"$schema\": \"https:\u002F\u002Fclientik.github.io\u002Fhui-vue\u002Fschema\u002Fregistry-item.json\",\n  \"name\": \"custom-component\",\n  \"type\": \"registry:component\",\n  \"css\": {\n    \"@utility content-auto\": {\n      \"content-visibility\": \"auto\"\n    }\n  }\n}\n","showLineNumbers title=\"example-component.json\"",[527,822,819],{"__ignoreMap":587},[518,824,826],{"id":825},"complex-utility","Complex utility",[578,828,832],{"className":829,"code":830,"language":583,"meta":831},[581],"{\n  \"$schema\": \"https:\u002F\u002Fclientik.github.io\u002Fhui-vue\u002Fschema\u002Fregistry-item.json\",\n  \"name\": \"custom-component\",\n  \"type\": \"registry:component\",\n  \"css\": {\n    \"@utility scrollbar-hidden\": {\n      \"scrollbar-hidden\": {\n        \"&::-webkit-scrollbar\": {\n          \"display\": \"none\"\n        }\n      }\n    }\n  }\n}\n","showLineNumbers title=\"example-utility.json\"",[527,833,830],{"__ignoreMap":587},[518,835,837],{"id":836},"functional-utilities","Functional utilities",[578,839,843],{"className":840,"code":841,"language":583,"meta":842},[581],"{\n  \"$schema\": \"https:\u002F\u002Fclientik.github.io\u002Fhui-vue\u002Fschema\u002Fregistry-item.json\",\n  \"name\": \"custom-component\",\n  \"type\": \"registry:component\",\n  \"css\": {\n    \"@utility tab-*\": {\n      \"tab-size\": \"var(--tab-size-*)\"\n    }\n  }\n}\n","showLineNumbers title=\"example-functional.json\"",[527,844,841],{"__ignoreMap":587},[513,846,848],{"id":847},"add-custom-animations","Add custom animations",[523,850,851,852,855,856,858],{},"Note: you need to define both ",[527,853,854],{},"@keyframes"," in css and ",[527,857,765],{}," in cssVars to use animations.",[578,860,863],{"className":861,"code":862,"language":583,"meta":820},[581],"{\n  \"$schema\": \"https:\u002F\u002Fclientik.github.io\u002Fhui-vue\u002Fschema\u002Fregistry-item.json\",\n  \"name\": \"custom-component\",\n  \"type\": \"registry:component\",\n  \"cssVars\": {\n    \"theme\": {\n      \"--animate-wiggle\": \"wiggle 1s ease-in-out infinite\"\n    }\n  },\n  \"css\": {\n    \"@keyframes wiggle\": {\n      \"0%, 100%\": {\n        \"transform\": \"rotate(-3deg)\"\n      },\n      \"50%\": {\n        \"transform\": \"rotate(3deg)\"\n      }\n    }\n  }\n}\n",[527,864,862],{"__ignoreMap":587},{"title":587,"searchDepth":866,"depth":866,"links":867},2,[868,873,877,881,885,889,894],{"id":515,"depth":866,"text":516,"children":869},[870,872],{"id":520,"depth":871,"text":521},3,{"id":590,"depth":871,"text":591},{"id":669,"depth":866,"text":670,"children":874},[875,876],{"id":673,"depth":871,"text":674},{"id":684,"depth":871,"text":685},{"id":700,"depth":866,"text":701,"children":878},[879,880],{"id":704,"depth":871,"text":705},{"id":721,"depth":871,"text":722},{"id":754,"depth":866,"text":755,"children":882},[883,884],{"id":758,"depth":871,"text":759},{"id":775,"depth":871,"text":776},{"id":785,"depth":866,"text":786,"children":886},[887,888],{"id":789,"depth":871,"text":790},{"id":800,"depth":871,"text":10},{"id":810,"depth":866,"text":811,"children":890},[891,892,893],{"id":814,"depth":871,"text":815},{"id":825,"depth":871,"text":826},{"id":836,"depth":871,"text":837},{"id":847,"depth":866,"text":848},"Examples of registry items: styles, components, css vars, etc.","md",{},"---\ntitle: Examples\ndescription: \"Examples of registry items: styles, components, css vars, etc.\"\n---\n\n## registry:style\n\n### Custom style that extends hui-kit\n\nThe following registry item is a custom style that extends hui-kit. On `npx hui-kit init`, it will:\n\n- Install `@iconify\u002Fvue` as a dependency.\n- Add the `Login01` block and `calendar` component to the project.\n- Add the `editor` from a remote registry.\n- Set the `font-sans` variable to `Inter, sans-serif`.\n- Install a `brand` color in light and dark mode.\n\n```json showLineNumbers title=\"example-style.json\"\n{\n  \"$schema\": \"https:\u002F\u002Fclientik.github.io\u002Fhui-vue\u002Fschema\u002Fregistry-item.json\",\n  \"name\": \"example-style\",\n  \"type\": \"registry:style\",\n  \"dependencies\": [\"@iconify\u002Fvue\"],\n  \"registryDependencies\": [\n    \"Login01\",\n    \"calendar\",\n    \"https:\u002F\u002Fexample.com\u002Fr\u002Feditor.json\"\n  ],\n  \"cssVars\": {\n    \"theme\": {\n      \"font-sans\": \"Inter, sans-serif\"\n    },\n    \"light\": {\n      \"brand\": \"20 14.3% 4.1%\"\n    },\n    \"dark\": {\n      \"brand\": \"20 14.3% 4.1%\"\n    }\n  }\n}\n```\n\n### Custom style from scratch\n\nThe following registry item is a custom style that doesn't extend hui-kit. See the `extends: none` field.\n\nIt can be used to create a new style from scratch i.e custom components, css vars, dependencies, etc.\n\nOn `npx hui-kit add`, the following will:\n\n- Install `tailwind-merge` and `clsx` as dependencies.\n- Add the `utils` registry item from the hui-kit registry.\n- Add the `button`, `input`, `label`, and `select` components from a remote registry.\n- Install new css vars: `main`, `bg`, `border`, `text`, `ring`.\n\n```json showLineNumbers title=\"example-style.json\"\n{\n  \"$schema\": \"https:\u002F\u002Fclientik.github.io\u002Fhui-vue\u002Fschema\u002Fregistry-item.json\",\n  \"extends\": \"none\",\n  \"name\": \"new-style\",\n  \"type\": \"registry:style\",\n  \"dependencies\": [\"tailwind-merge\", \"clsx\"],\n  \"registryDependencies\": [\n    \"utils\",\n    \"https:\u002F\u002Fexample.com\u002Fr\u002Fbutton.json\",\n    \"https:\u002F\u002Fexample.com\u002Fr\u002Finput.json\",\n    \"https:\u002F\u002Fexample.com\u002Fr\u002Flabel.json\",\n    \"https:\u002F\u002Fexample.com\u002Fr\u002Fselect.json\"\n  ],\n  \"cssVars\": {\n    \"theme\": {\n      \"font-sans\": \"Inter, sans-serif\"\n    },\n    \"light\": {\n      \"main\": \"#88aaee\",\n      \"bg\": \"#dfe5f2\",\n      \"border\": \"#000\",\n      \"text\": \"#000\",\n      \"ring\": \"#000\"\n    },\n    \"dark\": {\n      \"main\": \"#88aaee\",\n      \"bg\": \"#272933\",\n      \"border\": \"#000\",\n      \"text\": \"#e6e6e6\",\n      \"ring\": \"#fff\"\n    }\n  }\n}\n```\n\n## registry:theme\n\n### Custom theme\n\n```json showLineNumbers title=\"example-theme.json\"\n{\n  \"$schema\": \"https:\u002F\u002Fclientik.github.io\u002Fhui-vue\u002Fschema\u002Fregistry-item.json\",\n  \"name\": \"custom-theme\",\n  \"type\": \"registry:theme\",\n  \"cssVars\": {\n    \"light\": {\n      \"background\": \"oklch(1 0 0)\",\n      \"foreground\": \"oklch(0.141 0.005 285.823)\",\n      \"primary\": \"oklch(0.546 0.245 262.881)\",\n      \"primary-foreground\": \"oklch(0.97 0.014 254.604)\",\n      \"ring\": \"oklch(0.746 0.16 232.661)\",\n      \"sidebar-primary\": \"oklch(0.546 0.245 262.881)\",\n      \"sidebar-primary-foreground\": \"oklch(0.97 0.014 254.604)\",\n      \"sidebar-ring\": \"oklch(0.746 0.16 232.661)\"\n    },\n    \"dark\": {\n      \"background\": \"oklch(1 0 0)\",\n      \"foreground\": \"oklch(0.141 0.005 285.823)\",\n      \"primary\": \"oklch(0.707 0.165 254.624)\",\n      \"primary-foreground\": \"oklch(0.97 0.014 254.604)\",\n      \"ring\": \"oklch(0.707 0.165 254.624)\",\n      \"sidebar-primary\": \"oklch(0.707 0.165 254.624)\",\n      \"sidebar-primary-foreground\": \"oklch(0.97 0.014 254.604)\",\n      \"sidebar-ring\": \"oklch(0.707 0.165 254.624)\"\n    }\n  }\n}\n```\n\n### Custom colors\n\nThe following style will init using hui-kit defaults and then add a custom `brand` color.\n\n```json showLineNumbers title=\"example-style.json\"\n{\n  \"$schema\": \"https:\u002F\u002Fclientik.github.io\u002Fhui-vue\u002Fschema\u002Fregistry-item.json\",\n  \"name\": \"custom-style\",\n  \"type\": \"registry:style\",\n  \"cssVars\": {\n    \"light\": {\n      \"brand\": \"oklch(0.99 0.00 0)\"\n    },\n    \"dark\": {\n      \"brand\": \"oklch(0.14 0.00 286)\"\n    }\n  }\n}\n```\n\n## registry:block\n\n### Custom block\n\nThis blocks installs the `Login01` block from the hui-kit registry.\n\n```json showLineNumbers title=\"Login01.json\"\n{\n  \"$schema\": \"https:\u002F\u002Fclientik.github.io\u002Fhui-vue\u002Fschema\u002Fregistry-item.json\",\n  \"name\": \"Login01\",\n  \"type\": \"registry:block\",\n  \"description\": \"A simple login form.\",\n  \"registryDependencies\": [\"button\", \"card\", \"input\", \"label\"],\n  \"files\": [\n    {\n      \"path\": \"blocks\u002FLogin01\u002Fpage.vue\",\n      \"content\": \"import { LoginForm } ...\",\n      \"type\": \"registry:page\",\n      \"target\": \"pages\u002Flogin\u002Findex.vue\"\n    },\n    {\n      \"path\": \"blocks\u002Flogin-01\u002Fcomponents\u002FLoginForm.vue\",\n      \"content\": \"...\",\n      \"type\": \"registry:component\"\n    }\n  ]\n}\n```\n\n### Install a block and override primitives\n\nYou can install a block fromt the hui-kit registry and override the primitives using your custom ones.\n\nOn `npx hui-kit add`, the following will:\n\n- Add the `Login01` block from the hui-kit registry.\n- Override the `button`, `input`, and `label` primitives with the ones from the remote registry.\n\n```json showLineNumbers title=\"example-style.json\"\n{\n  \"$schema\": \"https:\u002F\u002Fclientik.github.io\u002Fhui-vue\u002Fschema\u002Fregistry-item.json\",\n  \"name\": \"custom-login\",\n  \"type\": \"registry:block\",\n  \"registryDependencies\": [\n    \"Login01\",\n    \"https:\u002F\u002Fexample.com\u002Fr\u002Fbutton.json\",\n    \"https:\u002F\u002Fexample.com\u002Fr\u002Finput.json\",\n    \"https:\u002F\u002Fexample.com\u002Fr\u002Flabel.json\"\n  ]\n}\n```\n\n## CSS Variables\n\n### Custom Theme Variables\n\nAdd custom theme variables to the `theme` object.\n\n```json showLineNumbers title=\"example-theme.json\"\n{\n  \"$schema\": \"https:\u002F\u002Fclientik.github.io\u002Fhui-vue\u002Fschema\u002Fregistry-item.json\",\n  \"name\": \"custom-theme\",\n  \"type\": \"registry:theme\",\n  \"cssVars\": {\n    \"theme\": {\n      \"font-heading\": \"Inter, sans-serif\",\n      \"shadow-card\": \"0 0 0 1px rgba(0, 0, 0, 0.1)\"\n    }\n  }\n}\n```\n\n### Override Tailwind CSS variables\n\n```json showLineNumbers title=\"example-theme.json\"\n{\n  \"$schema\": \"https:\u002F\u002Fclientik.github.io\u002Fhui-vue\u002Fschema\u002Fregistry-item.json\",\n  \"name\": \"custom-theme\",\n  \"type\": \"registry:theme\",\n  \"cssVars\": {\n    \"theme\": {\n      \"spacing\": \"0.2rem\",\n      \"breakpoint-sm\": \"640px\",\n      \"breakpoint-md\": \"768px\",\n      \"breakpoint-lg\": \"1024px\",\n      \"breakpoint-xl\": \"1280px\",\n      \"breakpoint-2xl\": \"1536px\"\n    }\n  }\n}\n```\n\n## Add custom CSS\n\n### Base styles\n\n```json showLineNumbers title=\"example-base.json\"\n{\n  \"$schema\": \"https:\u002F\u002Fclientik.github.io\u002Fhui-vue\u002Fschema\u002Fregistry-item.json\",\n  \"name\": \"custom-style\",\n  \"type\": \"registry:style\",\n  \"css\": {\n    \"@layer base\": {\n      \"h1\": {\n        \"font-size\": \"var(--text-2xl)\"\n      },\n      \"h2\": {\n        \"font-size\": \"var(--text-xl)\"\n      }\n    }\n  }\n}\n```\n\n### Components\n\n```json showLineNumbers title=\"example-card.json\"\n{\n  \"$schema\": \"https:\u002F\u002Fclientik.github.io\u002Fhui-vue\u002Fschema\u002Fregistry-item.json\",\n  \"name\": \"custom-card\",\n  \"type\": \"registry:component\",\n  \"css\": {\n    \"@layer components\": {\n      \"card\": {\n        \"background-color\": \"var(--color-white)\",\n        \"border-radius\": \"var(--rounded-lg)\",\n        \"padding\": \"var(--spacing-6)\",\n        \"box-shadow\": \"var(--shadow-xl)\"\n      }\n    }\n  }\n}\n```\n\n## Add custom utilities\n\n### Simple utility\n\n```json showLineNumbers title=\"example-component.json\"\n{\n  \"$schema\": \"https:\u002F\u002Fclientik.github.io\u002Fhui-vue\u002Fschema\u002Fregistry-item.json\",\n  \"name\": \"custom-component\",\n  \"type\": \"registry:component\",\n  \"css\": {\n    \"@utility content-auto\": {\n      \"content-visibility\": \"auto\"\n    }\n  }\n}\n```\n\n### Complex utility\n\n```json showLineNumbers title=\"example-utility.json\"\n{\n  \"$schema\": \"https:\u002F\u002Fclientik.github.io\u002Fhui-vue\u002Fschema\u002Fregistry-item.json\",\n  \"name\": \"custom-component\",\n  \"type\": \"registry:component\",\n  \"css\": {\n    \"@utility scrollbar-hidden\": {\n      \"scrollbar-hidden\": {\n        \"&::-webkit-scrollbar\": {\n          \"display\": \"none\"\n        }\n      }\n    }\n  }\n}\n```\n\n### Functional utilities\n\n```json showLineNumbers title=\"example-functional.json\"\n{\n  \"$schema\": \"https:\u002F\u002Fclientik.github.io\u002Fhui-vue\u002Fschema\u002Fregistry-item.json\",\n  \"name\": \"custom-component\",\n  \"type\": \"registry:component\",\n  \"css\": {\n    \"@utility tab-*\": {\n      \"tab-size\": \"var(--tab-size-*)\"\n    }\n  }\n}\n```\n\n## Add custom animations\n\nNote: you need to define both `@keyframes` in css and `theme` in cssVars to use animations.\n\n```json showLineNumbers title=\"example-component.json\"\n{\n  \"$schema\": \"https:\u002F\u002Fclientik.github.io\u002Fhui-vue\u002Fschema\u002Fregistry-item.json\",\n  \"name\": \"custom-component\",\n  \"type\": \"registry:component\",\n  \"cssVars\": {\n    \"theme\": {\n      \"--animate-wiggle\": \"wiggle 1s ease-in-out infinite\"\n    }\n  },\n  \"css\": {\n    \"@keyframes wiggle\": {\n      \"0%, 100%\": {\n        \"transform\": \"rotate(-3deg)\"\n      },\n      \"50%\": {\n        \"transform\": \"rotate(3deg)\"\n      }\n    }\n  }\n}\n```\n",{"title":400,"description":895},"7v4NxoWZVDrXFudekeOlHygGmjku2i99xsm55nLiyiM",[902,903],{"title":394,"path":395,"stem":396,"children":-1},{"title":404,"path":405,"stem":406,"children":-1},1787698075075]