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