[{"data":1,"prerenderedAt":1422},["ShallowReactive",2],{"navigation":3,"$f1jvagmno7cfld":496,"\u002Fdocs\u002Fcomponents\u002Fsidebar":507,"surround-\u002Fdocs\u002Fcomponents\u002Fsidebar":1419},[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":250,"body":509,"description":1413,"extension":1414,"links":501,"meta":1415,"navigation":220,"new":18,"path":251,"rawbody":1416,"seo":1417,"stem":252,"__hash__":1418},"content\u002Fdocs\u002Fcomponents\u002Fsidebar.md",{"type":510,"value":511,"toc":1365},"minimark",[512,520,531,534,542,545,552,556,619,623,629,668,688,692,701,705,708,792,795,810,819,822,828,833,838,842,856,862,866,878,884,888,898,904,910,913,916,922,925,929,932,937,943,946,951,957,963,969,972,977,983,989,993,998,1004,1007,1010,1016,1020,1023,1029,1032,1035,1041,1044,1047,1053,1057,1065,1071,1075,1080,1086,1089,1094,1100,1104,1109,1113,1122,1128,1132,1137,1143,1147,1152,1158,1162,1167,1173,1176,1184,1190,1194,1199,1205,1209,1215,1221,1225,1230,1236,1240,1245,1251,1255,1260,1266,1269,1274,1280,1284,1290,1296,1300,1305,1311,1315,1322,1328,1331,1334,1340,1344,1347],[513,514],"component-preview",{"className":515,"description":517,"name":518,"title":250,"type":519},[516],"w-full","A composable, themeable and customizable sidebar component built using hui-kit","sidebar-07","block",[521,522,527],"vue-school-link",{"className":523,"lesson":525,"placement":526},[524],"mt-6","sidebars-in-hui-kit","top",[528,529,530],"p",{},"Watch a Vue School video about building sidebars with hui-kit.",[528,532,533],{},"Sidebars are one of the most complex components to build. They are central\nto any application and often contain a lot of moving parts.",[528,535,536,537,541],{},"I don't like building sidebars. So I built 30+ of them. All kinds of\nconfigurations. Then I extracted the core components into ",[538,539,540],"code",{},"Sidebar*.vue",".",[528,543,544],{},"We now have a solid foundation to build on top of. Composable. Themeable.\nCustomizable.",[528,546,547,541],{},[548,549,551],"a",{"href":550},"\u002Fblocks","Browse the Blocks Library",[553,554,327],"h2",{"id":555},"installation",[557,558,559,574,587],"code-tabs",{},[560,561,562,568],"tabs-list",{},[563,564,566],"tabs-trigger",{"value":565},"cli",[528,567,461],{},[563,569,571],{"value":570},"manual",[528,572,573],{},"Manual",[575,576,577],"tabs-content",{"value":565},[578,579,585],"pre",{"className":580,"code":582,"language":583,"meta":584},[581],"language-bash","npx hui-kit@latest add sidebar\n","bash","",[538,586,582],{"__ignoreMap":584},[575,588,589],{"value":570},[590,591,592,598,603,608,611],"steps",{},[593,594,595],"step",{},[528,596,597],{},"Install this component",[578,599,601],{"className":600,"code":582,"language":583,"meta":584},[581],[538,602,582],{"__ignoreMap":584},[593,604,605],{},[528,606,607],{},"Add the following colors to your CSS file",[528,609,610],{},"The command above should install the colors for you. If not, copy and paste the following in your CSS file.",[578,612,617],{"className":613,"code":615,"language":616,"meta":584},[614],"language-css","@layer base {\n :root {\n --sidebar-background: 0 0% 98%;\n --sidebar-foreground: 240 5.3% 26.1%;\n --sidebar-primary: 240 5.9% 10%;\n --sidebar-primary-foreground: 0 0% 98%;\n --sidebar-accent: 240 4.8% 95.9%;\n --sidebar-accent-foreground: 240 5.9% 10%;\n --sidebar-border: 220 13% 91%;\n --sidebar-ring: 217.2 91.2% 59.8%;\n }\n\n .dark {\n --sidebar-background: 240 5.9% 10%;\n --sidebar-foreground: 240 4.8% 95.9%;\n --sidebar-primary: 224.3 76.3% 48%;\n --sidebar-primary-foreground: 0 0% 100%;\n --sidebar-accent: 240 3.7% 15.9%;\n --sidebar-accent-foreground: 240 4.8% 95.9%;\n --sidebar-border: 240 3.7% 15.9%;\n --sidebar-ring: 217.2 91.2% 59.8%;\n }\n}\n","css",[538,618,615],{"__ignoreMap":584},[553,620,622],{"id":621},"structure","Structure",[528,624,625,626,628],{},"A ",[538,627,250],{}," component is composed of the following parts:",[630,631,632,639,644,650,656,662],"ul",{},[633,634,635,638],"li",{},[538,636,637],{},"SidebarProvider"," - Handles collapsible state.",[633,640,641,643],{},[538,642,250],{}," - The sidebar container.",[633,645,646,649],{},[538,647,648],{},"SidebarHeader"," and SidebarFooter - Sticky at the top and bottom of the sidebar",[633,651,652,655],{},[538,653,654],{},"SidebarContent"," - Scrollable content.",[633,657,658,661],{},[538,659,660],{},"SidebarGroup"," - Section within the SidebarContent.",[633,663,664,667],{},[538,665,666],{},"SidebarTrigger"," - Trigger for the Sidebar",[528,669,670,682],{},[671,672],"img",{"src":673,"width":674,"height":675,"alt":676,"className":677},"\u002Fimages\u002Fsidebar-structure.png",716,420,"Sidebar Structure",[678,679,680,681,524,516],"border","dark:hidden","rounded-lg","overflow-hidden",[671,683],{"src":684,"width":674,"height":675,"alt":676,"className":685},"\u002Fimages\u002Fsidebar-structure-dark.png",[678,686,687,680,681,524,516],"hidden","dark:block",[553,689,691],{"id":690},"usage","Usage",[578,693,699],{"className":694,"code":696,"language":697,"meta":698},[695],"language-vue","\u003Cscript setup lang=\"ts\">\nimport {\n Sidebar,\n SidebarContent,\n SidebarFooter,\n SidebarGroup,\n SidebarGroupContent,\n SidebarGroupLabel,\n SidebarHeader,\n SidebarInset,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n SidebarProvider,\n SidebarRail,\n SidebarTrigger,\n} from '@\u002Fcomponents\u002Fui\u002Fsidebar'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CSidebarProvider>\n \u003CSidebar>\n \u003CSidebarHeader>\n \u003CSidebarMenu>\n \u003CSidebarMenuItem>\n \u003CSidebarMenuButton size=\"lg\">\n \u003Cdiv class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n \u003CGalleryVerticalEnd class=\"size-4\" \u002F>\n \u003C\u002Fdiv>\n \u003Cdiv class=\"grid flex-1 text-left text-sm leading-tight\">\n \u003Cspan class=\"truncate font-semibold\">Acme Inc\u003C\u002Fspan>\n \u003Cspan class=\"truncate text-xs\">Enterprise\u003C\u002Fspan>\n \u003C\u002Fdiv>\n \u003C\u002FSidebarMenuButton>\n \u003C\u002FSidebarMenuItem>\n \u003C\u002FSidebarMenu>\n \u003C\u002FSidebarHeader>\n \u003CSidebarContent>\n \u003CSidebarGroup>\n \u003CSidebarGroupLabel>Platform\u003C\u002FSidebarGroupLabel>\n \u003CSidebarGroupContent>\n \u003CSidebarMenu>\n \u003CSidebarMenuItem>\n \u003CSidebarMenuButton as-child>\n \u003Ca href=\"#\">\n \u003CHome \u002F>\n \u003Cspan>Home\u003C\u002Fspan>\n \u003C\u002Fa>\n \u003C\u002FSidebarMenuButton>\n \u003C\u002FSidebarMenuItem>\n \u003C\u002FSidebarMenu>\n \u003C\u002FSidebarGroupContent>\n \u003C\u002FSidebarGroup>\n \u003C\u002FSidebarContent>\n \u003CSidebarFooter \u002F>\n \u003CSidebarRail \u002F>\n \u003C\u002FSidebar>\n \u003CSidebarInset>\n \u003Cheader class=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]\u002Fsidebar-wrapper:h-12\">\n \u003Cdiv class=\"flex items-center gap-2 px-4\">\n \u003CSidebarTrigger class=\"-ml-1\" \u002F>\n \u003C\u002Fdiv>\n \u003C\u002Fheader>\n \u003Cdiv class=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n \u003Cdiv class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n \u003Cdiv class=\"aspect-video rounded-xl bg-muted\u002F50\" \u002F>\n \u003Cdiv class=\"aspect-video rounded-xl bg-muted\u002F50\" \u002F>\n \u003Cdiv class=\"aspect-video rounded-xl bg-muted\u002F50\" \u002F>\n \u003C\u002Fdiv>\n \u003Cdiv class=\"min-h-[100vh] flex-1 rounded-xl bg-muted\u002F50 md:min-h-min\" \u002F>\n \u003C\u002Fdiv>\n \u003C\u002FSidebarInset>\n \u003C\u002FSidebarProvider>\n\u003C\u002Ftemplate>\n","vue","showLineNumbers",[538,700,696],{"__ignoreMap":584},[553,702,704],{"id":703},"your-first-sidebar","Your First Sidebar",[528,706,707],{},"Let's start with the most basic sidebar A collapsible sidebar with a menu.",[590,709,710,721,727,735,741,750,758,764,769,772],{},[593,711,712],{},[528,713,714,715,717,718,720],{},"Add a ",[538,716,637],{}," and ",[538,719,666],{}," at the root of your application",[578,722,725],{"className":723,"code":724,"language":697,"meta":698},[695],"\u003Cscript setup lang=\"ts\">\nimport AppSidebar from '@\u002Fcomponents\u002FAppSidebar.vue'\nimport { SidebarProvider, SidebarTrigger } from '@\u002Fcomponents\u002Fui\u002Fsidebar'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CSidebarProvider>\n \u003CAppSidebar \u002F>\n \u003Cmain>\n \u003CSidebarTrigger \u002F>\n \u003Cslot \u002F>\n \u003C\u002Fmain>\n \u003C\u002FSidebarProvider>\n\u003C\u002Ftemplate>\n",[538,726,724],{"__ignoreMap":584},[593,728,729],{},[528,730,731,732],{},"Create a new sidebar component at ",[538,733,734],{},"@\u002Fcomponents\u002FAppSidebar.vue",[578,736,739],{"className":737,"code":738,"language":697,"meta":698},[695],"\u003Cscript setup lang=\"ts\">\nimport { Sidebar, SidebarContent } from '@\u002Fcomponents\u002Fui\u002Fsidebar'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CSidebar>\n \u003CSidebarContent \u002F>\n \u003C\u002FSidebar>\n\u003C\u002Ftemplate>\n",[538,740,738],{"__ignoreMap":584},[593,742,743],{},[528,744,745,746,749],{},"Now, let's add a ",[538,747,748],{},"SidebarMenu"," to the sidebar",[528,751,752,753,755,756,541],{},"We'll use the ",[538,754,748],{}," component in a ",[538,757,660],{},[578,759,762],{"className":760,"code":761,"language":697,"meta":698},[695],"\u003Cscript setup lang=\"ts\">\nimport { Calendar, Home, Inbox, Search, Settings } from '@lucide\u002Fvue'\nimport {\n Sidebar,\n SidebarContent,\n SidebarGroup,\n SidebarGroupContent,\n SidebarGroupLabel,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n} from '@\u002Fcomponents\u002Fui\u002Fsidebar'\n\n\u002F\u002F Menu items.\nconst items = [\n {\n title: 'Home',\n url: '#',\n icon: Home,\n },\n {\n title: 'Inbox',\n url: '#',\n icon: Inbox,\n },\n {\n title: 'Calendar',\n url: '#',\n icon: Calendar,\n },\n {\n title: 'Search',\n url: '#',\n icon: Search,\n },\n {\n title: 'Settings',\n url: '#',\n icon: Settings,\n },\n]\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CSidebar>\n \u003CSidebarContent>\n \u003CSidebarGroup>\n \u003CSidebarGroupLabel>Application\u003C\u002FSidebarGroupLabel>\n \u003CSidebarGroupContent>\n \u003CSidebarMenu>\n \u003CSidebarMenuItem v-for=\"item in items\" :key=\"item.title\">\n \u003CSidebarMenuButton as-child>\n \u003Ca :href=\"item.url\">\n \u003Ccomponent :is=\"item.icon\" \u002F>\n \u003Cspan>{{ item.title }}\u003C\u002Fspan>\n \u003C\u002Fa>\n \u003C\u002FSidebarMenuButton>\n \u003C\u002FSidebarMenuItem>\n \u003C\u002FSidebarMenu>\n \u003C\u002FSidebarGroupContent>\n \u003C\u002FSidebarGroup>\n \u003C\u002FSidebarContent>\n \u003C\u002FSidebar>\n\u003C\u002Ftemplate>\n",[538,763,761],{"__ignoreMap":584},[593,765,766],{},[528,767,768],{},"You've created your first sidebar.",[528,770,771],{},"You should see something like this:",[773,774,779,784],"figure",{"className":775},[776,777,778],"flex","flex-col","gap-4",[513,780],{"className":781,"description":782,"name":783,"title":250,"type":519},[516],"Your first sidebar.","sidebar-demo",[785,786,791],"figcaption",{"className":787},[788,789,790],"text-center","text-sm","text-gray-500","\n Your first sidebar\n",[553,793,10],{"id":794},"components",[528,796,797,798,800,801,804,805,804,807,809],{},"The components in the ",[538,799,540],{}," files are built to be composable i.e you build your sidebar by putting the provided components together. They also compose well with other hui-kit components such as ",[538,802,803],{},"DropdownMenu",", ",[538,806,81],{},[538,808,113],{},", etc.",[528,811,812],{},[813,814,815,816,818],"strong",{},"If you need to change the code in the ",[538,817,540],{}," files, you are encourage to do so. The code is yours. Use the provided components as a starting point to build your own",[553,820,637],{"id":821},"sidebarprovider",[528,823,824,825,827],{},"The ",[538,826,637],{}," component is used to provide the sidebar context to all its children.",[829,830,832],"h3",{"id":831},"props","Props",[528,834,824,835,837],{},[538,836,637],{}," component accepts the following props:",[829,839,841],{"id":840},"width","Width",[528,843,844,845,804,848,851,852,855],{},"Use the ",[538,846,847],{},"defaultOpen",[538,849,850],{},"open",", and ",[538,853,854],{},"onOpenChange"," props to control the open state of the sidebar.",[578,857,860],{"className":858,"code":859,"language":697,"meta":698},[695],"\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\n\nconst open = ref(false)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CSidebarProvider :open=\"open\" @update:open=\"open = $event\">\n \u003C!-- ... -->\n \u003C\u002FSidebarProvider>\n\u003C\u002Ftemplate>\n",[538,861,859],{"__ignoreMap":584},[829,863,865],{"id":864},"keyboard-shortcut","Keyboard Shortcut",[528,867,824,868,870,871,874,875,541],{},[538,869,637],{}," component supports keyboard shortcuts to toggle the sidebar. The default shortcut is ",[538,872,873],{},"cmd+b"," or ",[538,876,877],{},"ctrl+b",[578,879,882],{"className":880,"code":881,"language":697,"meta":698},[695],"\u003CSidebarProvider>\n \u003C!-- ... -->\n\u003C\u002FSidebarProvider>\n",[538,883,881],{"__ignoreMap":584},[829,885,887],{"id":886},"persisted-state","Persisted State",[528,889,890,891,894,895,897],{},"To persist the sidebar state, you can use the ",[538,892,893],{},"storageKey"," prop on the ",[538,896,637],{}," component.",[578,899,902],{"className":900,"code":901,"language":697,"meta":698},[695],"\u003CSidebarProvider storage-key=\"sidebar\">\n \u003C!-- ... -->\n\u003C\u002FSidebarProvider>\n",[538,903,901],{"__ignoreMap":584},[578,905,908],{"className":906,"code":907,"language":697,"meta":698},[695],"\u003CSidebarProvider\n :default-open=\"false\"\n storage-key=\"sidebar\"\n class=\"flex min-h-screen\"\n>\n \u003C!-- ... -->\n\u003C\u002FSidebarProvider>\n",[538,909,907],{"__ignoreMap":584},[553,911,250],{"id":912},"sidebar",[528,914,915],{},"The main sidebar component.",[578,917,920],{"className":918,"code":919,"language":697,"meta":698},[695],"\u003CSidebar>\n \u003CSidebarHeader \u002F>\n \u003CSidebarContent \u002F>\n \u003CSidebarFooter \u002F>\n\u003C\u002FSidebar>\n",[538,921,919],{"__ignoreMap":584},[829,923,832],{"id":924},"props-1",[528,926,824,927,837],{},[538,928,250],{},[829,930,931],{"id":931},"side",[528,933,844,934,936],{},[538,935,931],{}," prop to set the side of the sidebar.",[578,938,941],{"className":939,"code":940,"language":697,"meta":698},[695],"\u003CSidebar side=\"left\">\n \u003C!-- ... -->\n\u003C\u002FSidebar>\n",[538,942,940],{"__ignoreMap":584},[829,944,945],{"id":945},"variant",[528,947,844,948,950],{},[538,949,945],{}," prop to set the variant of the sidebar.",[578,952,955],{"className":953,"code":954,"language":697,"meta":698},[695],"\u003C!-- Default variant -->\n\u003CSidebar variant=\"sidebar\">\n \u003C!-- ... -->\n\u003C\u002FSidebar>\n",[538,956,954],{"__ignoreMap":584},[578,958,961],{"className":959,"code":960,"language":697,"meta":698},[695],"\u003C!-- Floating variant -->\n\u003CSidebar variant=\"floating\">\n \u003C!-- ... -->\n\u003C\u002FSidebar>\n",[538,962,960],{"__ignoreMap":584},[578,964,967],{"className":965,"code":966,"language":697,"meta":698},[695],"\u003C!-- Inset variant -->\n\u003CSidebar variant=\"inset\">\n \u003C!-- ... -->\n\u003C\u002FSidebar>\n",[538,968,966],{"__ignoreMap":584},[829,970,971],{"id":971},"collapsible",[528,973,844,974,976],{},[538,975,971],{}," prop to make the sidebar collapsible.",[578,978,981],{"className":979,"code":980,"language":697,"meta":698},[695],"\u003CSidebar collapsible=\"icon\">\n \u003C!-- ... -->\n\u003C\u002FSidebar>\n",[538,982,980],{"__ignoreMap":584},[578,984,987],{"className":985,"code":986,"language":697,"meta":698},[695],"\u003CSidebar collapsible=\"offcanvas\">\n \u003C!-- ... -->\n\u003C\u002FSidebar>\n",[538,988,986],{"__ignoreMap":584},[553,990,992],{"id":991},"usesidebar","useSidebar",[528,994,824,995,997],{},[538,996,992],{}," hook is used to control the sidebar.",[578,999,1002],{"className":1000,"code":1001,"language":697,"meta":698},[695],"\u003Cscript setup lang=\"ts\">\nimport { useSidebar } from '@\u002Fcomponents\u002Fui\u002Fsidebar'\n\nconst {\n state,\n open,\n setOpen,\n openMobile,\n setOpenMobile,\n isMobile,\n toggleSidebar,\n} = useSidebar()\n\u003C\u002Fscript>\n",[538,1003,1001],{"__ignoreMap":584},[553,1005,648],{"id":1006},"sidebarheader",[528,1008,1009],{},"Used to render the sidebar header.",[578,1011,1014],{"className":1012,"code":1013,"language":697,"meta":698},[695],"\u003CSidebar>\n \u003CSidebarHeader>\n \u003CSidebarMenu>\n \u003CSidebarMenuItem>\n \u003CSidebarMenuButton size=\"lg\">\n \u003Cdiv class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n \u003CGalleryVerticalEnd class=\"size-4\" \u002F>\n \u003C\u002Fdiv>\n \u003Cdiv class=\"flex flex-col gap-0.5 leading-none\">\n \u003Cspan class=\"font-semibold\">Documentation\u003C\u002Fspan>\n \u003Cspan class=\"\">v1.0.0\u003C\u002Fspan>\n \u003C\u002Fdiv>\n \u003C\u002FSidebarMenuButton>\n \u003C\u002FSidebarMenuItem>\n \u003C\u002FSidebarMenu>\n \u003C\u002FSidebarHeader>\n\u003C\u002FSidebar>\n",[538,1015,1013],{"__ignoreMap":584},[553,1017,1019],{"id":1018},"sidebarfooter","SidebarFooter",[528,1021,1022],{},"Used to render the sidebar footer.",[578,1024,1027],{"className":1025,"code":1026,"language":697,"meta":698},[695],"\u003CSidebar>\n \u003CSidebarFooter>\n \u003CSidebarMenu>\n \u003CSidebarMenuItem>\n \u003CDropdownMenu>\n \u003CDropdownMenuTrigger as-child>\n \u003CSidebarMenuButton>\n \u003CUser2 \u002F> Username\n \u003CChevronUp class=\"ml-auto\" \u002F>\n \u003C\u002FSidebarMenuButton>\n \u003C\u002FDropdownMenuTrigger>\n \u003CDropdownMenuContent\n side=\"top\"\n class=\"w-(--reka-popper-anchor-width)\"\n >\n \u003CDropdownMenuItem>\n \u003Cspan>Account\u003C\u002Fspan>\n \u003C\u002FDropdownMenuItem>\n \u003CDropdownMenuItem>\n \u003Cspan>Billing\u003C\u002Fspan>\n \u003C\u002FDropdownMenuItem>\n \u003CDropdownMenuItem>\n \u003Cspan>Sign out\u003C\u002Fspan>\n \u003C\u002FDropdownMenuItem>\n \u003C\u002FDropdownMenuContent>\n \u003C\u002FDropdownMenu>\n \u003C\u002FSidebarMenuItem>\n \u003C\u002FSidebarMenu>\n \u003C\u002FSidebarFooter>\n\u003C\u002FSidebar>\n",[538,1028,1026],{"__ignoreMap":584},[553,1030,654],{"id":1031},"sidebarcontent",[528,1033,1034],{},"The scrollable content area of the sidebar.",[578,1036,1039],{"className":1037,"code":1038,"language":697,"meta":698},[695],"\u003CSidebar>\n \u003CSidebarContent>\n \u003CSidebarGroup \u002F>\n \u003CSidebarGroup \u002F>\n \u003C\u002FSidebarContent>\n\u003C\u002FSidebar>\n",[538,1040,1038],{"__ignoreMap":584},[553,1042,660],{"id":1043},"sidebargroup",[528,1045,1046],{},"Used to group sidebar menu items.",[578,1048,1051],{"className":1049,"code":1050,"language":697,"meta":698},[695],"\u003CSidebarContent>\n \u003CSidebarGroup>\n \u003CSidebarGroupLabel>Application\u003C\u002FSidebarGroupLabel>\n \u003CSidebarGroupContent>\n \u003C!-- SidebarMenu -->\n \u003C\u002FSidebarGroupContent>\n \u003C\u002FSidebarGroup>\n\u003C\u002FSidebarContent>\n",[538,1052,1050],{"__ignoreMap":584},[553,1054,1056],{"id":1055},"collapsible-sidebargroup","Collapsible SidebarGroup",[528,1058,1059,1060,1062,1063,897],{},"To make a ",[538,1061,660],{}," collapsible, wrap it in a ",[538,1064,81],{},[578,1066,1069],{"className":1067,"code":1068,"language":697,"meta":698},[695],"\u003CSidebarGroup as-child>\n \u003CCollapsible default-open class=\"group\u002Fcollapsible\">\n \u003CSidebarGroupLabel as-child>\n \u003CCollapsibleTrigger class=\"group\u002Flabel w-full text-left text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground [&[data-state=open]>svg]:rotate-90\">\n Help\n \u003CChevronRight class=\"ml-auto transition-transform group-data-[state=open]\u002Fcollapsible:rotate-90\" \u002F>\n \u003C\u002FCollapsibleTrigger>\n \u003C\u002FSidebarGroupLabel>\n \u003CCollapsibleContent>\n \u003CSidebarGroupContent>\n \u003CSidebarMenu>\n \u003C!-- Menu items -->\n \u003C\u002FSidebarMenu>\n \u003C\u002FSidebarGroupContent>\n \u003C\u002FCollapsibleContent>\n \u003C\u002FCollapsible>\n\u003C\u002FSidebarGroup>\n",[538,1070,1068],{"__ignoreMap":584},[553,1072,1074],{"id":1073},"sidebargroupaction","SidebarGroupAction",[528,1076,824,1077,1079],{},[538,1078,1074],{}," component is used to render an action button in the sidebar group header.",[578,1081,1084],{"className":1082,"code":1083,"language":697,"meta":698},[695],"\u003CSidebarGroup>\n \u003CSidebarGroupLabel>\n Projects\n \u003CSidebarGroupAction>\n \u003CPlus \u002F> \u003Cspan class=\"sr-only\">Add Project\u003C\u002Fspan>\n \u003C\u002FSidebarGroupAction>\n \u003C\u002FSidebarGroupLabel>\n \u003CSidebarGroupContent>\u003C\u002FSidebarGroupContent>\n\u003C\u002FSidebarGroup>\n",[538,1085,1083],{"__ignoreMap":584},[553,1087,748],{"id":1088},"sidebarmenu",[528,1090,824,1091,1093],{},[538,1092,748],{}," component is used to render a menu in the sidebar.",[578,1095,1098],{"className":1096,"code":1097,"language":697,"meta":698},[695],"\u003CSidebarGroupContent>\n \u003CSidebarMenu>\n \u003CSidebarMenuItem>\n \u003CSidebarMenuButton as-child>\n \u003Ca href=\"#\">\n \u003CHome \u002F>\n \u003Cspan>Home\u003C\u002Fspan>\n \u003C\u002Fa>\n \u003C\u002FSidebarMenuButton>\n \u003C\u002FSidebarMenuItem>\n \u003CSidebarMenuItem>\n \u003CSidebarMenuButton as-child>\n \u003Ca href=\"#\">\n \u003CInbox \u002F>\n \u003Cspan>Inbox\u003C\u002Fspan>\n \u003C\u002Fa>\n \u003C\u002FSidebarMenuButton>\n \u003C\u002FSidebarMenuItem>\n \u003C\u002FSidebarMenu>\n\u003C\u002FSidebarGroupContent>\n",[538,1099,1097],{"__ignoreMap":584},[553,1101,1103],{"id":1102},"sidebarmenubutton","SidebarMenuButton",[528,1105,824,1106,1108],{},[538,1107,1103],{}," component is used to render a menu button in the sidebar.",[829,1110,1112],{"id":1111},"link-or-anchor","Link or Anchor",[528,1114,844,1115,1118,1119,1121],{},[538,1116,1117],{},"as-child"," prop to render the ",[538,1120,1103],{}," as a link or anchor.",[578,1123,1126],{"className":1124,"code":1125,"language":697,"meta":698},[695],"\u003CSidebarMenuButton as-child>\n \u003Ca href=\"#\">\n \u003CHome \u002F>\n \u003Cspan>Home\u003C\u002Fspan>\n \u003C\u002Fa>\n\u003C\u002FSidebarMenuButton>\n",[538,1127,1125],{"__ignoreMap":584},[829,1129,1131],{"id":1130},"icon-and-label","Icon and Label",[528,1133,1134,1135,897],{},"You can render an icon and label in the ",[538,1136,1103],{},[578,1138,1141],{"className":1139,"code":1140,"language":697,"meta":698},[695],"\u003CSidebarMenuButton>\n \u003CHome \u002F>\n \u003Cspan>Home\u003C\u002Fspan>\n\u003C\u002FSidebarMenuButton>\n",[538,1142,1140],{"__ignoreMap":584},[829,1144,1146],{"id":1145},"isactive","isActive",[528,1148,844,1149,1151],{},[538,1150,1146],{}," prop to mark a menu button as active.",[578,1153,1156],{"className":1154,"code":1155,"language":697,"meta":698},[695],"\u003CSidebarMenuButton :is-active=\"true\">\n \u003CHome \u002F>\n \u003Cspan>Home\u003C\u002Fspan>\n\u003C\u002FSidebarMenuButton>\n",[538,1157,1155],{"__ignoreMap":584},[553,1159,1161],{"id":1160},"sidebarmenuaction","SidebarMenuAction",[528,1163,824,1164,1166],{},[538,1165,1161],{}," component is used to render a menu action in the sidebar.",[578,1168,1171],{"className":1169,"code":1170,"language":697,"meta":698},[695],"\u003CSidebarMenuItem>\n \u003CSidebarMenuButton>\n \u003CHome \u002F>\n \u003Cspan>Home\u003C\u002Fspan>\n \u003C\u002FSidebarMenuButton>\n \u003CSidebarMenuAction>\n \u003CMoreHorizontal \u002F>\n \u003C\u002FSidebarMenuAction>\n\u003C\u002FSidebarMenuItem>\n",[538,1172,1170],{"__ignoreMap":584},[829,1174,803],{"id":1175},"dropdownmenu",[528,1177,1178,1179,1181,1182,897],{},"You can use the ",[538,1180,1161],{}," component with a ",[538,1183,803],{},[578,1185,1188],{"className":1186,"code":1187,"language":697,"meta":698},[695],"\u003CSidebarMenuItem>\n \u003CSidebarMenuButton>\n \u003CHome \u002F>\n \u003Cspan>Home\u003C\u002Fspan>\n \u003C\u002FSidebarMenuButton>\n \u003CDropdownMenu>\n \u003CDropdownMenuTrigger as-child>\n \u003CSidebarMenuAction>\n \u003CMoreHorizontal \u002F>\n \u003C\u002FSidebarMenuAction>\n \u003C\u002FDropdownMenuTrigger>\n \u003CDropdownMenuContent side=\"right\" align=\"start\">\n \u003CDropdownMenuItem>\n \u003Cspan>Edit Project\u003C\u002Fspan>\n \u003C\u002FDropdownMenuItem>\n \u003CDropdownMenuItem>\n \u003Cspan>Delete Project\u003C\u002Fspan>\n \u003C\u002FDropdownMenuItem>\n \u003C\u002FDropdownMenuContent>\n \u003C\u002FDropdownMenu>\n\u003C\u002FSidebarMenuItem>\n",[538,1189,1187],{"__ignoreMap":584},[553,1191,1193],{"id":1192},"sidebarmenusub","SidebarMenuSub",[528,1195,824,1196,1198],{},[538,1197,1193],{}," component is used to render a submenu in the sidebar.",[578,1200,1203],{"className":1201,"code":1202,"language":697,"meta":698},[695],"\u003CSidebarMenuItem>\n \u003CSidebarMenuButton>\n \u003CHome \u002F>\n \u003Cspan>Home\u003C\u002Fspan>\n \u003C\u002FSidebarMenuButton>\n \u003CSidebarMenuSub>\n \u003CSidebarMenuItem>\n \u003CSidebarMenuButton>\n \u003Cspan>History\u003C\u002Fspan>\n \u003C\u002FSidebarMenuButton>\n \u003C\u002FSidebarMenuItem>\n\n \u003CSidebarMenuItem>\n \u003CSidebarMenuButton>\n \u003Cspan>Starred\u003C\u002Fspan>\n \u003C\u002FSidebarMenuButton>\n \u003C\u002FSidebarMenuItem>\n \u003C\u002FSidebarMenuSub>\n\u003C\u002FSidebarMenuItem>\n",[538,1204,1202],{"__ignoreMap":584},[553,1206,1208],{"id":1207},"collapsible-sidebarmenu","Collapsible SidebarMenu",[528,1210,1059,1211,1062,1213,897],{},[538,1212,748],{},[538,1214,81],{},[578,1216,1219],{"className":1217,"code":1218,"language":697,"meta":698},[695],"\u003CSidebarMenuItem>\n \u003CCollapsible default-open class=\"group\u002Fcollapsible\">\n \u003CCollapsibleTrigger as-child>\n \u003CSidebarMenuButton>\n \u003CHome \u002F>\n \u003Cspan>Home\u003C\u002Fspan>\n \u003CChevronRight class=\"ml-auto transition-transform group-data-[state=open]\u002Fcollapsible:rotate-90\" \u002F>\n \u003C\u002FSidebarMenuButton>\n \u003C\u002FCollapsibleTrigger>\n \u003CCollapsibleContent>\n \u003CSidebarMenuSub>\n \u003CSidebarMenuItem>\n \u003CSidebarMenuButton>\n \u003Cspan>History\u003C\u002Fspan>\n \u003C\u002FSidebarMenuButton>\n \u003C\u002FSidebarMenuItem>\n\n \u003CSidebarMenuItem>\n \u003CSidebarMenuButton>\n \u003Cspan>Starred\u003C\u002Fspan>\n \u003C\u002FSidebarMenuButton>\n \u003C\u002FSidebarMenuItem>\n \u003C\u002FSidebarMenuSub>\n \u003C\u002FCollapsibleContent>\n \u003C\u002FCollapsible>\n\u003C\u002FSidebarMenuItem>\n",[538,1220,1218],{"__ignoreMap":584},[553,1222,1224],{"id":1223},"sidebarmenubadge","SidebarMenuBadge",[528,1226,824,1227,1229],{},[538,1228,1224],{}," component is used to render a badge in the sidebar menu.",[578,1231,1234],{"className":1232,"code":1233,"language":697,"meta":698},[695],"\u003CSidebarMenuButton>\n \u003CHome \u002F>\n \u003Cspan>Home\u003C\u002Fspan>\n \u003CSidebarMenuBadge>24\u003C\u002FSidebarMenuBadge>\n\u003C\u002FSidebarMenuButton>\n",[538,1235,1233],{"__ignoreMap":584},[553,1237,1239],{"id":1238},"sidebarmenuskeleton","SidebarMenuSkeleton",[528,1241,1178,1242,1244],{},[538,1243,1239],{}," component to render a skeleton loader in the sidebar menu.",[578,1246,1249],{"className":1247,"code":1248,"language":697,"meta":698},[695],"\u003CSidebarMenu>\n \u003CSidebarMenuItem v-for=\"item in Array.from({ length: 5 })\" :key=\"item\">\n \u003CSidebarMenuSkeleton \u002F>\n \u003C\u002FSidebarMenuItem>\n\u003C\u002FSidebarMenu>\n",[538,1250,1248],{"__ignoreMap":584},[553,1252,1254],{"id":1253},"sidebarseparator","SidebarSeparator",[528,1256,824,1257,1259],{},[538,1258,1254],{}," component is used to render a separator in the sidebar.",[578,1261,1264],{"className":1262,"code":1263,"language":697,"meta":698},[695],"\u003CSidebarContent>\n \u003CSidebarGroup \u002F>\n \u003CSidebarSeparator \u002F>\n \u003CSidebarGroup \u002F>\n\u003C\u002FSidebarContent>\n",[538,1265,1263],{"__ignoreMap":584},[553,1267,666],{"id":1268},"sidebartrigger",[528,1270,824,1271,1273],{},[538,1272,666],{}," component is used to render a trigger button for the sidebar.",[578,1275,1278],{"className":1276,"code":1277,"language":697,"meta":698},[695],"\u003CSidebarTrigger \u002F>\n",[538,1279,1277],{"__ignoreMap":584},[553,1281,1283],{"id":1282},"custom-trigger","Custom Trigger",[528,1285,1286,1287,1289],{},"You can create a custom trigger using the ",[538,1288,992],{}," hook.",[578,1291,1294],{"className":1292,"code":1293,"language":697,"meta":698},[695],"\u003Cscript setup lang=\"ts\">\nimport { useSidebar } from '@\u002Fcomponents\u002Fui\u002Fsidebar'\n\nconst { toggleSidebar } = useSidebar()\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CButton @click=\"toggleSidebar\">\n Toggle Sidebar\n \u003C\u002FButton>\n\u003C\u002Ftemplate>\n",[538,1295,1293],{"__ignoreMap":584},[553,1297,1299],{"id":1298},"sidebarrail","SidebarRail",[528,1301,824,1302,1304],{},[538,1303,1299],{}," component is used to render a rail in the sidebar. This is usually used to toggle the sidebar on hover when the sidebar is collapsed.",[578,1306,1309],{"className":1307,"code":1308,"language":697,"meta":698},[695],"\u003CSidebar collapsible=\"icon\">\n \u003CSidebarHeader \u002F>\n \u003CSidebarContent \u002F>\n \u003CSidebarFooter \u002F>\n \u003CSidebarRail \u002F>\n\u003C\u002FSidebar>\n",[538,1310,1308],{"__ignoreMap":584},[553,1312,1314],{"id":1313},"controlled-sidebar","Controlled Sidebar",[528,1316,844,1317,717,1319,1321],{},[538,1318,850],{},[538,1320,854],{}," props to control the sidebar.",[578,1323,1326],{"className":1324,"code":1325,"language":697,"meta":698},[695],"\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\n\nconst open = ref(false)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CSidebarProvider :open=\"open\" @update:open=\"open = $event\">\n \u003CSidebar \u002F>\n \u003C\u002FSidebarProvider>\n\u003C\u002Ftemplate>\n",[538,1327,1325],{"__ignoreMap":584},[553,1329,451],{"id":1330},"theming",[528,1332,1333],{},"You can theme the sidebar using CSS variables.",[578,1335,1338],{"className":1336,"code":1337,"language":616,"meta":584},[614],"@layer base {\n :root {\n --sidebar-background: 0 0% 98%;\n --sidebar-foreground: 240 5.3% 26.1%;\n --sidebar-primary: 240 5.9% 10%;\n --sidebar-primary-foreground: 0 0% 98%;\n --sidebar-accent: 240 4.8% 95.9%;\n --sidebar-accent-foreground: 240 5.9% 10%;\n --sidebar-border: 220 13% 91%;\n --sidebar-ring: 217.2 91.2% 59.8%;\n }\n\n .dark {\n --sidebar-background: 240 5.9% 10%;\n --sidebar-foreground: 240 4.8% 95.9%;\n --sidebar-primary: 224.3 76.3% 48%;\n --sidebar-primary-foreground: 0 0% 100%;\n --sidebar-accent: 240 3.7% 15.9%;\n --sidebar-accent-foreground: 240 4.8% 95.9%;\n --sidebar-border: 240 3.7% 15.9%;\n --sidebar-ring: 217.2 91.2% 59.8%;\n }\n}\n",[538,1339,1337],{"__ignoreMap":584},[553,1341,1343],{"id":1342},"styling","Styling",[528,1345,1346],{},"Here are some tips for styling the sidebar:",[630,1348,1349,1358],{},[633,1350,844,1351,717,1354,1357],{},[538,1352,1353],{},"data-sidebar",[538,1355,1356],{},"data-state"," attributes to style the sidebar.",[633,1359,1360,1361,1364],{},"The sidebar automatically sets the ",[538,1362,1363],{},"--sidebar-width"," CSS variable. You can use this to adjust the layout of your main content.",{"title":584,"searchDepth":1366,"depth":1366,"links":1367},2,[1368,1369,1370,1371,1372,1373,1380,1386,1387,1388,1389,1390,1391,1392,1393,1394,1399,1402,1403,1404,1405,1406,1407,1408,1409,1410,1411,1412],{"id":555,"depth":1366,"text":327},{"id":621,"depth":1366,"text":622},{"id":690,"depth":1366,"text":691},{"id":703,"depth":1366,"text":704},{"id":794,"depth":1366,"text":10},{"id":821,"depth":1366,"text":637,"children":1374},[1375,1377,1378,1379],{"id":831,"depth":1376,"text":832},3,{"id":840,"depth":1376,"text":841},{"id":864,"depth":1376,"text":865},{"id":886,"depth":1376,"text":887},{"id":912,"depth":1366,"text":250,"children":1381},[1382,1383,1384,1385],{"id":924,"depth":1376,"text":832},{"id":931,"depth":1376,"text":931},{"id":945,"depth":1376,"text":945},{"id":971,"depth":1376,"text":971},{"id":991,"depth":1366,"text":992},{"id":1006,"depth":1366,"text":648},{"id":1018,"depth":1366,"text":1019},{"id":1031,"depth":1366,"text":654},{"id":1043,"depth":1366,"text":660},{"id":1055,"depth":1366,"text":1056},{"id":1073,"depth":1366,"text":1074},{"id":1088,"depth":1366,"text":748},{"id":1102,"depth":1366,"text":1103,"children":1395},[1396,1397,1398],{"id":1111,"depth":1376,"text":1112},{"id":1130,"depth":1376,"text":1131},{"id":1145,"depth":1376,"text":1146},{"id":1160,"depth":1366,"text":1161,"children":1400},[1401],{"id":1175,"depth":1376,"text":803},{"id":1192,"depth":1366,"text":1193},{"id":1207,"depth":1366,"text":1208},{"id":1223,"depth":1366,"text":1224},{"id":1238,"depth":1366,"text":1239},{"id":1253,"depth":1366,"text":1254},{"id":1268,"depth":1366,"text":666},{"id":1282,"depth":1366,"text":1283},{"id":1298,"depth":1366,"text":1299},{"id":1313,"depth":1366,"text":1314},{"id":1330,"depth":1366,"text":451},{"id":1342,"depth":1366,"text":1343},"A composable, themeable and customizable sidebar component.","md",{"component":220},"---\ntitle: Sidebar\ndescription: A composable, themeable and customizable sidebar component.\ncomponent: true\n---\n\n\u003C!-- TODO: add all component preview -->\n\n::component-preview\n---\ntitle: Sidebar\nname: sidebar-07\ndescription: A composable, themeable and customizable sidebar component built using hui-kit\nclass: 'w-full'\ntype: block\n---\n::\n\n::vue-school-link{class=\"mt-6\" lesson=\"sidebars-in-hui-kit\" placement=\"top\"}\nWatch a Vue School video about building sidebars with hui-kit.\n::\n\nSidebars are one of the most complex components to build. They are central\nto any application and often contain a lot of moving parts.\n\nI don't like building sidebars. So I built 30+ of them. All kinds of\nconfigurations. Then I extracted the core components into `Sidebar*.vue`.\n\nWe now have a solid foundation to build on top of. Composable. Themeable.\nCustomizable.\n\n[Browse the Blocks Library](\u002Fblocks).\n\n## Installation\n\n:::::code-tabs\n\n:::tabs-list\n\n ::tabs-trigger{value=\"cli\"}\n CLI\n ::\n\n ::tabs-trigger{value=\"manual\"}\n Manual\n ::\n\n:::\n\n::tabs-content{value=\"cli\"}\n\n```bash\nnpx hui-kit@latest add sidebar\n```\n\n::\n\n::::tabs-content{value=\"manual\"}\n\n :::steps\n ::step\n Install this component\n ::\n\n ```bash\n npx hui-kit@latest add sidebar\n ```\n\n ::step\n Add the following colors to your CSS file\n ::\n\n The command above should install the colors for you. If not, copy and paste the following in your CSS file.\n\n ```css\n @layer base {\n :root {\n --sidebar-background: 0 0% 98%;\n --sidebar-foreground: 240 5.3% 26.1%;\n --sidebar-primary: 240 5.9% 10%;\n --sidebar-primary-foreground: 0 0% 98%;\n --sidebar-accent: 240 4.8% 95.9%;\n --sidebar-accent-foreground: 240 5.9% 10%;\n --sidebar-border: 220 13% 91%;\n --sidebar-ring: 217.2 91.2% 59.8%;\n }\n\n .dark {\n --sidebar-background: 240 5.9% 10%;\n --sidebar-foreground: 240 4.8% 95.9%;\n --sidebar-primary: 224.3 76.3% 48%;\n --sidebar-primary-foreground: 0 0% 100%;\n --sidebar-accent: 240 3.7% 15.9%;\n --sidebar-accent-foreground: 240 4.8% 95.9%;\n --sidebar-border: 240 3.7% 15.9%;\n --sidebar-ring: 217.2 91.2% 59.8%;\n }\n }\n ```\n :::\n\n::::\n\n:::::\n\n## Structure\n\nA `Sidebar` component is composed of the following parts:\n\n- `SidebarProvider` - Handles collapsible state.\n- `Sidebar` - The sidebar container.\n- `SidebarHeader` and SidebarFooter - Sticky at the top and bottom of the sidebar\n- `SidebarContent` - Scrollable content.\n- `SidebarGroup` - Section within the SidebarContent.\n- `SidebarTrigger` - Trigger for the Sidebar\n\n\u003Cimg\n src=\"\u002Fimages\u002Fsidebar-structure.png\"\n width=\"716\"\n height=\"420\"\n alt=\"Sidebar Structure\"\n class=\"border dark:hidden rounded-lg overflow-hidden mt-6 w-full\"\n\u002F>\n\u003Cimg\n src=\"\u002Fimages\u002Fsidebar-structure-dark.png\"\n width=\"716\"\n height=\"420\"\n alt=\"Sidebar Structure\"\n class=\"border hidden dark:block rounded-lg overflow-hidden mt-6 w-full\"\n\u002F>\n\n## Usage\n\n```vue showLineNumbers\n\u003Cscript setup lang=\"ts\">\nimport {\n Sidebar,\n SidebarContent,\n SidebarFooter,\n SidebarGroup,\n SidebarGroupContent,\n SidebarGroupLabel,\n SidebarHeader,\n SidebarInset,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n SidebarProvider,\n SidebarRail,\n SidebarTrigger,\n} from '@\u002Fcomponents\u002Fui\u002Fsidebar'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CSidebarProvider>\n \u003CSidebar>\n \u003CSidebarHeader>\n \u003CSidebarMenu>\n \u003CSidebarMenuItem>\n \u003CSidebarMenuButton size=\"lg\">\n \u003Cdiv class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n \u003CGalleryVerticalEnd class=\"size-4\" \u002F>\n \u003C\u002Fdiv>\n \u003Cdiv class=\"grid flex-1 text-left text-sm leading-tight\">\n \u003Cspan class=\"truncate font-semibold\">Acme Inc\u003C\u002Fspan>\n \u003Cspan class=\"truncate text-xs\">Enterprise\u003C\u002Fspan>\n \u003C\u002Fdiv>\n \u003C\u002FSidebarMenuButton>\n \u003C\u002FSidebarMenuItem>\n \u003C\u002FSidebarMenu>\n \u003C\u002FSidebarHeader>\n \u003CSidebarContent>\n \u003CSidebarGroup>\n \u003CSidebarGroupLabel>Platform\u003C\u002FSidebarGroupLabel>\n \u003CSidebarGroupContent>\n \u003CSidebarMenu>\n \u003CSidebarMenuItem>\n \u003CSidebarMenuButton as-child>\n \u003Ca href=\"#\">\n \u003CHome \u002F>\n \u003Cspan>Home\u003C\u002Fspan>\n \u003C\u002Fa>\n \u003C\u002FSidebarMenuButton>\n \u003C\u002FSidebarMenuItem>\n \u003C\u002FSidebarMenu>\n \u003C\u002FSidebarGroupContent>\n \u003C\u002FSidebarGroup>\n \u003C\u002FSidebarContent>\n \u003CSidebarFooter \u002F>\n \u003CSidebarRail \u002F>\n \u003C\u002FSidebar>\n \u003CSidebarInset>\n \u003Cheader class=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]\u002Fsidebar-wrapper:h-12\">\n \u003Cdiv class=\"flex items-center gap-2 px-4\">\n \u003CSidebarTrigger class=\"-ml-1\" \u002F>\n \u003C\u002Fdiv>\n \u003C\u002Fheader>\n \u003Cdiv class=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n \u003Cdiv class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n \u003Cdiv class=\"aspect-video rounded-xl bg-muted\u002F50\" \u002F>\n \u003Cdiv class=\"aspect-video rounded-xl bg-muted\u002F50\" \u002F>\n \u003Cdiv class=\"aspect-video rounded-xl bg-muted\u002F50\" \u002F>\n \u003C\u002Fdiv>\n \u003Cdiv class=\"min-h-[100vh] flex-1 rounded-xl bg-muted\u002F50 md:min-h-min\" \u002F>\n \u003C\u002Fdiv>\n \u003C\u002FSidebarInset>\n \u003C\u002FSidebarProvider>\n\u003C\u002Ftemplate>\n```\n\n## Your First Sidebar\n\nLet's start with the most basic sidebar A collapsible sidebar with a menu.\n\n:::steps\n\n ::step\n Add a `SidebarProvider` and `SidebarTrigger` at the root of your application\n ::\n\n ```vue showLineNumbers\n \u003Cscript setup lang=\"ts\">\n import AppSidebar from '@\u002Fcomponents\u002FAppSidebar.vue'\n import { SidebarProvider, SidebarTrigger } from '@\u002Fcomponents\u002Fui\u002Fsidebar'\n \u003C\u002Fscript>\n\n \u003Ctemplate>\n \u003CSidebarProvider>\n \u003CAppSidebar \u002F>\n \u003Cmain>\n \u003CSidebarTrigger \u002F>\n \u003Cslot \u002F>\n \u003C\u002Fmain>\n \u003C\u002FSidebarProvider>\n \u003C\u002Ftemplate>\n ```\n\n ::step\n Create a new sidebar component at `@\u002Fcomponents\u002FAppSidebar.vue`\n ::\n\n ```vue showLineNumbers\n \u003Cscript setup lang=\"ts\">\n import { Sidebar, SidebarContent } from '@\u002Fcomponents\u002Fui\u002Fsidebar'\n \u003C\u002Fscript>\n\n \u003Ctemplate>\n \u003CSidebar>\n \u003CSidebarContent \u002F>\n \u003C\u002FSidebar>\n \u003C\u002Ftemplate>\n ```\n\n ::step\n Now, let's add a `SidebarMenu` to the sidebar\n ::\n\n We'll use the `SidebarMenu` component in a `SidebarGroup`.\n\n ```vue showLineNumbers\n \u003Cscript setup lang=\"ts\">\n import { Calendar, Home, Inbox, Search, Settings } from '@lucide\u002Fvue'\n import {\n Sidebar,\n SidebarContent,\n SidebarGroup,\n SidebarGroupContent,\n SidebarGroupLabel,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n } from '@\u002Fcomponents\u002Fui\u002Fsidebar'\n\n \u002F\u002F Menu items.\n const items = [\n {\n title: 'Home',\n url: '#',\n icon: Home,\n },\n {\n title: 'Inbox',\n url: '#',\n icon: Inbox,\n },\n {\n title: 'Calendar',\n url: '#',\n icon: Calendar,\n },\n {\n title: 'Search',\n url: '#',\n icon: Search,\n },\n {\n title: 'Settings',\n url: '#',\n icon: Settings,\n },\n ]\n \u003C\u002Fscript>\n\n \u003Ctemplate>\n \u003CSidebar>\n \u003CSidebarContent>\n \u003CSidebarGroup>\n \u003CSidebarGroupLabel>Application\u003C\u002FSidebarGroupLabel>\n \u003CSidebarGroupContent>\n \u003CSidebarMenu>\n \u003CSidebarMenuItem v-for=\"item in items\" :key=\"item.title\">\n \u003CSidebarMenuButton as-child>\n \u003Ca :href=\"item.url\">\n \u003Ccomponent :is=\"item.icon\" \u002F>\n \u003Cspan>{{ item.title }}\u003C\u002Fspan>\n \u003C\u002Fa>\n \u003C\u002FSidebarMenuButton>\n \u003C\u002FSidebarMenuItem>\n \u003C\u002FSidebarMenu>\n \u003C\u002FSidebarGroupContent>\n \u003C\u002FSidebarGroup>\n \u003C\u002FSidebarContent>\n \u003C\u002FSidebar>\n \u003C\u002Ftemplate>\n ```\n\n ::step\n You've created your first sidebar.\n ::\n\n You should see something like this:\n\n\u003Cfigure class=\"flex flex-col gap-4\">\n\n ::component-preview\n ---\n title: Sidebar\n name: sidebar-demo\n description: Your first sidebar.\n class: 'w-full'\n type: block\n ---\n ::\n\n \u003Cfigcaption class=\"text-center text-sm text-gray-500\">\n Your first sidebar\n \u003C\u002Ffigcaption>\n\u003C\u002Ffigure>\n\n:::\n\n## Components\n\nThe components in the `Sidebar*.vue` files are built to be composable i.e you build your sidebar by putting the provided components together. They also compose well with other hui-kit components such as `DropdownMenu`, `Collapsible`, `Dialog`, etc.\n\n**If you need to change the code in the `Sidebar*.vue` files, you are encourage to do so. The code is yours. Use the provided components as a starting point to build your own**\n\n## SidebarProvider\n\nThe `SidebarProvider` component is used to provide the sidebar context to all its children.\n\n### Props\n\nThe `SidebarProvider` component accepts the following props:\n\n### Width\n\nUse the `defaultOpen`, `open`, and `onOpenChange` props to control the open state of the sidebar.\n\n```vue showLineNumbers\n\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\n\nconst open = ref(false)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CSidebarProvider :open=\"open\" @update:open=\"open = $event\">\n \u003C!-- ... -->\n \u003C\u002FSidebarProvider>\n\u003C\u002Ftemplate>\n```\n\n### Keyboard Shortcut\n\nThe `SidebarProvider` component supports keyboard shortcuts to toggle the sidebar. The default shortcut is `cmd+b` or `ctrl+b`.\n\n```vue showLineNumbers\n\u003CSidebarProvider>\n \u003C!-- ... -->\n\u003C\u002FSidebarProvider>\n```\n\n### Persisted State\n\nTo persist the sidebar state, you can use the `storageKey` prop on the `SidebarProvider` component.\n\n```vue showLineNumbers\n\u003CSidebarProvider storage-key=\"sidebar\">\n \u003C!-- ... -->\n\u003C\u002FSidebarProvider>\n```\n\n```vue showLineNumbers\n\u003CSidebarProvider\n :default-open=\"false\"\n storage-key=\"sidebar\"\n class=\"flex min-h-screen\"\n>\n \u003C!-- ... -->\n\u003C\u002FSidebarProvider>\n```\n\n## Sidebar\n\nThe main sidebar component.\n\n```vue showLineNumbers\n\u003CSidebar>\n \u003CSidebarHeader \u002F>\n \u003CSidebarContent \u002F>\n \u003CSidebarFooter \u002F>\n\u003C\u002FSidebar>\n```\n\n### Props\n\nThe `Sidebar` component accepts the following props:\n\n### side\n\nUse the `side` prop to set the side of the sidebar.\n\n```vue showLineNumbers\n\u003CSidebar side=\"left\">\n \u003C!-- ... -->\n\u003C\u002FSidebar>\n```\n\n### variant\n\nUse the `variant` prop to set the variant of the sidebar.\n\n```vue showLineNumbers\n\u003C!-- Default variant -->\n\u003CSidebar variant=\"sidebar\">\n \u003C!-- ... -->\n\u003C\u002FSidebar>\n```\n\n```vue showLineNumbers\n\u003C!-- Floating variant -->\n\u003CSidebar variant=\"floating\">\n \u003C!-- ... -->\n\u003C\u002FSidebar>\n```\n\n```vue showLineNumbers\n\u003C!-- Inset variant -->\n\u003CSidebar variant=\"inset\">\n \u003C!-- ... -->\n\u003C\u002FSidebar>\n```\n\n### collapsible\n\nUse the `collapsible` prop to make the sidebar collapsible.\n\n```vue showLineNumbers\n\u003CSidebar collapsible=\"icon\">\n \u003C!-- ... -->\n\u003C\u002FSidebar>\n```\n\n```vue showLineNumbers\n\u003CSidebar collapsible=\"offcanvas\">\n \u003C!-- ... -->\n\u003C\u002FSidebar>\n```\n\n## useSidebar\n\nThe `useSidebar` hook is used to control the sidebar.\n\n```vue showLineNumbers\n\u003Cscript setup lang=\"ts\">\nimport { useSidebar } from '@\u002Fcomponents\u002Fui\u002Fsidebar'\n\nconst {\n state,\n open,\n setOpen,\n openMobile,\n setOpenMobile,\n isMobile,\n toggleSidebar,\n} = useSidebar()\n\u003C\u002Fscript>\n```\n\n## SidebarHeader\n\nUsed to render the sidebar header.\n\n```vue showLineNumbers\n\u003CSidebar>\n \u003CSidebarHeader>\n \u003CSidebarMenu>\n \u003CSidebarMenuItem>\n \u003CSidebarMenuButton size=\"lg\">\n \u003Cdiv class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n \u003CGalleryVerticalEnd class=\"size-4\" \u002F>\n \u003C\u002Fdiv>\n \u003Cdiv class=\"flex flex-col gap-0.5 leading-none\">\n \u003Cspan class=\"font-semibold\">Documentation\u003C\u002Fspan>\n \u003Cspan class=\"\">v1.0.0\u003C\u002Fspan>\n \u003C\u002Fdiv>\n \u003C\u002FSidebarMenuButton>\n \u003C\u002FSidebarMenuItem>\n \u003C\u002FSidebarMenu>\n \u003C\u002FSidebarHeader>\n\u003C\u002FSidebar>\n```\n\n## SidebarFooter\n\nUsed to render the sidebar footer.\n\n```vue showLineNumbers\n\u003CSidebar>\n \u003CSidebarFooter>\n \u003CSidebarMenu>\n \u003CSidebarMenuItem>\n \u003CDropdownMenu>\n \u003CDropdownMenuTrigger as-child>\n \u003CSidebarMenuButton>\n \u003CUser2 \u002F> Username\n \u003CChevronUp class=\"ml-auto\" \u002F>\n \u003C\u002FSidebarMenuButton>\n \u003C\u002FDropdownMenuTrigger>\n \u003CDropdownMenuContent\n side=\"top\"\n class=\"w-(--reka-popper-anchor-width)\"\n >\n \u003CDropdownMenuItem>\n \u003Cspan>Account\u003C\u002Fspan>\n \u003C\u002FDropdownMenuItem>\n \u003CDropdownMenuItem>\n \u003Cspan>Billing\u003C\u002Fspan>\n \u003C\u002FDropdownMenuItem>\n \u003CDropdownMenuItem>\n \u003Cspan>Sign out\u003C\u002Fspan>\n \u003C\u002FDropdownMenuItem>\n \u003C\u002FDropdownMenuContent>\n \u003C\u002FDropdownMenu>\n \u003C\u002FSidebarMenuItem>\n \u003C\u002FSidebarMenu>\n \u003C\u002FSidebarFooter>\n\u003C\u002FSidebar>\n```\n\n## SidebarContent\n\nThe scrollable content area of the sidebar.\n\n```vue showLineNumbers\n\u003CSidebar>\n \u003CSidebarContent>\n \u003CSidebarGroup \u002F>\n \u003CSidebarGroup \u002F>\n \u003C\u002FSidebarContent>\n\u003C\u002FSidebar>\n```\n\n## SidebarGroup\n\nUsed to group sidebar menu items.\n\n```vue showLineNumbers\n\u003CSidebarContent>\n \u003CSidebarGroup>\n \u003CSidebarGroupLabel>Application\u003C\u002FSidebarGroupLabel>\n \u003CSidebarGroupContent>\n \u003C!-- SidebarMenu -->\n \u003C\u002FSidebarGroupContent>\n \u003C\u002FSidebarGroup>\n\u003C\u002FSidebarContent>\n```\n\n## Collapsible SidebarGroup\n\nTo make a `SidebarGroup` collapsible, wrap it in a `Collapsible` component.\n\n```vue showLineNumbers\n\u003CSidebarGroup as-child>\n \u003CCollapsible default-open class=\"group\u002Fcollapsible\">\n \u003CSidebarGroupLabel as-child>\n \u003CCollapsibleTrigger class=\"group\u002Flabel w-full text-left text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground [&[data-state=open]>svg]:rotate-90\">\n Help\n \u003CChevronRight class=\"ml-auto transition-transform group-data-[state=open]\u002Fcollapsible:rotate-90\" \u002F>\n \u003C\u002FCollapsibleTrigger>\n \u003C\u002FSidebarGroupLabel>\n \u003CCollapsibleContent>\n \u003CSidebarGroupContent>\n \u003CSidebarMenu>\n \u003C!-- Menu items -->\n \u003C\u002FSidebarMenu>\n \u003C\u002FSidebarGroupContent>\n \u003C\u002FCollapsibleContent>\n \u003C\u002FCollapsible>\n\u003C\u002FSidebarGroup>\n```\n\n## SidebarGroupAction\n\nThe `SidebarGroupAction` component is used to render an action button in the sidebar group header.\n\n```vue showLineNumbers\n\u003CSidebarGroup>\n \u003CSidebarGroupLabel>\n Projects\n \u003CSidebarGroupAction>\n \u003CPlus \u002F> \u003Cspan class=\"sr-only\">Add Project\u003C\u002Fspan>\n \u003C\u002FSidebarGroupAction>\n \u003C\u002FSidebarGroupLabel>\n \u003CSidebarGroupContent>\u003C\u002FSidebarGroupContent>\n\u003C\u002FSidebarGroup>\n```\n\n## SidebarMenu\n\nThe `SidebarMenu` component is used to render a menu in the sidebar.\n\n```vue showLineNumbers\n\u003CSidebarGroupContent>\n \u003CSidebarMenu>\n \u003CSidebarMenuItem>\n \u003CSidebarMenuButton as-child>\n \u003Ca href=\"#\">\n \u003CHome \u002F>\n \u003Cspan>Home\u003C\u002Fspan>\n \u003C\u002Fa>\n \u003C\u002FSidebarMenuButton>\n \u003C\u002FSidebarMenuItem>\n \u003CSidebarMenuItem>\n \u003CSidebarMenuButton as-child>\n \u003Ca href=\"#\">\n \u003CInbox \u002F>\n \u003Cspan>Inbox\u003C\u002Fspan>\n \u003C\u002Fa>\n \u003C\u002FSidebarMenuButton>\n \u003C\u002FSidebarMenuItem>\n \u003C\u002FSidebarMenu>\n\u003C\u002FSidebarGroupContent>\n```\n\n## SidebarMenuButton\n\nThe `SidebarMenuButton` component is used to render a menu button in the sidebar.\n\n### Link or Anchor\n\nUse the `as-child` prop to render the `SidebarMenuButton` as a link or anchor.\n\n```vue showLineNumbers\n\u003CSidebarMenuButton as-child>\n \u003Ca href=\"#\">\n \u003CHome \u002F>\n \u003Cspan>Home\u003C\u002Fspan>\n \u003C\u002Fa>\n\u003C\u002FSidebarMenuButton>\n```\n\n### Icon and Label\n\nYou can render an icon and label in the `SidebarMenuButton` component.\n\n```vue showLineNumbers\n\u003CSidebarMenuButton>\n \u003CHome \u002F>\n \u003Cspan>Home\u003C\u002Fspan>\n\u003C\u002FSidebarMenuButton>\n```\n\n### isActive\n\nUse the `isActive` prop to mark a menu button as active.\n\n```vue showLineNumbers\n\u003CSidebarMenuButton :is-active=\"true\">\n \u003CHome \u002F>\n \u003Cspan>Home\u003C\u002Fspan>\n\u003C\u002FSidebarMenuButton>\n```\n\n## SidebarMenuAction\n\nThe `SidebarMenuAction` component is used to render a menu action in the sidebar.\n\n```vue showLineNumbers\n\u003CSidebarMenuItem>\n \u003CSidebarMenuButton>\n \u003CHome \u002F>\n \u003Cspan>Home\u003C\u002Fspan>\n \u003C\u002FSidebarMenuButton>\n \u003CSidebarMenuAction>\n \u003CMoreHorizontal \u002F>\n \u003C\u002FSidebarMenuAction>\n\u003C\u002FSidebarMenuItem>\n```\n\n### DropdownMenu\n\nYou can use the `SidebarMenuAction` component with a `DropdownMenu` component.\n\n```vue showLineNumbers\n\u003CSidebarMenuItem>\n \u003CSidebarMenuButton>\n \u003CHome \u002F>\n \u003Cspan>Home\u003C\u002Fspan>\n \u003C\u002FSidebarMenuButton>\n \u003CDropdownMenu>\n \u003CDropdownMenuTrigger as-child>\n \u003CSidebarMenuAction>\n \u003CMoreHorizontal \u002F>\n \u003C\u002FSidebarMenuAction>\n \u003C\u002FDropdownMenuTrigger>\n \u003CDropdownMenuContent side=\"right\" align=\"start\">\n \u003CDropdownMenuItem>\n \u003Cspan>Edit Project\u003C\u002Fspan>\n \u003C\u002FDropdownMenuItem>\n \u003CDropdownMenuItem>\n \u003Cspan>Delete Project\u003C\u002Fspan>\n \u003C\u002FDropdownMenuItem>\n \u003C\u002FDropdownMenuContent>\n \u003C\u002FDropdownMenu>\n\u003C\u002FSidebarMenuItem>\n```\n\n## SidebarMenuSub\n\nThe `SidebarMenuSub` component is used to render a submenu in the sidebar.\n\n```vue showLineNumbers\n\u003CSidebarMenuItem>\n \u003CSidebarMenuButton>\n \u003CHome \u002F>\n \u003Cspan>Home\u003C\u002Fspan>\n \u003C\u002FSidebarMenuButton>\n \u003CSidebarMenuSub>\n \u003CSidebarMenuItem>\n \u003CSidebarMenuButton>\n \u003Cspan>History\u003C\u002Fspan>\n \u003C\u002FSidebarMenuButton>\n \u003C\u002FSidebarMenuItem>\n\n \u003CSidebarMenuItem>\n \u003CSidebarMenuButton>\n \u003Cspan>Starred\u003C\u002Fspan>\n \u003C\u002FSidebarMenuButton>\n \u003C\u002FSidebarMenuItem>\n \u003C\u002FSidebarMenuSub>\n\u003C\u002FSidebarMenuItem>\n```\n\n## Collapsible SidebarMenu\n\nTo make a `SidebarMenu` collapsible, wrap it in a `Collapsible` component.\n\n```vue showLineNumbers\n\u003CSidebarMenuItem>\n \u003CCollapsible default-open class=\"group\u002Fcollapsible\">\n \u003CCollapsibleTrigger as-child>\n \u003CSidebarMenuButton>\n \u003CHome \u002F>\n \u003Cspan>Home\u003C\u002Fspan>\n \u003CChevronRight class=\"ml-auto transition-transform group-data-[state=open]\u002Fcollapsible:rotate-90\" \u002F>\n \u003C\u002FSidebarMenuButton>\n \u003C\u002FCollapsibleTrigger>\n \u003CCollapsibleContent>\n \u003CSidebarMenuSub>\n \u003CSidebarMenuItem>\n \u003CSidebarMenuButton>\n \u003Cspan>History\u003C\u002Fspan>\n \u003C\u002FSidebarMenuButton>\n \u003C\u002FSidebarMenuItem>\n\n \u003CSidebarMenuItem>\n \u003CSidebarMenuButton>\n \u003Cspan>Starred\u003C\u002Fspan>\n \u003C\u002FSidebarMenuButton>\n \u003C\u002FSidebarMenuItem>\n \u003C\u002FSidebarMenuSub>\n \u003C\u002FCollapsibleContent>\n \u003C\u002FCollapsible>\n\u003C\u002FSidebarMenuItem>\n```\n\n## SidebarMenuBadge\n\nThe `SidebarMenuBadge` component is used to render a badge in the sidebar menu.\n\n```vue showLineNumbers\n\u003CSidebarMenuButton>\n \u003CHome \u002F>\n \u003Cspan>Home\u003C\u002Fspan>\n \u003CSidebarMenuBadge>24\u003C\u002FSidebarMenuBadge>\n\u003C\u002FSidebarMenuButton>\n```\n\n## SidebarMenuSkeleton\n\nYou can use the `SidebarMenuSkeleton` component to render a skeleton loader in the sidebar menu.\n\n```vue showLineNumbers\n\u003CSidebarMenu>\n \u003CSidebarMenuItem v-for=\"item in Array.from({ length: 5 })\" :key=\"item\">\n \u003CSidebarMenuSkeleton \u002F>\n \u003C\u002FSidebarMenuItem>\n\u003C\u002FSidebarMenu>\n```\n\n## SidebarSeparator\n\nThe `SidebarSeparator` component is used to render a separator in the sidebar.\n\n```vue showLineNumbers\n\u003CSidebarContent>\n \u003CSidebarGroup \u002F>\n \u003CSidebarSeparator \u002F>\n \u003CSidebarGroup \u002F>\n\u003C\u002FSidebarContent>\n```\n\n## SidebarTrigger\n\nThe `SidebarTrigger` component is used to render a trigger button for the sidebar.\n\n```vue showLineNumbers\n\u003CSidebarTrigger \u002F>\n```\n\n## Custom Trigger\n\nYou can create a custom trigger using the `useSidebar` hook.\n\n```vue showLineNumbers\n\u003Cscript setup lang=\"ts\">\nimport { useSidebar } from '@\u002Fcomponents\u002Fui\u002Fsidebar'\n\nconst { toggleSidebar } = useSidebar()\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CButton @click=\"toggleSidebar\">\n Toggle Sidebar\n \u003C\u002FButton>\n\u003C\u002Ftemplate>\n```\n\n## SidebarRail\n\nThe `SidebarRail` component is used to render a rail in the sidebar. This is usually used to toggle the sidebar on hover when the sidebar is collapsed.\n\n```vue showLineNumbers\n\u003CSidebar collapsible=\"icon\">\n \u003CSidebarHeader \u002F>\n \u003CSidebarContent \u002F>\n \u003CSidebarFooter \u002F>\n \u003CSidebarRail \u002F>\n\u003C\u002FSidebar>\n```\n\n## Controlled Sidebar\n\nUse the `open` and `onOpenChange` props to control the sidebar.\n\n```vue showLineNumbers\n\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\n\nconst open = ref(false)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CSidebarProvider :open=\"open\" @update:open=\"open = $event\">\n \u003CSidebar \u002F>\n \u003C\u002FSidebarProvider>\n\u003C\u002Ftemplate>\n```\n\n## Theming\n\nYou can theme the sidebar using CSS variables.\n\n```css\n@layer base {\n :root {\n --sidebar-background: 0 0% 98%;\n --sidebar-foreground: 240 5.3% 26.1%;\n --sidebar-primary: 240 5.9% 10%;\n --sidebar-primary-foreground: 0 0% 98%;\n --sidebar-accent: 240 4.8% 95.9%;\n --sidebar-accent-foreground: 240 5.9% 10%;\n --sidebar-border: 220 13% 91%;\n --sidebar-ring: 217.2 91.2% 59.8%;\n }\n\n .dark {\n --sidebar-background: 240 5.9% 10%;\n --sidebar-foreground: 240 4.8% 95.9%;\n --sidebar-primary: 224.3 76.3% 48%;\n --sidebar-primary-foreground: 0 0% 100%;\n --sidebar-accent: 240 3.7% 15.9%;\n --sidebar-accent-foreground: 240 4.8% 95.9%;\n --sidebar-border: 240 3.7% 15.9%;\n --sidebar-ring: 217.2 91.2% 59.8%;\n }\n}\n```\n\n## Styling\n\nHere are some tips for styling the sidebar:\n\n- Use the `data-sidebar` and `data-state` attributes to style the sidebar.\n- The sidebar automatically sets the `--sidebar-width` CSS variable. You can use this to adjust the layout of your main content.",{"title":250,"description":1413},"S34fOkKA3WNK1OYhGOx_g_mWOW3jkQY-UglXjh-vZMA",[1420,1421],{"title":246,"path":247,"stem":248,"children":-1},{"title":254,"path":255,"stem":256,"children":-1},1787698068130]