[{"data":1,"prerenderedAt":1397},["ShallowReactive",2],{"navigation":3,"$f2vxmxe0ttlw1b":470,"\u002Fdocs\u002Fcomponents\u002Fsidebar":481,"surround-\u002Fdocs\u002Fcomponents\u002Fsidebar":1394},[4],{"title":5,"path":6,"stem":7,"children":8,"page":18},"Docs","\u002Fdocs","docs",[9,298,324,342,348,365,391,405],{"title":10,"path":11,"stem":12,"children":13,"new":18,"type":297},"Components","\u002Fdocs\u002Fcomponents","docs\u002F02.components",[14,20,24,28,32,36,40,44,48,52,56,60,64,68,72,76,80,84,88,92,96,100,104,108,112,116,120,124,128,132,136,140,144,148,152,156,160,164,168,172,176,180,184,188,192,196,200,205,209,213,217,221,225,229,233,237,241,245,249,253,257,261,265,269,273,277,281,285,289,293],{"title":15,"path":16,"stem":17,"new":18,"type":19,"children":-1},"Accordion","\u002Fdocs\u002Fcomponents\u002Faccordion","docs\u002Fcomponents\u002Faccordion",false,"component",{"title":21,"path":22,"stem":23,"new":18,"type":19,"children":-1},"Alert","\u002Fdocs\u002Fcomponents\u002Falert","docs\u002Fcomponents\u002Falert",{"title":25,"path":26,"stem":27,"new":18,"type":19,"children":-1},"Alert Dialog","\u002Fdocs\u002Fcomponents\u002Falert-dialog","docs\u002Fcomponents\u002Falert-dialog",{"title":29,"path":30,"stem":31,"new":18,"type":19,"children":-1},"Aspect Ratio","\u002Fdocs\u002Fcomponents\u002Faspect-ratio","docs\u002Fcomponents\u002Faspect-ratio",{"title":33,"path":34,"stem":35,"new":18,"type":19,"children":-1},"Attachment","\u002Fdocs\u002Fcomponents\u002Fattachment","docs\u002Fcomponents\u002Fattachment",{"title":37,"path":38,"stem":39,"new":18,"type":19,"children":-1},"Avatar","\u002Fdocs\u002Fcomponents\u002Favatar","docs\u002Fcomponents\u002Favatar",{"title":41,"path":42,"stem":43,"new":18,"type":19,"children":-1},"Badge","\u002Fdocs\u002Fcomponents\u002Fbadge","docs\u002Fcomponents\u002Fbadge",{"title":45,"path":46,"stem":47,"new":18,"type":19,"children":-1},"Breadcrumb","\u002Fdocs\u002Fcomponents\u002Fbreadcrumb","docs\u002Fcomponents\u002Fbreadcrumb",{"title":49,"path":50,"stem":51,"new":18,"type":19,"children":-1},"Bubble","\u002Fdocs\u002Fcomponents\u002Fbubble","docs\u002Fcomponents\u002Fbubble",{"title":53,"path":54,"stem":55,"new":18,"type":19,"children":-1},"Button","\u002Fdocs\u002Fcomponents\u002Fbutton","docs\u002Fcomponents\u002Fbutton",{"title":57,"path":58,"stem":59,"new":18,"type":19,"children":-1},"Button Group","\u002Fdocs\u002Fcomponents\u002Fbutton-group","docs\u002Fcomponents\u002Fbutton-group",{"title":61,"path":62,"stem":63,"new":18,"type":19,"children":-1},"Calendar","\u002Fdocs\u002Fcomponents\u002Fcalendar","docs\u002Fcomponents\u002Fcalendar",{"title":65,"path":66,"stem":67,"new":18,"type":19,"children":-1},"Card","\u002Fdocs\u002Fcomponents\u002Fcard","docs\u002Fcomponents\u002Fcard",{"title":69,"path":70,"stem":71,"new":18,"type":19,"children":-1},"Carousel","\u002Fdocs\u002Fcomponents\u002Fcarousel","docs\u002Fcomponents\u002Fcarousel",{"title":73,"path":74,"stem":75,"new":18,"type":19,"children":-1},"Chart","\u002Fdocs\u002Fcomponents\u002Fchart","docs\u002Fcomponents\u002Fchart",{"title":77,"path":78,"stem":79,"new":18,"type":19,"children":-1},"Checkbox","\u002Fdocs\u002Fcomponents\u002Fcheckbox","docs\u002Fcomponents\u002Fcheckbox",{"title":81,"path":82,"stem":83,"new":18,"type":19,"children":-1},"Collapsible","\u002Fdocs\u002Fcomponents\u002Fcollapsible","docs\u002Fcomponents\u002Fcollapsible",{"title":85,"path":86,"stem":87,"new":18,"type":19,"children":-1},"Combobox","\u002Fdocs\u002Fcomponents\u002Fcombobox","docs\u002Fcomponents\u002Fcombobox",{"title":89,"path":90,"stem":91,"new":18,"type":19,"children":-1},"Command","\u002Fdocs\u002Fcomponents\u002Fcommand","docs\u002Fcomponents\u002Fcommand",{"title":93,"path":94,"stem":95,"new":18,"type":19,"children":-1},"Context Menu","\u002Fdocs\u002Fcomponents\u002Fcontext-menu","docs\u002Fcomponents\u002Fcontext-menu",{"title":97,"path":98,"stem":99,"new":18,"type":19,"children":-1},"Data Table","\u002Fdocs\u002Fcomponents\u002Fdata-table","docs\u002Fcomponents\u002Fdata-table",{"title":101,"path":102,"stem":103,"new":18,"type":19,"children":-1},"Date Picker","\u002Fdocs\u002Fcomponents\u002Fdate-picker","docs\u002Fcomponents\u002Fdate-picker",{"title":105,"path":106,"stem":107,"new":18,"type":19,"children":-1},"Dialog","\u002Fdocs\u002Fcomponents\u002Fdialog","docs\u002Fcomponents\u002Fdialog",{"title":109,"path":110,"stem":111,"new":18,"type":19,"children":-1},"Drawer","\u002Fdocs\u002Fcomponents\u002Fdrawer","docs\u002Fcomponents\u002Fdrawer",{"title":113,"path":114,"stem":115,"new":18,"type":19,"children":-1},"Dropdown Menu","\u002Fdocs\u002Fcomponents\u002Fdropdown-menu","docs\u002Fcomponents\u002Fdropdown-menu",{"title":117,"path":118,"stem":119,"new":18,"type":19,"children":-1},"Empty","\u002Fdocs\u002Fcomponents\u002Fempty","docs\u002Fcomponents\u002Fempty",{"title":121,"path":122,"stem":123,"new":18,"type":19,"children":-1},"Field","\u002Fdocs\u002Fcomponents\u002Ffield","docs\u002Fcomponents\u002Ffield",{"title":125,"path":126,"stem":127,"new":18,"type":19,"children":-1},"Form","\u002Fdocs\u002Fcomponents\u002Fform","docs\u002Fcomponents\u002Fform",{"title":129,"path":130,"stem":131,"new":18,"type":19,"children":-1},"Hover Card","\u002Fdocs\u002Fcomponents\u002Fhover-card","docs\u002Fcomponents\u002Fhover-card",{"title":133,"path":134,"stem":135,"new":18,"type":19,"children":-1},"Input","\u002Fdocs\u002Fcomponents\u002Finput","docs\u002Fcomponents\u002Finput",{"title":137,"path":138,"stem":139,"new":18,"type":19,"children":-1},"Input Group","\u002Fdocs\u002Fcomponents\u002Finput-group","docs\u002Fcomponents\u002Finput-group",{"title":141,"path":142,"stem":143,"new":18,"type":19,"children":-1},"Input OTP","\u002Fdocs\u002Fcomponents\u002Finput-otp","docs\u002Fcomponents\u002Finput-otp",{"title":145,"path":146,"stem":147,"new":18,"type":19,"children":-1},"Item","\u002Fdocs\u002Fcomponents\u002Fitem","docs\u002Fcomponents\u002Fitem",{"title":149,"path":150,"stem":151,"new":18,"type":19,"children":-1},"Kbd","\u002Fdocs\u002Fcomponents\u002Fkbd","docs\u002Fcomponents\u002Fkbd",{"title":153,"path":154,"stem":155,"new":18,"type":19,"children":-1},"Label","\u002Fdocs\u002Fcomponents\u002Flabel","docs\u002Fcomponents\u002Flabel",{"title":157,"path":158,"stem":159,"new":18,"type":19,"children":-1},"Marker","\u002Fdocs\u002Fcomponents\u002Fmarker","docs\u002Fcomponents\u002Fmarker",{"title":161,"path":162,"stem":163,"new":18,"type":19,"children":-1},"Menubar","\u002Fdocs\u002Fcomponents\u002Fmenubar","docs\u002Fcomponents\u002Fmenubar",{"title":165,"path":166,"stem":167,"new":18,"type":19,"children":-1},"Message","\u002Fdocs\u002Fcomponents\u002Fmessage","docs\u002Fcomponents\u002Fmessage",{"title":169,"path":170,"stem":171,"new":18,"type":19,"children":-1},"Message Scroller","\u002Fdocs\u002Fcomponents\u002Fmessage-scroller","docs\u002Fcomponents\u002Fmessage-scroller",{"title":173,"path":174,"stem":175,"new":18,"type":19,"children":-1},"Native Select","\u002Fdocs\u002Fcomponents\u002Fnative-select","docs\u002Fcomponents\u002Fnative-select",{"title":177,"path":178,"stem":179,"new":18,"type":19,"children":-1},"Navigation Menu","\u002Fdocs\u002Fcomponents\u002Fnavigation-menu","docs\u002Fcomponents\u002Fnavigation-menu",{"title":181,"path":182,"stem":183,"new":18,"type":19,"children":-1},"Number Field","\u002Fdocs\u002Fcomponents\u002Fnumber-field","docs\u002Fcomponents\u002Fnumber-field",{"title":185,"path":186,"stem":187,"new":18,"type":19,"children":-1},"Pagination","\u002Fdocs\u002Fcomponents\u002Fpagination","docs\u002Fcomponents\u002Fpagination",{"title":189,"path":190,"stem":191,"new":18,"type":19,"children":-1},"Pin Input","\u002Fdocs\u002Fcomponents\u002Fpin-input","docs\u002Fcomponents\u002Fpin-input",{"title":193,"path":194,"stem":195,"new":18,"type":19,"children":-1},"Popover","\u002Fdocs\u002Fcomponents\u002Fpopover","docs\u002Fcomponents\u002Fpopover",{"title":197,"path":198,"stem":199,"new":18,"type":19,"children":-1},"Progress","\u002Fdocs\u002Fcomponents\u002Fprogress","docs\u002Fcomponents\u002Fprogress",{"title":201,"path":202,"stem":203,"new":204,"type":19,"children":-1},"Questionnaire","\u002Fdocs\u002Fcomponents\u002Fquestionnaire","docs\u002Fcomponents\u002Fquestionnaire",true,{"title":206,"path":207,"stem":208,"new":18,"type":19,"children":-1},"Radio Group","\u002Fdocs\u002Fcomponents\u002Fradio-group","docs\u002Fcomponents\u002Fradio-group",{"title":210,"path":211,"stem":212,"new":18,"type":19,"children":-1},"Range Calendar","\u002Fdocs\u002Fcomponents\u002Frange-calendar","docs\u002Fcomponents\u002Frange-calendar",{"title":214,"path":215,"stem":216,"new":18,"type":19,"children":-1},"Resizable","\u002Fdocs\u002Fcomponents\u002Fresizable","docs\u002Fcomponents\u002Fresizable",{"title":218,"path":219,"stem":220,"new":18,"type":19,"children":-1},"Scroll Area","\u002Fdocs\u002Fcomponents\u002Fscroll-area","docs\u002Fcomponents\u002Fscroll-area",{"title":222,"path":223,"stem":224,"new":18,"type":19,"children":-1},"Select","\u002Fdocs\u002Fcomponents\u002Fselect","docs\u002Fcomponents\u002Fselect",{"title":226,"path":227,"stem":228,"new":18,"type":19,"children":-1},"Separator","\u002Fdocs\u002Fcomponents\u002Fseparator","docs\u002Fcomponents\u002Fseparator",{"title":230,"path":231,"stem":232,"new":18,"type":19,"children":-1},"Sheet","\u002Fdocs\u002Fcomponents\u002Fsheet","docs\u002Fcomponents\u002Fsheet",{"title":234,"path":235,"stem":236,"new":18,"type":19,"children":-1},"Sidebar","\u002Fdocs\u002Fcomponents\u002Fsidebar","docs\u002Fcomponents\u002Fsidebar",{"title":238,"path":239,"stem":240,"new":18,"type":19,"children":-1},"Skeleton","\u002Fdocs\u002Fcomponents\u002Fskeleton","docs\u002Fcomponents\u002Fskeleton",{"title":242,"path":243,"stem":244,"new":18,"type":19,"children":-1},"Slider","\u002Fdocs\u002Fcomponents\u002Fslider","docs\u002Fcomponents\u002Fslider",{"title":246,"path":247,"stem":248,"new":18,"type":19,"children":-1},"Sonner","\u002Fdocs\u002Fcomponents\u002Fsonner","docs\u002Fcomponents\u002Fsonner",{"title":250,"path":251,"stem":252,"new":18,"type":19,"children":-1},"Spinner","\u002Fdocs\u002Fcomponents\u002Fspinner","docs\u002Fcomponents\u002Fspinner",{"title":254,"path":255,"stem":256,"new":18,"type":19,"children":-1},"Stepper","\u002Fdocs\u002Fcomponents\u002Fstepper","docs\u002Fcomponents\u002Fstepper",{"title":258,"path":259,"stem":260,"new":18,"type":19,"children":-1},"Switch","\u002Fdocs\u002Fcomponents\u002Fswitch","docs\u002Fcomponents\u002Fswitch",{"title":262,"path":263,"stem":264,"new":18,"type":19,"children":-1},"Table","\u002Fdocs\u002Fcomponents\u002Ftable","docs\u002Fcomponents\u002Ftable",{"title":266,"path":267,"stem":268,"new":18,"type":19,"children":-1},"Tabs","\u002Fdocs\u002Fcomponents\u002Ftabs","docs\u002Fcomponents\u002Ftabs",{"title":270,"path":271,"stem":272,"new":18,"type":19,"children":-1},"Tags Input","\u002Fdocs\u002Fcomponents\u002Ftags-input","docs\u002Fcomponents\u002Ftags-input",{"title":274,"path":275,"stem":276,"new":18,"type":19,"children":-1},"Textarea","\u002Fdocs\u002Fcomponents\u002Ftextarea","docs\u002Fcomponents\u002Ftextarea",{"title":278,"path":279,"stem":280,"new":18,"type":19,"children":-1},"Toast","\u002Fdocs\u002Fcomponents\u002Ftoast","docs\u002Fcomponents\u002Ftoast",{"title":282,"path":283,"stem":284,"new":18,"type":19,"children":-1},"Toggle","\u002Fdocs\u002Fcomponents\u002Ftoggle","docs\u002Fcomponents\u002Ftoggle",{"title":286,"path":287,"stem":288,"new":18,"type":19,"children":-1},"Toggle Group","\u002Fdocs\u002Fcomponents\u002Ftoggle-group","docs\u002Fcomponents\u002Ftoggle-group",{"title":290,"path":291,"stem":292,"new":18,"type":19,"children":-1},"Tooltip","\u002Fdocs\u002Fcomponents\u002Ftooltip","docs\u002Fcomponents\u002Ftooltip",{"title":294,"path":295,"stem":296,"new":18,"type":19,"children":-1},"Typography","\u002Fdocs\u002Fcomponents\u002Ftypography","docs\u002Fcomponents\u002Ftypography","group",{"title":299,"path":300,"stem":301,"children":302,"new":18,"type":297},"Installation","\u002Fdocs\u002Finstallation","docs\u002F02.installation",[303,308,312,316,320],{"title":304,"path":305,"stem":306,"new":18,"type":307,"children":-1},"Vite","\u002Fdocs\u002Finstallation\u002Fvite","docs\u002Finstallation\u002F01.vite","page",{"title":309,"path":310,"stem":311,"new":18,"type":307,"children":-1},"Nuxt","\u002Fdocs\u002Finstallation\u002Fnuxt","docs\u002Finstallation\u002F02.nuxt",{"title":313,"path":314,"stem":315,"new":18,"type":307,"children":-1},"Astro","\u002Fdocs\u002Finstallation\u002Fastro","docs\u002Finstallation\u002F03.astro",{"title":317,"path":318,"stem":319,"new":18,"type":307,"children":-1},"Laravel","\u002Fdocs\u002Finstallation\u002Flaravel","docs\u002Finstallation\u002F04.laravel",{"title":321,"path":322,"stem":323,"new":18,"type":307,"children":-1},"Manual Installation","\u002Fdocs\u002Finstallation\u002Fmanual","docs\u002Finstallation\u002F05.manual",{"title":325,"path":326,"stem":327,"children":328,"new":18,"type":297},"Dark Mode","\u002Fdocs\u002Fdark-mode","docs\u002F05.dark-mode",[329,332,335,339],{"title":304,"path":330,"stem":331,"new":18,"type":307,"children":-1},"\u002Fdocs\u002Fdark-mode\u002Fvite","docs\u002Fdark-mode\u002F01.vite",{"title":309,"path":333,"stem":334,"new":18,"type":307,"children":-1},"\u002Fdocs\u002Fdark-mode\u002Fnuxt","docs\u002Fdark-mode\u002F02.nuxt",{"title":336,"path":337,"stem":338,"new":18,"type":307,"children":-1},"Vitepress","\u002Fdocs\u002Fdark-mode\u002Fvitepress","docs\u002Fdark-mode\u002F03.vitepress",{"title":313,"path":340,"stem":341,"new":18,"type":307,"children":-1},"\u002Fdocs\u002Fdark-mode\u002Fastro","docs\u002Fdark-mode\u002F04.astro",{"title":343,"path":344,"stem":345,"children":346,"new":18,"type":297},"Directory","\u002Fdocs\u002Fdirectory","docs\u002Fdirectory\u002Findex",[347],{"title":343,"path":344,"stem":345,"new":18,"type":307,"children":-1},{"title":349,"path":350,"stem":351,"children":352,"new":18,"type":297},"Forms","\u002Fdocs\u002Fforms","docs\u002Fforms",[353,357,361],{"title":354,"path":355,"stem":356,"new":18,"type":307,"children":-1},"VeeValidate","\u002Fdocs\u002Fforms\u002Fvee-validate","docs\u002Fforms\u002F01.vee-validate",{"title":358,"path":359,"stem":360,"new":18,"type":307,"children":-1},"TanStack Form","\u002Fdocs\u002Fforms\u002Ftanstack-form","docs\u002Fforms\u002F02.tanstack-form",{"title":362,"path":363,"stem":364,"new":18,"type":307,"children":-1},"Formisch","\u002Fdocs\u002Fforms\u002Fformisch","docs\u002Fforms\u002F03.formisch",{"title":366,"path":367,"stem":368,"children":369,"new":18,"type":297},"Registry","\u002Fdocs\u002Fregistry","docs\u002Fregistry\u002Findex",[370,371,375,379,383,387],{"title":366,"path":367,"stem":368,"new":18,"type":307,"children":-1},{"title":372,"path":373,"stem":374,"new":18,"type":307,"children":-1},"Examples","\u002Fdocs\u002Fregistry\u002Fexamples","docs\u002Fregistry\u002Fexamples",{"title":376,"path":377,"stem":378,"new":18,"type":307,"children":-1},"FAQ","\u002Fdocs\u002Fregistry\u002Ffaq","docs\u002Fregistry\u002Ffaq",{"title":380,"path":381,"stem":382,"new":18,"type":307,"children":-1},"Getting Started","\u002Fdocs\u002Fregistry\u002Fgetting-started","docs\u002Fregistry\u002Fgetting-started",{"title":384,"path":385,"stem":386,"new":18,"type":307,"children":-1},"registry-item.json","\u002Fdocs\u002Fregistry\u002Fregistry-item-json","docs\u002Fregistry\u002Fregistry-item-json",{"title":388,"path":389,"stem":390,"new":18,"type":307,"children":-1},"registry.json","\u002Fdocs\u002Fregistry\u002Fregistry-json","docs\u002Fregistry\u002Fregistry-json",{"title":392,"path":393,"stem":394,"children":395,"new":18,"type":297},"Utilities","\u002Fdocs\u002Futilities","docs\u002Futilities\u002Findex",[396,397,401],{"title":392,"path":393,"stem":394,"new":18,"type":307,"children":-1},{"title":398,"path":399,"stem":400,"new":18,"type":307,"children":-1},"scroll-fade","\u002Fdocs\u002Futilities\u002Fscroll-fade","docs\u002Futilities\u002Fscroll-fade",{"title":402,"path":403,"stem":404,"new":18,"type":307,"children":-1},"shimmer","\u002Fdocs\u002Futilities\u002Fshimmer","docs\u002Futilities\u002Fshimmer",{"path":6,"stem":7,"title":406,"type":297,"children":407},"Get Started",[408,412,419,423,427,433,437,441,445,449,453,457,461,465],{"title":409,"path":410,"stem":411,"new":18,"type":307,"children":-1},"Introduction","\u002Fdocs\u002Fintroduction","docs\u002F01.introduction",{"title":299,"path":300,"stem":301,"children":413,"new":18,"type":297},[414,415,416,417,418],{"title":304,"path":305,"stem":306,"new":18,"type":307,"children":-1},{"title":309,"path":310,"stem":311,"new":18,"type":307,"children":-1},{"title":313,"path":314,"stem":315,"new":18,"type":307,"children":-1},{"title":317,"path":318,"stem":319,"new":18,"type":307,"children":-1},{"title":321,"path":322,"stem":323,"new":18,"type":307,"children":-1},{"title":420,"path":421,"stem":422,"new":18,"type":307,"children":-1},"components.json","\u002Fdocs\u002Fcomponents-json","docs\u002F03.components-json",{"title":424,"path":425,"stem":426,"new":18,"type":307,"children":-1},"Theming","\u002Fdocs\u002Ftheming","docs\u002F04.theming",{"title":325,"path":326,"stem":327,"children":428,"new":18,"type":297},[429,430,431,432],{"title":304,"path":330,"stem":331,"new":18,"type":307,"children":-1},{"title":309,"path":333,"stem":334,"new":18,"type":307,"children":-1},{"title":336,"path":337,"stem":338,"new":18,"type":307,"children":-1},{"title":313,"path":340,"stem":341,"new":18,"type":307,"children":-1},{"title":434,"path":435,"stem":436,"new":18,"type":307,"children":-1},"CLI","\u002Fdocs\u002Fcli","docs\u002F06.cli",{"title":438,"path":439,"stem":440,"new":18,"type":307,"children":-1},"JavaScript","\u002Fdocs\u002Fjavascript","docs\u002F07.javascript",{"title":442,"path":443,"stem":444,"new":18,"type":307,"children":-1},"RTL","\u002Fdocs\u002Frtl","docs\u002F08.rtl",{"title":446,"path":447,"stem":448,"new":18,"type":307,"children":-1},"Figma","\u002Fdocs\u002Ffigma","docs\u002F09.figma",{"title":450,"path":451,"stem":452,"new":18,"type":307,"children":-1},"Changelog","\u002Fdocs\u002Fchangelog","docs\u002F10.changelog",{"title":454,"path":455,"stem":456,"new":18,"type":307,"children":-1},"Legacy Docs","\u002Fdocs\u002Flegacy","docs\u002F11.legacy",{"title":458,"path":459,"stem":460,"new":18,"type":307,"children":-1},"Skills","\u002Fdocs\u002Fskills","docs\u002Fskills",{"title":462,"path":463,"stem":464,"new":18,"type":307,"children":-1},"Typeset","\u002Fdocs\u002Ftypeset","docs\u002Ftypeset",{"title":392,"path":393,"stem":394,"children":466,"new":18,"type":297},[467,468,469],{"title":392,"path":393,"stem":394,"new":18,"type":307,"children":-1},{"title":398,"path":399,"stem":400,"new":18,"type":307,"children":-1},{"title":402,"path":403,"stem":404,"new":18,"type":307,"children":-1},{"repo":471},{"id":472,"name":473,"repo":474,"description":475,"createdAt":476,"updatedAt":477,"pushedAt":478,"stars":479,"watchers":479,"forks":479,"defaultBranch":480},1360880822,"v-design","v-stella\u002Fv-design","An open-source Vue design system and component registry.","2026-09-08T03:28:46Z","2026-09-09T08:39:14Z","2026-09-09T08:36:47Z",0,"dev",{"id":482,"title":234,"body":483,"description":1387,"extension":1388,"links":1389,"meta":1390,"navigation":204,"new":18,"path":235,"rawbody":1391,"seo":1392,"stem":236,"__hash__":1393},"content\u002Fdocs\u002Fcomponents\u002Fsidebar.md",{"type":484,"value":485,"toc":1339},"minimark",[486,494,505,508,516,519,526,530,593,597,603,642,662,666,675,679,682,766,769,784,793,796,802,807,812,816,830,836,840,852,858,862,872,878,884,887,890,896,899,903,906,911,917,920,925,931,937,943,946,951,957,963,967,972,978,981,984,990,994,997,1003,1006,1009,1015,1018,1021,1027,1031,1039,1045,1049,1054,1060,1063,1068,1074,1078,1083,1087,1096,1102,1106,1111,1117,1121,1126,1132,1136,1141,1147,1150,1158,1164,1168,1173,1179,1183,1189,1195,1199,1204,1210,1214,1219,1225,1229,1234,1240,1243,1248,1254,1258,1264,1270,1274,1279,1285,1289,1296,1302,1305,1308,1314,1318,1321],[487,488],"component-preview",{"className":489,"description":491,"name":492,"title":234,"type":493},[490],"w-full","A composable, themeable and customizable sidebar component built using shadcn\u002Fvue","sidebar-07","block",[495,496,501],"vue-school-link",{"className":497,"lesson":499,"placement":500},[498],"mt-6","sidebars-in-shadcn-vue","top",[502,503,504],"p",{},"Watch a Vue School video about building sidebars with shadcn-vue.",[502,506,507],{},"Sidebars are one of the most complex components to build. They are central\nto any application and often contain a lot of moving parts.",[502,509,510,511,515],{},"I don't like building sidebars. So I built 30+ of them. All kinds of\nconfigurations. Then I extracted the core components into ",[512,513,514],"code",{},"Sidebar*.vue",".",[502,517,518],{},"We now have a solid foundation to build on top of. Composable. Themeable.\nCustomizable.",[502,520,521,515],{},[522,523,525],"a",{"href":524},"\u002Fblocks","Browse the Blocks Library",[527,528,299],"h2",{"id":529},"installation",[531,532,533,548,561],"code-tabs",{},[534,535,536,542],"tabs-list",{},[537,538,540],"tabs-trigger",{"value":539},"cli",[502,541,434],{},[537,543,545],{"value":544},"manual",[502,546,547],{},"Manual",[549,550,551],"tabs-content",{"value":539},[552,553,559],"pre",{"className":554,"code":556,"language":557,"meta":558},[555],"language-bash","npx shadcn-vue@latest add sidebar\n","bash","",[512,560,556],{"__ignoreMap":558},[549,562,563],{"value":544},[564,565,566,572,577,582,585],"steps",{},[567,568,569],"step",{},[502,570,571],{},"Install this component",[552,573,575],{"className":574,"code":556,"language":557,"meta":558},[555],[512,576,556],{"__ignoreMap":558},[567,578,579],{},[502,580,581],{},"Add the following colors to your CSS file",[502,583,584],{},"The command above should install the colors for you. If not, copy and paste the following in your CSS file.",[552,586,591],{"className":587,"code":589,"language":590,"meta":558},[588],"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",[512,592,589],{"__ignoreMap":558},[527,594,596],{"id":595},"structure","Structure",[502,598,599,600,602],{},"A ",[512,601,234],{}," component is composed of the following parts:",[604,605,606,613,618,624,630,636],"ul",{},[607,608,609,612],"li",{},[512,610,611],{},"SidebarProvider"," - Handles collapsible state.",[607,614,615,617],{},[512,616,234],{}," - The sidebar container.",[607,619,620,623],{},[512,621,622],{},"SidebarHeader"," and SidebarFooter - Sticky at the top and bottom of the sidebar",[607,625,626,629],{},[512,627,628],{},"SidebarContent"," - Scrollable content.",[607,631,632,635],{},[512,633,634],{},"SidebarGroup"," - Section within the SidebarContent.",[607,637,638,641],{},[512,639,640],{},"SidebarTrigger"," - Trigger for the Sidebar",[502,643,644,656],{},[645,646],"img",{"src":647,"width":648,"height":649,"alt":650,"className":651},"\u002Fimages\u002Fsidebar-structure.png",716,420,"Sidebar Structure",[652,653,654,655,498,490],"border","dark:hidden","rounded-lg","overflow-hidden",[645,657],{"src":658,"width":648,"height":649,"alt":650,"className":659},"\u002Fimages\u002Fsidebar-structure-dark.png",[652,660,661,654,655,498,490],"hidden","dark:block",[527,663,665],{"id":664},"usage","Usage",[552,667,673],{"className":668,"code":670,"language":671,"meta":672},[669],"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",[512,674,670],{"__ignoreMap":558},[527,676,678],{"id":677},"your-first-sidebar","Your First Sidebar",[502,680,681],{},"Let's start with the most basic sidebar A collapsible sidebar with a menu.",[564,683,684,695,701,709,715,724,732,738,743,746],{},[567,685,686],{},[502,687,688,689,691,692,694],{},"Add a ",[512,690,611],{}," and ",[512,693,640],{}," at the root of your application",[552,696,699],{"className":697,"code":698,"language":671,"meta":672},[669],"\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",[512,700,698],{"__ignoreMap":558},[567,702,703],{},[502,704,705,706],{},"Create a new sidebar component at ",[512,707,708],{},"@\u002Fcomponents\u002FAppSidebar.vue",[552,710,713],{"className":711,"code":712,"language":671,"meta":672},[669],"\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",[512,714,712],{"__ignoreMap":558},[567,716,717],{},[502,718,719,720,723],{},"Now, let's add a ",[512,721,722],{},"SidebarMenu"," to the sidebar",[502,725,726,727,729,730,515],{},"We'll use the ",[512,728,722],{}," component in a ",[512,731,634],{},[552,733,736],{"className":734,"code":735,"language":671,"meta":672},[669],"\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",[512,737,735],{"__ignoreMap":558},[567,739,740],{},[502,741,742],{},"You've created your first sidebar.",[502,744,745],{},"You should see something like this:",[747,748,753,758],"figure",{"className":749},[750,751,752],"flex","flex-col","gap-4",[487,754],{"className":755,"description":756,"name":757,"title":234,"type":493},[490],"Your first sidebar.","sidebar-demo",[759,760,765],"figcaption",{"className":761},[762,763,764],"text-center","text-sm","text-gray-500","\n  Your first sidebar\n",[527,767,10],{"id":768},"components",[502,770,771,772,774,775,778,779,778,781,783],{},"The components in the ",[512,773,514],{}," files are built to be composable i.e you build your sidebar by putting the provided components together. They also compose well with other shadcn-vue components such as ",[512,776,777],{},"DropdownMenu",", ",[512,780,81],{},[512,782,105],{},", etc.",[502,785,786],{},[787,788,789,790,792],"strong",{},"If you need to change the code in the ",[512,791,514],{}," files, you are encourage to do so. The code is yours. Use the provided components as a starting point to build your own",[527,794,611],{"id":795},"sidebarprovider",[502,797,798,799,801],{},"The ",[512,800,611],{}," component is used to provide the sidebar context to all its children.",[803,804,806],"h3",{"id":805},"props","Props",[502,808,798,809,811],{},[512,810,611],{}," component accepts the following props:",[803,813,815],{"id":814},"width","Width",[502,817,818,819,778,822,825,826,829],{},"Use the ",[512,820,821],{},"defaultOpen",[512,823,824],{},"open",", and ",[512,827,828],{},"onOpenChange"," props to control the open state of the sidebar.",[552,831,834],{"className":832,"code":833,"language":671,"meta":672},[669],"\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",[512,835,833],{"__ignoreMap":558},[803,837,839],{"id":838},"keyboard-shortcut","Keyboard Shortcut",[502,841,798,842,844,845,848,849,515],{},[512,843,611],{}," component supports keyboard shortcuts to toggle the sidebar. The default shortcut is ",[512,846,847],{},"cmd+b"," or ",[512,850,851],{},"ctrl+b",[552,853,856],{"className":854,"code":855,"language":671,"meta":672},[669],"\u003CSidebarProvider>\n  \u003C!-- ... -->\n\u003C\u002FSidebarProvider>\n",[512,857,855],{"__ignoreMap":558},[803,859,861],{"id":860},"persisted-state","Persisted State",[502,863,864,865,868,869,871],{},"To persist the sidebar state, you can use the ",[512,866,867],{},"storageKey"," prop on the ",[512,870,611],{}," component.",[552,873,876],{"className":874,"code":875,"language":671,"meta":672},[669],"\u003CSidebarProvider storage-key=\"sidebar\">\n  \u003C!-- ... -->\n\u003C\u002FSidebarProvider>\n",[512,877,875],{"__ignoreMap":558},[552,879,882],{"className":880,"code":881,"language":671,"meta":672},[669],"\u003CSidebarProvider\n  :default-open=\"false\"\n  storage-key=\"sidebar\"\n  class=\"flex min-h-screen\"\n>\n  \u003C!-- ... -->\n\u003C\u002FSidebarProvider>\n",[512,883,881],{"__ignoreMap":558},[527,885,234],{"id":886},"sidebar",[502,888,889],{},"The main sidebar component.",[552,891,894],{"className":892,"code":893,"language":671,"meta":672},[669],"\u003CSidebar>\n  \u003CSidebarHeader \u002F>\n  \u003CSidebarContent \u002F>\n  \u003CSidebarFooter \u002F>\n\u003C\u002FSidebar>\n",[512,895,893],{"__ignoreMap":558},[803,897,806],{"id":898},"props-1",[502,900,798,901,811],{},[512,902,234],{},[803,904,905],{"id":905},"side",[502,907,818,908,910],{},[512,909,905],{}," prop to set the side of the sidebar.",[552,912,915],{"className":913,"code":914,"language":671,"meta":672},[669],"\u003CSidebar side=\"left\">\n  \u003C!-- ... -->\n\u003C\u002FSidebar>\n",[512,916,914],{"__ignoreMap":558},[803,918,919],{"id":919},"variant",[502,921,818,922,924],{},[512,923,919],{}," prop to set the variant of the sidebar.",[552,926,929],{"className":927,"code":928,"language":671,"meta":672},[669],"\u003C!-- Default variant -->\n\u003CSidebar variant=\"sidebar\">\n  \u003C!-- ... -->\n\u003C\u002FSidebar>\n",[512,930,928],{"__ignoreMap":558},[552,932,935],{"className":933,"code":934,"language":671,"meta":672},[669],"\u003C!-- Floating variant -->\n\u003CSidebar variant=\"floating\">\n  \u003C!-- ... -->\n\u003C\u002FSidebar>\n",[512,936,934],{"__ignoreMap":558},[552,938,941],{"className":939,"code":940,"language":671,"meta":672},[669],"\u003C!-- Inset variant -->\n\u003CSidebar variant=\"inset\">\n  \u003C!-- ... -->\n\u003C\u002FSidebar>\n",[512,942,940],{"__ignoreMap":558},[803,944,945],{"id":945},"collapsible",[502,947,818,948,950],{},[512,949,945],{}," prop to make the sidebar collapsible.",[552,952,955],{"className":953,"code":954,"language":671,"meta":672},[669],"\u003CSidebar collapsible=\"icon\">\n  \u003C!-- ... -->\n\u003C\u002FSidebar>\n",[512,956,954],{"__ignoreMap":558},[552,958,961],{"className":959,"code":960,"language":671,"meta":672},[669],"\u003CSidebar collapsible=\"offcanvas\">\n  \u003C!-- ... -->\n\u003C\u002FSidebar>\n",[512,962,960],{"__ignoreMap":558},[527,964,966],{"id":965},"usesidebar","useSidebar",[502,968,798,969,971],{},[512,970,966],{}," hook is used to control the sidebar.",[552,973,976],{"className":974,"code":975,"language":671,"meta":672},[669],"\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",[512,977,975],{"__ignoreMap":558},[527,979,622],{"id":980},"sidebarheader",[502,982,983],{},"Used to render the sidebar header.",[552,985,988],{"className":986,"code":987,"language":671,"meta":672},[669],"\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",[512,989,987],{"__ignoreMap":558},[527,991,993],{"id":992},"sidebarfooter","SidebarFooter",[502,995,996],{},"Used to render the sidebar footer.",[552,998,1001],{"className":999,"code":1000,"language":671,"meta":672},[669],"\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",[512,1002,1000],{"__ignoreMap":558},[527,1004,628],{"id":1005},"sidebarcontent",[502,1007,1008],{},"The scrollable content area of the sidebar.",[552,1010,1013],{"className":1011,"code":1012,"language":671,"meta":672},[669],"\u003CSidebar>\n  \u003CSidebarContent>\n    \u003CSidebarGroup \u002F>\n    \u003CSidebarGroup \u002F>\n  \u003C\u002FSidebarContent>\n\u003C\u002FSidebar>\n",[512,1014,1012],{"__ignoreMap":558},[527,1016,634],{"id":1017},"sidebargroup",[502,1019,1020],{},"Used to group sidebar menu items.",[552,1022,1025],{"className":1023,"code":1024,"language":671,"meta":672},[669],"\u003CSidebarContent>\n  \u003CSidebarGroup>\n    \u003CSidebarGroupLabel>Application\u003C\u002FSidebarGroupLabel>\n    \u003CSidebarGroupContent>\n      \u003C!-- SidebarMenu -->\n    \u003C\u002FSidebarGroupContent>\n  \u003C\u002FSidebarGroup>\n\u003C\u002FSidebarContent>\n",[512,1026,1024],{"__ignoreMap":558},[527,1028,1030],{"id":1029},"collapsible-sidebargroup","Collapsible SidebarGroup",[502,1032,1033,1034,1036,1037,871],{},"To make a ",[512,1035,634],{}," collapsible, wrap it in a ",[512,1038,81],{},[552,1040,1043],{"className":1041,"code":1042,"language":671,"meta":672},[669],"\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",[512,1044,1042],{"__ignoreMap":558},[527,1046,1048],{"id":1047},"sidebargroupaction","SidebarGroupAction",[502,1050,798,1051,1053],{},[512,1052,1048],{}," component is used to render an action button in the sidebar group header.",[552,1055,1058],{"className":1056,"code":1057,"language":671,"meta":672},[669],"\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",[512,1059,1057],{"__ignoreMap":558},[527,1061,722],{"id":1062},"sidebarmenu",[502,1064,798,1065,1067],{},[512,1066,722],{}," component is used to render a menu in the sidebar.",[552,1069,1072],{"className":1070,"code":1071,"language":671,"meta":672},[669],"\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",[512,1073,1071],{"__ignoreMap":558},[527,1075,1077],{"id":1076},"sidebarmenubutton","SidebarMenuButton",[502,1079,798,1080,1082],{},[512,1081,1077],{}," component is used to render a menu button in the sidebar.",[803,1084,1086],{"id":1085},"link-or-anchor","Link or Anchor",[502,1088,818,1089,1092,1093,1095],{},[512,1090,1091],{},"as-child"," prop to render the ",[512,1094,1077],{}," as a link or anchor.",[552,1097,1100],{"className":1098,"code":1099,"language":671,"meta":672},[669],"\u003CSidebarMenuButton as-child>\n  \u003Ca href=\"#\">\n    \u003CHome \u002F>\n    \u003Cspan>Home\u003C\u002Fspan>\n  \u003C\u002Fa>\n\u003C\u002FSidebarMenuButton>\n",[512,1101,1099],{"__ignoreMap":558},[803,1103,1105],{"id":1104},"icon-and-label","Icon and Label",[502,1107,1108,1109,871],{},"You can render an icon and label in the ",[512,1110,1077],{},[552,1112,1115],{"className":1113,"code":1114,"language":671,"meta":672},[669],"\u003CSidebarMenuButton>\n  \u003CHome \u002F>\n  \u003Cspan>Home\u003C\u002Fspan>\n\u003C\u002FSidebarMenuButton>\n",[512,1116,1114],{"__ignoreMap":558},[803,1118,1120],{"id":1119},"isactive","isActive",[502,1122,818,1123,1125],{},[512,1124,1120],{}," prop to mark a menu button as active.",[552,1127,1130],{"className":1128,"code":1129,"language":671,"meta":672},[669],"\u003CSidebarMenuButton :is-active=\"true\">\n  \u003CHome \u002F>\n  \u003Cspan>Home\u003C\u002Fspan>\n\u003C\u002FSidebarMenuButton>\n",[512,1131,1129],{"__ignoreMap":558},[527,1133,1135],{"id":1134},"sidebarmenuaction","SidebarMenuAction",[502,1137,798,1138,1140],{},[512,1139,1135],{}," component is used to render a menu action in the sidebar.",[552,1142,1145],{"className":1143,"code":1144,"language":671,"meta":672},[669],"\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",[512,1146,1144],{"__ignoreMap":558},[803,1148,777],{"id":1149},"dropdownmenu",[502,1151,1152,1153,1155,1156,871],{},"You can use the ",[512,1154,1135],{}," component with a ",[512,1157,777],{},[552,1159,1162],{"className":1160,"code":1161,"language":671,"meta":672},[669],"\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",[512,1163,1161],{"__ignoreMap":558},[527,1165,1167],{"id":1166},"sidebarmenusub","SidebarMenuSub",[502,1169,798,1170,1172],{},[512,1171,1167],{}," component is used to render a submenu in the sidebar.",[552,1174,1177],{"className":1175,"code":1176,"language":671,"meta":672},[669],"\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",[512,1178,1176],{"__ignoreMap":558},[527,1180,1182],{"id":1181},"collapsible-sidebarmenu","Collapsible SidebarMenu",[502,1184,1033,1185,1036,1187,871],{},[512,1186,722],{},[512,1188,81],{},[552,1190,1193],{"className":1191,"code":1192,"language":671,"meta":672},[669],"\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",[512,1194,1192],{"__ignoreMap":558},[527,1196,1198],{"id":1197},"sidebarmenubadge","SidebarMenuBadge",[502,1200,798,1201,1203],{},[512,1202,1198],{}," component is used to render a badge in the sidebar menu.",[552,1205,1208],{"className":1206,"code":1207,"language":671,"meta":672},[669],"\u003CSidebarMenuButton>\n  \u003CHome \u002F>\n  \u003Cspan>Home\u003C\u002Fspan>\n  \u003CSidebarMenuBadge>24\u003C\u002FSidebarMenuBadge>\n\u003C\u002FSidebarMenuButton>\n",[512,1209,1207],{"__ignoreMap":558},[527,1211,1213],{"id":1212},"sidebarmenuskeleton","SidebarMenuSkeleton",[502,1215,1152,1216,1218],{},[512,1217,1213],{}," component to render a skeleton loader in the sidebar menu.",[552,1220,1223],{"className":1221,"code":1222,"language":671,"meta":672},[669],"\u003CSidebarMenu>\n  \u003CSidebarMenuItem v-for=\"item in Array.from({ length: 5 })\" :key=\"item\">\n    \u003CSidebarMenuSkeleton \u002F>\n  \u003C\u002FSidebarMenuItem>\n\u003C\u002FSidebarMenu>\n",[512,1224,1222],{"__ignoreMap":558},[527,1226,1228],{"id":1227},"sidebarseparator","SidebarSeparator",[502,1230,798,1231,1233],{},[512,1232,1228],{}," component is used to render a separator in the sidebar.",[552,1235,1238],{"className":1236,"code":1237,"language":671,"meta":672},[669],"\u003CSidebarContent>\n  \u003CSidebarGroup \u002F>\n  \u003CSidebarSeparator \u002F>\n  \u003CSidebarGroup \u002F>\n\u003C\u002FSidebarContent>\n",[512,1239,1237],{"__ignoreMap":558},[527,1241,640],{"id":1242},"sidebartrigger",[502,1244,798,1245,1247],{},[512,1246,640],{}," component is used to render a trigger button for the sidebar.",[552,1249,1252],{"className":1250,"code":1251,"language":671,"meta":672},[669],"\u003CSidebarTrigger \u002F>\n",[512,1253,1251],{"__ignoreMap":558},[527,1255,1257],{"id":1256},"custom-trigger","Custom Trigger",[502,1259,1260,1261,1263],{},"You can create a custom trigger using the ",[512,1262,966],{}," hook.",[552,1265,1268],{"className":1266,"code":1267,"language":671,"meta":672},[669],"\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",[512,1269,1267],{"__ignoreMap":558},[527,1271,1273],{"id":1272},"sidebarrail","SidebarRail",[502,1275,798,1276,1278],{},[512,1277,1273],{}," 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.",[552,1280,1283],{"className":1281,"code":1282,"language":671,"meta":672},[669],"\u003CSidebar collapsible=\"icon\">\n  \u003CSidebarHeader \u002F>\n  \u003CSidebarContent \u002F>\n  \u003CSidebarFooter \u002F>\n  \u003CSidebarRail \u002F>\n\u003C\u002FSidebar>\n",[512,1284,1282],{"__ignoreMap":558},[527,1286,1288],{"id":1287},"controlled-sidebar","Controlled Sidebar",[502,1290,818,1291,691,1293,1295],{},[512,1292,824],{},[512,1294,828],{}," props to control the sidebar.",[552,1297,1300],{"className":1298,"code":1299,"language":671,"meta":672},[669],"\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",[512,1301,1299],{"__ignoreMap":558},[527,1303,424],{"id":1304},"theming",[502,1306,1307],{},"You can theme the sidebar using CSS variables.",[552,1309,1312],{"className":1310,"code":1311,"language":590,"meta":558},[588],"@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",[512,1313,1311],{"__ignoreMap":558},[527,1315,1317],{"id":1316},"styling","Styling",[502,1319,1320],{},"Here are some tips for styling the sidebar:",[604,1322,1323,1332],{},[607,1324,818,1325,691,1328,1331],{},[512,1326,1327],{},"data-sidebar",[512,1329,1330],{},"data-state"," attributes to style the sidebar.",[607,1333,1334,1335,1338],{},"The sidebar automatically sets the ",[512,1336,1337],{},"--sidebar-width"," CSS variable. You can use this to adjust the layout of your main content.",{"title":558,"searchDepth":1340,"depth":1340,"links":1341},2,[1342,1343,1344,1345,1346,1347,1354,1360,1361,1362,1363,1364,1365,1366,1367,1368,1373,1376,1377,1378,1379,1380,1381,1382,1383,1384,1385,1386],{"id":529,"depth":1340,"text":299},{"id":595,"depth":1340,"text":596},{"id":664,"depth":1340,"text":665},{"id":677,"depth":1340,"text":678},{"id":768,"depth":1340,"text":10},{"id":795,"depth":1340,"text":611,"children":1348},[1349,1351,1352,1353],{"id":805,"depth":1350,"text":806},3,{"id":814,"depth":1350,"text":815},{"id":838,"depth":1350,"text":839},{"id":860,"depth":1350,"text":861},{"id":886,"depth":1340,"text":234,"children":1355},[1356,1357,1358,1359],{"id":898,"depth":1350,"text":806},{"id":905,"depth":1350,"text":905},{"id":919,"depth":1350,"text":919},{"id":945,"depth":1350,"text":945},{"id":965,"depth":1340,"text":966},{"id":980,"depth":1340,"text":622},{"id":992,"depth":1340,"text":993},{"id":1005,"depth":1340,"text":628},{"id":1017,"depth":1340,"text":634},{"id":1029,"depth":1340,"text":1030},{"id":1047,"depth":1340,"text":1048},{"id":1062,"depth":1340,"text":722},{"id":1076,"depth":1340,"text":1077,"children":1369},[1370,1371,1372],{"id":1085,"depth":1350,"text":1086},{"id":1104,"depth":1350,"text":1105},{"id":1119,"depth":1350,"text":1120},{"id":1134,"depth":1340,"text":1135,"children":1374},[1375],{"id":1149,"depth":1350,"text":777},{"id":1166,"depth":1340,"text":1167},{"id":1181,"depth":1340,"text":1182},{"id":1197,"depth":1340,"text":1198},{"id":1212,"depth":1340,"text":1213},{"id":1227,"depth":1340,"text":1228},{"id":1242,"depth":1340,"text":640},{"id":1256,"depth":1340,"text":1257},{"id":1272,"depth":1340,"text":1273},{"id":1287,"depth":1340,"text":1288},{"id":1304,"depth":1340,"text":424},{"id":1316,"depth":1340,"text":1317},"A composable, themeable and customizable sidebar component.","md",null,{"component":204},"---\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 shadcn\u002Fvue\nclass: 'w-full'\ntype: block\n---\n::\n\n::vue-school-link{class=\"mt-6\" lesson=\"sidebars-in-shadcn-vue\" placement=\"top\"}\nWatch a Vue School video about building sidebars with shadcn-vue.\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 shadcn-vue@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 shadcn-vue@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 shadcn-vue 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":234,"description":1387},"IavOQwAEJYMKf8x93hMjCiZs7iOD043CGYutCocJNlY",[1395,1396],{"title":230,"path":231,"stem":232,"children":-1},{"title":238,"path":239,"stem":240,"children":-1},1788943239986]