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