diff --git a/docs/public/registry/frameworks/tailwindcss/sidebar.json b/docs/public/registry/frameworks/tailwindcss/sidebar.json
new file mode 100644
index 0000000..0ca2ef7
--- /dev/null
+++ b/docs/public/registry/frameworks/tailwindcss/sidebar.json
@@ -0,0 +1,13 @@
+{
+  "name": "sidebar",
+  "dependencies": [
+    "@kobalte/core"
+  ],
+  "files": [
+    {
+      "name": "sidebar.tsx",
+      "content": "import { Button } from \"@repo/tailwindcss/ui/button\";\nimport { Separator } from \"@repo/tailwindcss/ui/separator\";\nimport { Sheet, SheetContent } from \"@repo/tailwindcss/ui/sheet\";\nimport { TextField } from \"@repo/tailwindcss/ui/textfield\";\n\nimport { cn } from \"@/libs/cn\";\nimport { Skeleton } from \"@repo/tailwindcss/ui/skeleton\";\nimport {\n\tTooltip,\n\tTooltipContent,\n\tTooltipTrigger,\n} from \"@repo/tailwindcss/ui/tooltip\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\nimport {\n\ttype Accessor,\n\ttype ComponentProps,\n\ttype JSX,\n\tShow,\n\tcreateContext,\n\tcreateMemo,\n\tcreateSignal,\n\tmergeProps,\n\tonCleanup,\n\tonMount,\n\tsplitProps,\n\tuseContext,\n} from \"solid-js\";\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar:state\";\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;\nconst SIDEBAR_WIDTH = \"16rem\";\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\";\nconst SIDEBAR_WIDTH_ICON = \"3rem\";\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\";\nconst MOBILE_BREAKPOINT = 768;\n\ntype SidebarContext = {\n\tstate: \"expanded\" | \"collapsed\";\n\topen: boolean;\n\tsetOpen: (open: boolean) => void;\n\topenMobile: boolean;\n\tsetOpenMobile: (open: boolean) => void;\n\tisMobile: boolean;\n\ttoggleSidebar: () => void;\n};\n\nconst SidebarContext = createContext<Accessor<SidebarContext> | null>(null);\n\nfunction useSidebar() {\n\tconst context = useContext(SidebarContext);\n\n\tif (!context) {\n\t\tthrow new Error(\"useSidebar must be used within a SidebarProvider\");\n\t}\n\n\treturn context;\n}\n\nexport function useIsMobile() {\n\tconst [isMobile, setIsMobile] = createSignal<boolean>(false);\n\n\tonMount(() => {\n\t\tconst mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);\n\t\tconst onChange = () => {\n\t\t\tsetIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n\t\t};\n\n\t\tmql.addEventListener(\"change\", onChange);\n\t\tsetIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n\n\t\tonCleanup(() => mql.removeEventListener(\"change\", onChange));\n\t});\n\n\treturn isMobile;\n}\n\ntype SidebarProviderProps = {\n\tdefaultOpen?: boolean;\n\topen?: boolean;\n\tonOpenChange?: (open: boolean) => void;\n\tchildren: JSX.Element;\n} & ComponentProps<\"div\">;\n\nconst SidebarProvider = (props: SidebarProviderProps) => {\n\tconst isMobile = useIsMobile();\n\tconst [openMobile, setOpenMobile] = createSignal(false);\n\n\tconst [local, rest] = splitProps(props, [\n\t\t\"open\",\n\t\t\"class\",\n\t\t\"style\",\n\t\t\"defaultOpen\",\n\t\t\"onOpenChange\",\n\t\t\"children\",\n\t]);\n\n\t// This is the internal state of the sidebar.\n\t// We use local.open and local.onOpenChange for control from outside the component.\n\tconst [_open, _setOpen] = createSignal(local.defaultOpen ?? true);\n\tconst open = () => local.open ?? _open();\n\n\tconst setOpen = (value: boolean | ((value: boolean) => boolean)) => {\n\t\tconst openState = typeof value === \"function\" ? value(open()) : open();\n\t\t_setOpen(openState);\n\t\tlocal.onOpenChange?.(open());\n\n\t\tdocument.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;\n\t};\n\n\tconst toggleSidebar = () => {\n\t\tisMobile() ? setOpenMobile(!openMobile()) : setOpen(!open());\n\t};\n\n\t// Adds a keyboard shortcut to toggle the sidebar\n\tonMount(() => {\n\t\tconst handleKeyDown = (event: KeyboardEvent) => {\n\t\t\tif (\n\t\t\t\tevent.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n\t\t\t\t(event.metaKey || event.ctrlKey)\n\t\t\t) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\ttoggleSidebar();\n\t\t\t}\n\t\t};\n\n\t\twindow.addEventListener(\"keydown\", handleKeyDown);\n\t\tonCleanup(() => window.removeEventListener(\"keydown\", handleKeyDown));\n\t});\n\n\t// We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n\t// This makes it easier to style the sidebar with Tailwind classes.\n\tconst state = open() ? \"expanded\" : \"collapsed\";\n\n\tconst contextValue = createMemo<SidebarContext>(() => ({\n\t\tstate,\n\t\topen: open(),\n\t\tsetOpen,\n\t\tisMobile: isMobile(),\n\t\topenMobile: openMobile(),\n\t\tsetOpenMobile,\n\t\ttoggleSidebar,\n\t}));\n\n\treturn (\n\t\t<SidebarContext.Provider value={contextValue}>\n\t\t\t<div\n\t\t\t\tclass={cn(\n\t\t\t\t\t\"group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar\",\n\t\t\t\t\tlocal.class,\n\t\t\t\t)}\n\t\t\t\tstyle={{\n\t\t\t\t\t\"--sidebar-width\": SIDEBAR_WIDTH,\n\t\t\t\t\t\"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n\t\t\t\t\t...(local.style as JSX.CSSProperties),\n\t\t\t\t}}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t{local.children}\n\t\t\t</div>\n\t\t</SidebarContext.Provider>\n\t);\n};\n\ntype SidebarProps = {\n\tside?: \"left\" | \"right\";\n\tvariant?: \"sidebar\" | \"floating\" | \"inset\";\n\tcollapsible?: \"offcanvas\" | \"icon\" | \"none\";\n\tchildren: JSX.Element;\n} & ComponentProps<\"div\">;\n\nconst Sidebar = (props: SidebarProps) => {\n\tconst mergedProps = mergeProps(\n\t\t{\n\t\t\tside: \"left\" as const,\n\t\t\tvariant: \"sidebar\" as const,\n\t\t\tcollapsible: \"offcanvas\" as const,\n\t\t},\n\t\tprops,\n\t);\n\n\tconst [local, rest] = splitProps<\n\t\tSidebarProps,\n\t\t[[\"class\", \"children\", \"side\", \"variant\", \"collapsible\"]]\n\t>(mergedProps, [\"class\", \"children\", \"side\", \"variant\", \"collapsible\"]);\n\n\tconst context = useSidebar();\n\n\tif (local.collapsible === \"none\") {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclass={cn(\n\t\t\t\t\t\"bg-sidebar text-sidebar-foreground flex h-full w-[--sidebar-width] flex-col\",\n\t\t\t\t\tlocal.class,\n\t\t\t\t)}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t{local.children}\n\t\t\t</div>\n\t\t);\n\t}\n\n\tif (context().isMobile) {\n\t\treturn (\n\t\t\t<Sheet\n\t\t\t\topen={context().openMobile}\n\t\t\t\tonOpenChange={context().setOpenMobile}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<SheetContent\n\t\t\t\t\tdata-sidebar=\"sidebar\"\n\t\t\t\t\tdata-mobile=\"true\"\n\t\t\t\t\tclass=\"bg-sidebar text-sidebar-foreground w-[--sidebar-width] p-0 [&>button]:hidden\"\n\t\t\t\t\tstyle={\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n\t\t\t\t\t\t} as JSX.CSSProperties\n\t\t\t\t\t}\n\t\t\t\t\tside={local.side}\n\t\t\t\t>\n\t\t\t\t\t<div class=\"flex h-full w-full flex-col\">{local.children}</div>\n\t\t\t\t</SheetContent>\n\t\t\t</Sheet>\n\t\t);\n\t}\n\n\treturn (\n\t\t<div\n\t\t\tclass=\"text-sidebar-foreground group peer hidden md:block\"\n\t\t\tdata-state={context().state}\n\t\t\tdata-collapsible={\n\t\t\t\tcontext().state === \"collapsed\" ? local.collapsible : \"\"\n\t\t\t}\n\t\t\tdata-variant={local.variant}\n\t\t\tdata-side={local.side}\n\t\t>\n\t\t\t{/* This is what handles the sidebar gap on desktop */}\n\t\t\t<div\n\t\t\t\tclass={cn(\n\t\t\t\t\t\"relative h-svh w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear\",\n\t\t\t\t\t\"group-data-[collapsible=offcanvas]:w-0\",\n\t\t\t\t\t\"group-data-[side=right]:rotate-180\",\n\t\t\t\t\tlocal.variant === \"floating\" || local.variant === \"inset\"\n\t\t\t\t\t\t? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]\"\n\t\t\t\t\t\t: \"group-data-[collapsible=icon]:w-[--sidebar-width-icon]\",\n\t\t\t\t)}\n\t\t\t/>\n\t\t\t<div\n\t\t\t\tclass={cn(\n\t\t\t\t\t\"fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex\",\n\t\t\t\t\tlocal.side === \"left\"\n\t\t\t\t\t\t? \"left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]\"\n\t\t\t\t\t\t: \"right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]\",\n\t\t\t\t\t// Adjust the padding for floating and inset variants.\n\t\t\t\t\tlocal.variant === \"floating\" || local.variant === \"inset\"\n\t\t\t\t\t\t? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]\"\n\t\t\t\t\t\t: \"group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n\t\t\t\t\tlocal.class,\n\t\t\t\t)}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tdata-sidebar=\"sidebar\"\n\t\t\t\t\tclass=\"bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow\"\n\t\t\t\t>\n\t\t\t\t\t{local.children}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n\ntype SidebarTriggerProps = ComponentProps<\"button\">;\n\nconst SidebarTrigger = (props: SidebarTriggerProps) => {\n\tconst context = useSidebar();\n\n\tconst [local, rest] = splitProps<SidebarTriggerProps, [[\"class\", \"onClick\"]]>(\n\t\tprops,\n\t\t[\"class\", \"onClick\"],\n\t);\n\n\treturn (\n\t\t<Button\n\t\t\tdata-sidebar=\"trigger\"\n\t\t\tvariant=\"ghost\"\n\t\t\tsize=\"icon\"\n\t\t\tclass={cn(\"h-7 w-7\", local.class)}\n\t\t\tonClick={[local.onClick, () => context().toggleSidebar()]}\n\t\t\t{...rest}\n\t\t>\n\t\t\t<svg\n\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\twidth=\"24\"\n\t\t\t\theight=\"24\"\n\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\tfill=\"none\"\n\t\t\t\tstroke=\"currentColor\"\n\t\t\t\tstroke-width=\"2\"\n\t\t\t\tstroke-linecap=\"round\"\n\t\t\t\tstroke-linejoin=\"round\"\n\t\t\t\tclass=\"lucide lucide-panel-left\"\n\t\t\t>\n\t\t\t\t<title>Menu Icon</title>\n\t\t\t\t<rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" />\n\t\t\t\t<path d=\"M9 3v18\" />\n\t\t\t</svg>\n\t\t\t<span class=\"sr-only\">Toggle Sidebar</span>\n\t\t</Button>\n\t);\n};\n\nconst SidebarRail = (props: ComponentProps<\"button\">) => {\n\tconst context = useSidebar();\n\n\tconst [local, rest] = splitProps<SidebarTriggerProps, [[\"class\"]]>(props, [\n\t\t\"class\",\n\t]);\n\n\treturn (\n\t\t<button\n\t\t\tdata-sidebar=\"rail\"\n\t\t\taria-label=\"Toggle Sidebar\"\n\t\t\ttabIndex={-1}\n\t\t\tonClick={context().toggleSidebar}\n\t\t\ttitle=\"Toggle Sidebar\"\n\t\t\tclass={cn(\n\t\t\t\t\"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex\",\n\t\t\t\t\"[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize\",\n\t\t\t\t\"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n\t\t\t\t\"group-data-[collapsible=offcanvas]:hover:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full\",\n\t\t\t\t\"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n\t\t\t\t\"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n\t\t\t\tlocal.class,\n\t\t\t)}\n\t\t\t{...rest}\n\t\t/>\n\t);\n};\n\ntype SidebarInsetProps = ComponentProps<\"main\">;\n\nconst SidebarInset = (props: SidebarInsetProps) => {\n\tconst [local, rest] = splitProps<SidebarInsetProps, [[\"class\"]]>(props, [\n\t\t\"class\",\n\t]);\n\n\treturn (\n\t\t<main\n\t\t\tclass={cn(\n\t\t\t\t\"bg-background relative flex min-h-svh flex-1 flex-col\",\n\t\t\t\t\"peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow\",\n\t\t\t\tlocal.class,\n\t\t\t)}\n\t\t\t{...rest}\n\t\t/>\n\t);\n};\n\ntype SidebarInputProps = ComponentProps<typeof TextField>;\nconst SidebarInput = (props: SidebarInputProps) => {\n\tconst [local, rest] = splitProps<SidebarInputProps, [[\"class\"]]>(props, [\n\t\t\"class\",\n\t]);\n\n\treturn (\n\t\t<TextField\n\t\t\tdata-sidebar=\"input\"\n\t\t\tclass={cn(\n\t\t\t\t\"bg-background focus-visible:ring-sidebar-ring h-8 w-full shadow-none focus-visible:ring-2\",\n\t\t\t\tlocal.class,\n\t\t\t)}\n\t\t\t{...rest}\n\t\t/>\n\t);\n};\n\ntype SidebarHeaderProps = ComponentProps<\"div\">;\n\nconst SidebarHeader = (props: SidebarHeaderProps) => {\n\tconst [local, rest] = splitProps<SidebarHeaderProps, [[\"class\"]]>(props, [\n\t\t\"class\",\n\t]);\n\n\treturn (\n\t\t<div\n\t\t\tdata-sidebar=\"header\"\n\t\t\tclass={cn(\"flex flex-col gap-2 p-2\", local.class)}\n\t\t\t{...rest}\n\t\t/>\n\t);\n};\n\ntype SidebarFooterProps = ComponentProps<\"div\">;\n\nconst SidebarFooter = (props: SidebarFooterProps) => {\n\tconst [local, rest] = splitProps<SidebarFooterProps, [[\"class\"]]>(props, [\n\t\t\"class\",\n\t]);\n\n\treturn (\n\t\t<div\n\t\t\tdata-sidebar=\"footer\"\n\t\t\tclass={cn(\"flex flex-col gap-2 p-2\", local.class)}\n\t\t\t{...rest}\n\t\t/>\n\t);\n};\n\ntype SidebarSeparatorProps = ComponentProps<typeof Separator>;\n\nconst SidebarSeparator = (props: SidebarSeparatorProps) => {\n\tconst [local, rest] = splitProps<SidebarSeparatorProps, [[\"class\"]]>(props, [\n\t\t\"class\",\n\t]);\n\n\treturn (\n\t\t<Separator\n\t\t\tdata-sidebar=\"separator\"\n\t\t\tclassName={cn(\"bg-sidebar-border mx-2 w-auto\", local.class)}\n\t\t\t{...rest}\n\t\t/>\n\t);\n};\n\ntype SidebarContentProps = ComponentProps<\"div\">;\n\nconst SidebarContent = (props: SidebarContentProps) => {\n\tconst [local, rest] = splitProps<SidebarContentProps, [[\"class\"]]>(props, [\n\t\t\"class\",\n\t]);\n\treturn (\n\t\t<div\n\t\t\tdata-sidebar=\"content\"\n\t\t\tclass={cn(\n\t\t\t\t\"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n\t\t\t\tlocal.class,\n\t\t\t)}\n\t\t\t{...rest}\n\t\t/>\n\t);\n};\n\ntype SidebarGroupProps = ComponentProps<\"div\">;\n\nconst SidebarGroup = (props: SidebarGroupProps) => {\n\tconst [local, rest] = splitProps<SidebarGroupProps, [[\"class\"]]>(props, [\n\t\t\"class\",\n\t]);\n\treturn (\n\t\t<div\n\t\t\tdata-sidebar=\"group\"\n\t\t\tclass={cn(\"relative flex w-full min-w-0 flex-col p-2\", local.class)}\n\t\t\t{...rest}\n\t\t/>\n\t);\n};\n\ntype SidebarGroupLabelProps = ComponentProps<\"div\">;\n\nconst SidebarGroupLabel = (props: SidebarGroupLabelProps) => {\n\tconst [local, rest] = splitProps<SidebarGroupLabelProps, [[\"class\"]]>(props, [\n\t\t\"class\",\n\t]);\n\treturn (\n\t\t<div\n\t\t\tdata-sidebar=\"group-label\"\n\t\t\tclass={cn(\n\t\t\t\t\"text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-none transition-[margin,opa] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0\",\n\t\t\t\t\"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0\",\n\t\t\t\tlocal.class,\n\t\t\t)}\n\t\t\t{...rest}\n\t\t/>\n\t);\n};\n\ntype SidebarGroupActionProps = ComponentProps<\"button\">;\n\nconst SidebarGroupAction = (props: SidebarGroupActionProps) => {\n\tconst [local, rest] = splitProps<SidebarGroupActionProps, [[\"class\"]]>(\n\t\tprops,\n\t\t[\"class\"],\n\t);\n\treturn (\n\t\t<button\n\t\t\tdata-sidebar=\"group-action\"\n\t\t\tclass={cn(\n\t\t\t\t\"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-none transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0\",\n\t\t\t\t// Increases the hit area of the button on mobile.\n\t\t\t\t\"after:absolute after:-inset-2 after:md:hidden\",\n\t\t\t\t\"group-data-[collapsible=icon]:hidden\",\n\t\t\t\tlocal.class,\n\t\t\t)}\n\t\t\t{...rest}\n\t\t/>\n\t);\n};\n\ntype SidebarGroupContentProps = ComponentProps<\"div\">;\n\nconst SidebarGroupContent = (props: SidebarGroupContentProps) => {\n\tconst [local, rest] = splitProps<SidebarGroupContentProps, [[\"class\"]]>(\n\t\tprops,\n\t\t[\"class\"],\n\t);\n\treturn (\n\t\t<div\n\t\t\tdata-sidebar=\"group-content\"\n\t\t\tclass={cn(\"w-full text-sm\", local.class)}\n\t\t\t{...rest}\n\t\t/>\n\t);\n};\n\ntype SidebarMenuProps = ComponentProps<\"ul\">;\n\nconst SidebarMenu = (props: SidebarMenuProps) => {\n\tconst [local, rest] = splitProps<SidebarMenuProps, [[\"class\"]]>(props, [\n\t\t\"class\",\n\t]);\n\treturn (\n\t\t<ul\n\t\t\tdata-sidebar=\"menu\"\n\t\t\tclass={cn(\"flex w-full min-w-0 flex-col gap-1\", local.class)}\n\t\t\t{...rest}\n\t\t/>\n\t);\n};\n\ntype SidebarMenuItemProps = ComponentProps<\"li\">;\n\nconst SidebarMenuItem = (props: SidebarMenuItemProps) => {\n\tconst [local, rest] = splitProps<SidebarMenuItemProps, [[\"class\"]]>(props, [\n\t\t\"class\",\n\t]);\n\treturn (\n\t\t<li\n\t\t\tdata-sidebar=\"menu-item\"\n\t\t\tclass={cn(\"group/menu-item relative\", local.class)}\n\t\t\t{...rest}\n\t\t/>\n\t);\n};\n\nconst sidebarMenuButtonVariants = cva(\n\t\"peer/menu-button ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none transition-[width,height,padding] focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:font-medium group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0\",\n\t{\n\t\tvariants: {\n\t\t\tvariant: {\n\t\t\t\tdefault: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n\t\t\t\toutline:\n\t\t\t\t\t\"bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]\",\n\t\t\t},\n\t\t\tsize: {\n\t\t\t\tdefault: \"h-8 text-sm\",\n\t\t\t\tsm: \"h-7 text-xs\",\n\t\t\t\tlg: \"h-12 text-sm group-data-[collapsible=icon]:!p-0\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tvariant: \"default\",\n\t\t\tsize: \"default\",\n\t\t},\n\t},\n);\n\ntype SidebarMenuButtonProps = ComponentProps<\"button\"> & {\n\tisActive?: boolean;\n\ttooltip?: string | ComponentProps<typeof TooltipContent>;\n} & VariantProps<typeof sidebarMenuButtonVariants>;\n\nconst SidebarMenuButton = (props: SidebarMenuButtonProps) => {\n\tconst context = useSidebar();\n\tconst mergedProps = mergeProps(\n\t\t{\n\t\t\tisActive: false,\n\t\t\tvariant: \"default\" as const,\n\t\t\tsize: \"default\" as const,\n\t\t},\n\t\tprops,\n\t);\n\n\tconst [local, rest] = splitProps<\n\t\tSidebarMenuButtonProps,\n\t\t[[\"children\", \"tooltip\", \"isActive\", \"variant\", \"size\", \"class\"]]\n\t>(mergedProps, [\n\t\t\"children\",\n\t\t\"tooltip\",\n\t\t\"isActive\",\n\t\t\"variant\",\n\t\t\"size\",\n\t\t\"class\",\n\t]);\n\n\tconst button = (\n\t\t<button\n\t\t\tclass={cn(\n\t\t\t\tsidebarMenuButtonVariants({\n\t\t\t\t\tvariant: local.variant,\n\t\t\t\t\tsize: local.size,\n\t\t\t\t}),\n\t\t\t\tlocal.class,\n\t\t\t)}\n\t\t\tdata-sidebar=\"menu-button\"\n\t\t\tdata-size={local.size}\n\t\t\tdata-active={local.isActive}\n\t\t\t{...rest}\n\t\t/>\n\t);\n\n\tif (!local.tooltip) {\n\t\treturn button;\n\t}\n\n\tif (typeof local.tooltip === \"string\") {\n\t\tlocal.tooltip = {\n\t\t\tchildren: local.tooltip,\n\t\t};\n\t}\n\n\treturn (\n\t\t<Tooltip>\n\t\t\t<TooltipTrigger>{button}</TooltipTrigger>\n\t\t\t<TooltipContent\n\t\t\t\tside=\"right\"\n\t\t\t\talign=\"center\"\n\t\t\t\thidden={context().state !== \"collapsed\" || context().isMobile}\n\t\t\t\t{...local.tooltip}\n\t\t\t/>\n\t\t</Tooltip>\n\t);\n};\n\ntype SidebarMenuActionProps = ComponentProps<\"button\"> & {\n\tshowOnHover?: boolean;\n};\nconst SidebarMenuAction = (props: SidebarMenuActionProps) => {\n\tconst [local, rest] = splitProps<\n\t\tSidebarMenuActionProps,\n\t\t[[\"class\", \"showOnHover\"]]\n\t>(props, [\"class\", \"showOnHover\"]);\n\n\treturn (\n\t\t<button\n\t\t\tdata-sidebar=\"menu-action\"\n\t\t\tclass={cn(\n\t\t\t\t\"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-none transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0\",\n\t\t\t\t// Increases the hit area of the button on mobile.\n\t\t\t\t\"after:absolute after:-inset-2 after:md:hidden\",\n\t\t\t\t\"peer-data-[size=sm]/menu-button:top-1\",\n\t\t\t\t\"peer-data-[size=default]/menu-button:top-1.5\",\n\t\t\t\t\"peer-data-[size=lg]/menu-button:top-2.5\",\n\t\t\t\t\"group-data-[collapsible=icon]:hidden\",\n\t\t\t\tlocal.showOnHover &&\n\t\t\t\t\t\"peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0\",\n\t\t\t\tlocal.class,\n\t\t\t)}\n\t\t\t{...rest}\n\t\t/>\n\t);\n};\n\ntype SidebarMenuBadgeProps = ComponentProps<\"div\">;\n\nconst SidebarMenuBadge = (props: SidebarMenuBadgeProps) => {\n\tconst [local, rest] = splitProps<SidebarMenuBadgeProps, [[\"class\"]]>(props, [\n\t\t\"class\",\n\t]);\n\treturn (\n\t\t<div\n\t\t\tdata-sidebar=\"menu-badge\"\n\t\t\tclass={cn(\n\t\t\t\t\"text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums\",\n\t\t\t\t\"peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground\",\n\t\t\t\t\"peer-data-[size=sm]/menu-button:top-1\",\n\t\t\t\t\"peer-data-[size=default]/menu-button:top-1.5\",\n\t\t\t\t\"peer-data-[size=lg]/menu-button:top-2.5\",\n\t\t\t\t\"group-data-[collapsible=icon]:hidden\",\n\t\t\t\tlocal.class,\n\t\t\t)}\n\t\t\t{...rest}\n\t\t/>\n\t);\n};\n\ntype SidebarMenuSkeletonProps = ComponentProps<\"div\"> & { showIcon?: boolean };\n\nconst SidebarMenuSkeleton = (props: SidebarMenuSkeletonProps) => {\n\tconst [local, rest] = splitProps<\n\t\tSidebarMenuSkeletonProps,\n\t\t[[\"class\", \"showIcon\"]]\n\t>(props, [\"class\", \"showIcon\"]);\n\n\tconst width = () => `${Math.floor(Math.random() * 40) + 50}%`;\n\n\treturn (\n\t\t<div\n\t\t\tdata-sidebar=\"menu-skeleton\"\n\t\t\tclass={cn(\"flex h-8 items-center gap-2 rounded-md px-2\", local.class)}\n\t\t\t{...rest}\n\t\t>\n\t\t\t<Show when={local.showIcon}>\n\t\t\t\t<Skeleton class=\"size-4 rounded-md\" data-sidebar=\"menu-skeleton-icon\" />\n\t\t\t</Show>\n\t\t\t<Skeleton\n\t\t\t\tclass=\"h-4 max-w-[--skeleton-width] flex-1\"\n\t\t\t\tdata-sidebar=\"menu-skeleton-text\"\n\t\t\t\tstyle={\n\t\t\t\t\t{\n\t\t\t\t\t\t\"--skeleton-width\": width(),\n\t\t\t\t\t} as JSX.CSSProperties\n\t\t\t\t}\n\t\t\t/>\n\t\t</div>\n\t);\n};\n\ntype SidebarMenuSubProps = ComponentProps<\"ul\">;\nconst SidebarMenuSub = (props: SidebarMenuSubProps) => {\n\tconst [local, rest] = splitProps<SidebarMenuSubProps, [[\"class\"]]>(props, [\n\t\t\"class\",\n\t]);\n\n\treturn (\n\t\t<ul\n\t\t\tdata-sidebar=\"menu-sub\"\n\t\t\tclass={cn(\n\t\t\t\t\"border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5\",\n\t\t\t\t\"group-data-[collapsible=icon]:hidden\",\n\t\t\t\tlocal.class,\n\t\t\t)}\n\t\t\t{...rest}\n\t\t/>\n\t);\n};\n\ntype SidebarMenuSubItemProps = ComponentProps<\"li\">;\n\nconst SidebarMenuSubItem = (props: SidebarMenuSubItemProps) => {\n\treturn <li {...props} />;\n};\n\ntype SidebarMenuSubButtonProps = ComponentProps<\"a\"> & {\n\tsize?: \"sm\" | \"md\";\n\tisActive?: boolean;\n};\n\nconst SidebarMenuSubButton = (props: SidebarMenuSubButtonProps) => {\n\tconst mergedProps = mergeProps(\n\t\t{\n\t\t\tsize: \"md\" as const,\n\t\t\tisActive: false,\n\t\t},\n\t\tprops,\n\t);\n\n\tconst [local, rest] = splitProps<\n\t\tSidebarMenuSubButtonProps,\n\t\t[[\"class\", \"size\", \"isActive\"]]\n\t>(mergedProps, [\"class\", \"size\", \"isActive\"]);\n\n\treturn (\n\t\t<a\n\t\t\tdata-sidebar=\"menu-sub-button\"\n\t\t\tdata-size={local.size}\n\t\t\tdata-active={local.isActive}\n\t\t\tclass={cn(\n\t\t\t\t\"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0\",\n\t\t\t\t\"data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground\",\n\t\t\t\tlocal.size === \"sm\" && \"text-xs\",\n\t\t\t\tlocal.size === \"md\" && \"text-sm\",\n\t\t\t\t\"group-data-[collapsible=icon]:hidden\",\n\t\t\t\tlocal.class,\n\t\t\t)}\n\t\t\t{...rest}\n\t\t/>\n\t);\n};\n\nexport {\n\tSidebar,\n\tSidebarContent,\n\tSidebarFooter,\n\tSidebarGroup,\n\tSidebarGroupAction,\n\tSidebarGroupContent,\n\tSidebarGroupLabel,\n\tSidebarHeader,\n\tSidebarInput,\n\tSidebarInset,\n\tSidebarMenu,\n\tSidebarMenuAction,\n\tSidebarMenuBadge,\n\tSidebarMenuButton,\n\tSidebarMenuItem,\n\tSidebarMenuSkeleton,\n\tSidebarMenuSub,\n\tSidebarMenuSubButton,\n\tSidebarMenuSubItem,\n\tSidebarProvider,\n\tSidebarRail,\n\tSidebarSeparator,\n\tSidebarTrigger,\n\tuseSidebar,\n};\n"
+    }
+  ],
+  "type": "components:ui"
+}
\ No newline at end of file
diff --git a/docs/public/registry/frameworks/unocss/sidebar.json b/docs/public/registry/frameworks/unocss/sidebar.json
new file mode 100644
index 0000000..90e68bd
--- /dev/null
+++ b/docs/public/registry/frameworks/unocss/sidebar.json
@@ -0,0 +1,13 @@
+{
+  "name": "sidebar",
+  "dependencies": [
+    "@kobalte/core"
+  ],
+  "files": [
+    {
+      "name": "sidebar.tsx",
+      "content": "import { Button } from \"@repo/unocss/ui/button\";\nimport { Separator } from \"@repo/unocss/ui/separator\";\nimport { Sheet, SheetContent } from \"@repo/unocss/ui/sheet\";\nimport { TextField } from \"@repo/unocss/ui/textfield\";\n\nimport { cn } from \"@/libs/cn\";\nimport { Skeleton } from \"@repo/unocss/ui/skeleton\";\nimport {\n\tTooltip,\n\tTooltipContent,\n\tTooltipTrigger,\n} from \"@repo/unocss/ui/tooltip\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\nimport {\n\ttype Accessor,\n\ttype ComponentProps,\n\ttype JSX,\n\tShow,\n\tcreateContext,\n\tcreateMemo,\n\tcreateSignal,\n\tmergeProps,\n\tonCleanup,\n\tonMount,\n\tsplitProps,\n\tuseContext,\n} from \"solid-js\";\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar:state\";\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;\nconst SIDEBAR_WIDTH = \"16rem\";\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\";\nconst SIDEBAR_WIDTH_ICON = \"3rem\";\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\";\nconst MOBILE_BREAKPOINT = 768;\n\ntype SidebarContext = {\n\tstate: \"expanded\" | \"collapsed\";\n\topen: boolean;\n\tsetOpen: (open: boolean) => void;\n\topenMobile: boolean;\n\tsetOpenMobile: (open: boolean) => void;\n\tisMobile: boolean;\n\ttoggleSidebar: () => void;\n};\n\nconst SidebarContext = createContext<Accessor<SidebarContext> | null>(null);\n\nfunction useSidebar() {\n\tconst context = useContext(SidebarContext);\n\n\tif (!context) {\n\t\tthrow new Error(\"useSidebar must be used within a SidebarProvider\");\n\t}\n\n\treturn context;\n}\n\nexport function useIsMobile() {\n\tconst [isMobile, setIsMobile] = createSignal<boolean>(false);\n\n\tonMount(() => {\n\t\tconst mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);\n\t\tconst onChange = () => {\n\t\t\tsetIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n\t\t};\n\n\t\tmql.addEventListener(\"change\", onChange);\n\t\tsetIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n\n\t\tonCleanup(() => mql.removeEventListener(\"change\", onChange));\n\t});\n\n\treturn isMobile;\n}\n\ntype SidebarProviderProps = {\n\tdefaultOpen?: boolean;\n\topen?: boolean;\n\tonOpenChange?: (open: boolean) => void;\n\tchildren: JSX.Element;\n} & ComponentProps<\"div\">;\n\nconst SidebarProvider = (props: SidebarProviderProps) => {\n\tconst isMobile = useIsMobile();\n\tconst [openMobile, setOpenMobile] = createSignal(false);\n\n\tconst [local, rest] = splitProps(props, [\n\t\t\"open\",\n\t\t\"class\",\n\t\t\"style\",\n\t\t\"defaultOpen\",\n\t\t\"onOpenChange\",\n\t\t\"children\",\n\t]);\n\n\t// This is the internal state of the sidebar.\n\t// We use local.open and local.onOpenChange for control from outside the component.\n\tconst [_open, _setOpen] = createSignal(local.defaultOpen ?? true);\n\tconst open = () => local.open ?? _open();\n\n\tconst setOpen = (value: boolean | ((value: boolean) => boolean)) => {\n\t\tconst openState = typeof value === \"function\" ? value(open()) : open();\n\t\t_setOpen(openState);\n\t\tlocal.onOpenChange?.(open());\n\n\t\tdocument.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;\n\t};\n\n\tconst toggleSidebar = () => {\n\t\tisMobile() ? setOpenMobile(!openMobile()) : setOpen(!open());\n\t};\n\n\t// Adds a keyboard shortcut to toggle the sidebar\n\tonMount(() => {\n\t\tconst handleKeyDown = (event: KeyboardEvent) => {\n\t\t\tif (\n\t\t\t\tevent.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n\t\t\t\t(event.metaKey || event.ctrlKey)\n\t\t\t) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\ttoggleSidebar();\n\t\t\t}\n\t\t};\n\n\t\twindow.addEventListener(\"keydown\", handleKeyDown);\n\t\tonCleanup(() => window.removeEventListener(\"keydown\", handleKeyDown));\n\t});\n\n\t// We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n\t// This makes it easier to style the sidebar with Tailwind classes.\n\tconst state = open() ? \"expanded\" : \"collapsed\";\n\n\tconst contextValue = createMemo<SidebarContext>(() => ({\n\t\tstate,\n\t\topen: open(),\n\t\tsetOpen,\n\t\tisMobile: isMobile(),\n\t\topenMobile: openMobile(),\n\t\tsetOpenMobile,\n\t\ttoggleSidebar,\n\t}));\n\n\treturn (\n\t\t<SidebarContext.Provider value={contextValue}>\n\t\t\t<div\n\t\t\t\tclass={cn(\n\t\t\t\t\t\"group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar\",\n\t\t\t\t\tlocal.class,\n\t\t\t\t)}\n\t\t\t\tstyle={{\n\t\t\t\t\t\"--sidebar-width\": SIDEBAR_WIDTH,\n\t\t\t\t\t\"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n\t\t\t\t\t...(local.style as JSX.CSSProperties),\n\t\t\t\t}}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t{local.children}\n\t\t\t</div>\n\t\t</SidebarContext.Provider>\n\t);\n};\n\ntype SidebarProps = {\n\tside?: \"left\" | \"right\";\n\tvariant?: \"sidebar\" | \"floating\" | \"inset\";\n\tcollapsible?: \"offcanvas\" | \"icon\" | \"none\";\n\tchildren: JSX.Element;\n} & ComponentProps<\"div\">;\n\nconst Sidebar = (props: SidebarProps) => {\n\tconst mergedProps = mergeProps(\n\t\t{\n\t\t\tside: \"left\" as const,\n\t\t\tvariant: \"sidebar\" as const,\n\t\t\tcollapsible: \"offcanvas\" as const,\n\t\t},\n\t\tprops,\n\t);\n\n\tconst [local, rest] = splitProps<\n\t\tSidebarProps,\n\t\t[[\"class\", \"children\", \"side\", \"variant\", \"collapsible\"]]\n\t>(mergedProps, [\"class\", \"children\", \"side\", \"variant\", \"collapsible\"]);\n\n\tconst context = useSidebar();\n\n\tif (local.collapsible === \"none\") {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclass={cn(\n\t\t\t\t\t\"bg-sidebar text-sidebar-foreground flex h-full w-[--sidebar-width] flex-col\",\n\t\t\t\t\tlocal.class,\n\t\t\t\t)}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t{local.children}\n\t\t\t</div>\n\t\t);\n\t}\n\n\tif (context().isMobile) {\n\t\treturn (\n\t\t\t<Sheet\n\t\t\t\topen={context().openMobile}\n\t\t\t\tonOpenChange={context().setOpenMobile}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<SheetContent\n\t\t\t\t\tdata-sidebar=\"sidebar\"\n\t\t\t\t\tdata-mobile=\"true\"\n\t\t\t\t\tclass=\"bg-sidebar text-sidebar-foreground w-[--sidebar-width] p-0 [&>button]:hidden\"\n\t\t\t\t\tstyle={\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n\t\t\t\t\t\t} as JSX.CSSProperties\n\t\t\t\t\t}\n\t\t\t\t\tside={local.side}\n\t\t\t\t>\n\t\t\t\t\t<div class=\"flex h-full w-full flex-col\">{local.children}</div>\n\t\t\t\t</SheetContent>\n\t\t\t</Sheet>\n\t\t);\n\t}\n\n\treturn (\n\t\t<div\n\t\t\tclass=\"text-sidebar-foreground group peer hidden md:block\"\n\t\t\tdata-state={context().state}\n\t\t\tdata-collapsible={\n\t\t\t\tcontext().state === \"collapsed\" ? local.collapsible : \"\"\n\t\t\t}\n\t\t\tdata-variant={local.variant}\n\t\t\tdata-side={local.side}\n\t\t>\n\t\t\t{/* This is what handles the sidebar gap on desktop */}\n\t\t\t<div\n\t\t\t\tclass={cn(\n\t\t\t\t\t\"relative h-svh w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear\",\n\t\t\t\t\t\"group-data-[collapsible=offcanvas]:w-0\",\n\t\t\t\t\t\"group-data-[side=right]:rotate-180\",\n\t\t\t\t\tlocal.variant === \"floating\" || local.variant === \"inset\"\n\t\t\t\t\t\t? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]\"\n\t\t\t\t\t\t: \"group-data-[collapsible=icon]:w-[--sidebar-width-icon]\",\n\t\t\t\t)}\n\t\t\t/>\n\t\t\t<div\n\t\t\t\tclass={cn(\n\t\t\t\t\t\"fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex\",\n\t\t\t\t\tlocal.side === \"left\"\n\t\t\t\t\t\t? \"left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]\"\n\t\t\t\t\t\t: \"right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]\",\n\t\t\t\t\t// Adjust the padding for floating and inset variants.\n\t\t\t\t\tlocal.variant === \"floating\" || local.variant === \"inset\"\n\t\t\t\t\t\t? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]\"\n\t\t\t\t\t\t: \"group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n\t\t\t\t\tlocal.class,\n\t\t\t\t)}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tdata-sidebar=\"sidebar\"\n\t\t\t\t\tclass=\"bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow\"\n\t\t\t\t>\n\t\t\t\t\t{local.children}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n\ntype SidebarTriggerProps = ComponentProps<\"button\">;\n\nconst SidebarTrigger = (props: SidebarTriggerProps) => {\n\tconst context = useSidebar();\n\n\tconst [local, rest] = splitProps<SidebarTriggerProps, [[\"class\", \"onClick\"]]>(\n\t\tprops,\n\t\t[\"class\", \"onClick\"],\n\t);\n\n\treturn (\n\t\t<Button\n\t\t\tdata-sidebar=\"trigger\"\n\t\t\tvariant=\"ghost\"\n\t\t\tsize=\"icon\"\n\t\t\tclass={cn(\"h-7 w-7\", local.class)}\n\t\t\tonClick={[local.onClick, () => context().toggleSidebar()]}\n\t\t\t{...rest}\n\t\t>\n\t\t\t<svg\n\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\twidth=\"24\"\n\t\t\t\theight=\"24\"\n\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\tfill=\"none\"\n\t\t\t\tstroke=\"currentColor\"\n\t\t\t\tstroke-width=\"2\"\n\t\t\t\tstroke-linecap=\"round\"\n\t\t\t\tstroke-linejoin=\"round\"\n\t\t\t\tclass=\"lucide lucide-panel-left\"\n\t\t\t>\n\t\t\t\t<title>Menu Icon</title>\n\t\t\t\t<rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" />\n\t\t\t\t<path d=\"M9 3v18\" />\n\t\t\t</svg>\n\t\t\t<span class=\"sr-only\">Toggle Sidebar</span>\n\t\t</Button>\n\t);\n};\n\nconst SidebarRail = (props: ComponentProps<\"button\">) => {\n\tconst context = useSidebar();\n\n\tconst [local, rest] = splitProps<SidebarTriggerProps, [[\"class\"]]>(props, [\n\t\t\"class\",\n\t]);\n\n\treturn (\n\t\t<button\n\t\t\tdata-sidebar=\"rail\"\n\t\t\taria-label=\"Toggle Sidebar\"\n\t\t\ttabIndex={-1}\n\t\t\tonClick={context().toggleSidebar}\n\t\t\ttitle=\"Toggle Sidebar\"\n\t\t\tclass={cn(\n\t\t\t\t\"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex\",\n\t\t\t\t\"[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize\",\n\t\t\t\t\"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n\t\t\t\t\"group-data-[collapsible=offcanvas]:hover:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full\",\n\t\t\t\t\"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n\t\t\t\t\"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n\t\t\t\tlocal.class,\n\t\t\t)}\n\t\t\t{...rest}\n\t\t/>\n\t);\n};\n\ntype SidebarInsetProps = ComponentProps<\"main\">;\n\nconst SidebarInset = (props: SidebarInsetProps) => {\n\tconst [local, rest] = splitProps<SidebarInsetProps, [[\"class\"]]>(props, [\n\t\t\"class\",\n\t]);\n\n\treturn (\n\t\t<main\n\t\t\tclass={cn(\n\t\t\t\t\"bg-background relative flex min-h-svh flex-1 flex-col\",\n\t\t\t\t\"peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow\",\n\t\t\t\tlocal.class,\n\t\t\t)}\n\t\t\t{...rest}\n\t\t/>\n\t);\n};\n\ntype SidebarInputProps = ComponentProps<typeof TextField>;\nconst SidebarInput = (props: SidebarInputProps) => {\n\tconst [local, rest] = splitProps<SidebarInputProps, [[\"class\"]]>(props, [\n\t\t\"class\",\n\t]);\n\n\treturn (\n\t\t<TextField\n\t\t\tdata-sidebar=\"input\"\n\t\t\tclass={cn(\n\t\t\t\t\"bg-background focus-visible:ring-sidebar-ring h-8 w-full shadow-none focus-visible:ring-2\",\n\t\t\t\tlocal.class,\n\t\t\t)}\n\t\t\t{...rest}\n\t\t/>\n\t);\n};\n\ntype SidebarHeaderProps = ComponentProps<\"div\">;\n\nconst SidebarHeader = (props: SidebarHeaderProps) => {\n\tconst [local, rest] = splitProps<SidebarHeaderProps, [[\"class\"]]>(props, [\n\t\t\"class\",\n\t]);\n\n\treturn (\n\t\t<div\n\t\t\tdata-sidebar=\"header\"\n\t\t\tclass={cn(\"flex flex-col gap-2 p-2\", local.class)}\n\t\t\t{...rest}\n\t\t/>\n\t);\n};\n\ntype SidebarFooterProps = ComponentProps<\"div\">;\n\nconst SidebarFooter = (props: SidebarFooterProps) => {\n\tconst [local, rest] = splitProps<SidebarFooterProps, [[\"class\"]]>(props, [\n\t\t\"class\",\n\t]);\n\n\treturn (\n\t\t<div\n\t\t\tdata-sidebar=\"footer\"\n\t\t\tclass={cn(\"flex flex-col gap-2 p-2\", local.class)}\n\t\t\t{...rest}\n\t\t/>\n\t);\n};\n\ntype SidebarSeparatorProps = ComponentProps<typeof Separator>;\n\nconst SidebarSeparator = (props: SidebarSeparatorProps) => {\n\tconst [local, rest] = splitProps<SidebarSeparatorProps, [[\"class\"]]>(props, [\n\t\t\"class\",\n\t]);\n\n\treturn (\n\t\t<Separator\n\t\t\tdata-sidebar=\"separator\"\n\t\t\tclassName={cn(\"bg-sidebar-border mx-2 w-auto\", local.class)}\n\t\t\t{...rest}\n\t\t/>\n\t);\n};\n\ntype SidebarContentProps = ComponentProps<\"div\">;\n\nconst SidebarContent = (props: SidebarContentProps) => {\n\tconst [local, rest] = splitProps<SidebarContentProps, [[\"class\"]]>(props, [\n\t\t\"class\",\n\t]);\n\treturn (\n\t\t<div\n\t\t\tdata-sidebar=\"content\"\n\t\t\tclass={cn(\n\t\t\t\t\"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n\t\t\t\tlocal.class,\n\t\t\t)}\n\t\t\t{...rest}\n\t\t/>\n\t);\n};\n\ntype SidebarGroupProps = ComponentProps<\"div\">;\n\nconst SidebarGroup = (props: SidebarGroupProps) => {\n\tconst [local, rest] = splitProps<SidebarGroupProps, [[\"class\"]]>(props, [\n\t\t\"class\",\n\t]);\n\treturn (\n\t\t<div\n\t\t\tdata-sidebar=\"group\"\n\t\t\tclass={cn(\"relative flex w-full min-w-0 flex-col p-2\", local.class)}\n\t\t\t{...rest}\n\t\t/>\n\t);\n};\n\ntype SidebarGroupLabelProps = ComponentProps<\"div\">;\n\nconst SidebarGroupLabel = (props: SidebarGroupLabelProps) => {\n\tconst [local, rest] = splitProps<SidebarGroupLabelProps, [[\"class\"]]>(props, [\n\t\t\"class\",\n\t]);\n\treturn (\n\t\t<div\n\t\t\tdata-sidebar=\"group-label\"\n\t\t\tclass={cn(\n\t\t\t\t\"text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-none transition-[margin,opa] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0\",\n\t\t\t\t\"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0\",\n\t\t\t\tlocal.class,\n\t\t\t)}\n\t\t\t{...rest}\n\t\t/>\n\t);\n};\n\ntype SidebarGroupActionProps = ComponentProps<\"button\">;\n\nconst SidebarGroupAction = (props: SidebarGroupActionProps) => {\n\tconst [local, rest] = splitProps<SidebarGroupActionProps, [[\"class\"]]>(\n\t\tprops,\n\t\t[\"class\"],\n\t);\n\treturn (\n\t\t<button\n\t\t\tdata-sidebar=\"group-action\"\n\t\t\tclass={cn(\n\t\t\t\t\"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-none transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0\",\n\t\t\t\t// Increases the hit area of the button on mobile.\n\t\t\t\t\"after:absolute after:-inset-2 after:md:hidden\",\n\t\t\t\t\"group-data-[collapsible=icon]:hidden\",\n\t\t\t\tlocal.class,\n\t\t\t)}\n\t\t\t{...rest}\n\t\t/>\n\t);\n};\n\ntype SidebarGroupContentProps = ComponentProps<\"div\">;\n\nconst SidebarGroupContent = (props: SidebarGroupContentProps) => {\n\tconst [local, rest] = splitProps<SidebarGroupContentProps, [[\"class\"]]>(\n\t\tprops,\n\t\t[\"class\"],\n\t);\n\treturn (\n\t\t<div\n\t\t\tdata-sidebar=\"group-content\"\n\t\t\tclass={cn(\"w-full text-sm\", local.class)}\n\t\t\t{...rest}\n\t\t/>\n\t);\n};\n\ntype SidebarMenuProps = ComponentProps<\"ul\">;\n\nconst SidebarMenu = (props: SidebarMenuProps) => {\n\tconst [local, rest] = splitProps<SidebarMenuProps, [[\"class\"]]>(props, [\n\t\t\"class\",\n\t]);\n\treturn (\n\t\t<ul\n\t\t\tdata-sidebar=\"menu\"\n\t\t\tclass={cn(\"flex w-full min-w-0 flex-col gap-1\", local.class)}\n\t\t\t{...rest}\n\t\t/>\n\t);\n};\n\ntype SidebarMenuItemProps = ComponentProps<\"li\">;\n\nconst SidebarMenuItem = (props: SidebarMenuItemProps) => {\n\tconst [local, rest] = splitProps<SidebarMenuItemProps, [[\"class\"]]>(props, [\n\t\t\"class\",\n\t]);\n\treturn (\n\t\t<li\n\t\t\tdata-sidebar=\"menu-item\"\n\t\t\tclass={cn(\"group/menu-item relative\", local.class)}\n\t\t\t{...rest}\n\t\t/>\n\t);\n};\n\nconst sidebarMenuButtonVariants = cva(\n\t\"peer/menu-button ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none transition-[width,height,padding] focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:font-medium group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0\",\n\t{\n\t\tvariants: {\n\t\t\tvariant: {\n\t\t\t\tdefault: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n\t\t\t\toutline:\n\t\t\t\t\t\"bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]\",\n\t\t\t},\n\t\t\tsize: {\n\t\t\t\tdefault: \"h-8 text-sm\",\n\t\t\t\tsm: \"h-7 text-xs\",\n\t\t\t\tlg: \"h-12 text-sm group-data-[collapsible=icon]:!p-0\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tvariant: \"default\",\n\t\t\tsize: \"default\",\n\t\t},\n\t},\n);\n\ntype SidebarMenuButtonProps = ComponentProps<\"button\"> & {\n\tisActive?: boolean;\n\ttooltip?: string | ComponentProps<typeof TooltipContent>;\n} & VariantProps<typeof sidebarMenuButtonVariants>;\n\nconst SidebarMenuButton = (props: SidebarMenuButtonProps) => {\n\tconst context = useSidebar();\n\tconst mergedProps = mergeProps(\n\t\t{\n\t\t\tisActive: false,\n\t\t\tvariant: \"default\" as const,\n\t\t\tsize: \"default\" as const,\n\t\t},\n\t\tprops,\n\t);\n\n\tconst [local, rest] = splitProps<\n\t\tSidebarMenuButtonProps,\n\t\t[[\"children\", \"tooltip\", \"isActive\", \"variant\", \"size\", \"class\"]]\n\t>(mergedProps, [\n\t\t\"children\",\n\t\t\"tooltip\",\n\t\t\"isActive\",\n\t\t\"variant\",\n\t\t\"size\",\n\t\t\"class\",\n\t]);\n\n\tconst button = (\n\t\t<button\n\t\t\tclass={cn(\n\t\t\t\tsidebarMenuButtonVariants({\n\t\t\t\t\tvariant: local.variant,\n\t\t\t\t\tsize: local.size,\n\t\t\t\t}),\n\t\t\t\tlocal.class,\n\t\t\t)}\n\t\t\tdata-sidebar=\"menu-button\"\n\t\t\tdata-size={local.size}\n\t\t\tdata-active={local.isActive}\n\t\t\t{...rest}\n\t\t/>\n\t);\n\n\tif (!local.tooltip) {\n\t\treturn button;\n\t}\n\n\tif (typeof local.tooltip === \"string\") {\n\t\tlocal.tooltip = {\n\t\t\tchildren: local.tooltip,\n\t\t};\n\t}\n\n\treturn (\n\t\t<Tooltip>\n\t\t\t<TooltipTrigger>{button}</TooltipTrigger>\n\t\t\t<TooltipContent\n\t\t\t\tside=\"right\"\n\t\t\t\talign=\"center\"\n\t\t\t\thidden={context().state !== \"collapsed\" || context().isMobile}\n\t\t\t\t{...local.tooltip}\n\t\t\t/>\n\t\t</Tooltip>\n\t);\n};\n\ntype SidebarMenuActionProps = ComponentProps<\"button\"> & {\n\tshowOnHover?: boolean;\n};\nconst SidebarMenuAction = (props: SidebarMenuActionProps) => {\n\tconst [local, rest] = splitProps<\n\t\tSidebarMenuActionProps,\n\t\t[[\"class\", \"showOnHover\"]]\n\t>(props, [\"class\", \"showOnHover\"]);\n\n\treturn (\n\t\t<button\n\t\t\tdata-sidebar=\"menu-action\"\n\t\t\tclass={cn(\n\t\t\t\t\"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-none transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0\",\n\t\t\t\t// Increases the hit area of the button on mobile.\n\t\t\t\t\"after:absolute after:-inset-2 after:md:hidden\",\n\t\t\t\t\"peer-data-[size=sm]/menu-button:top-1\",\n\t\t\t\t\"peer-data-[size=default]/menu-button:top-1.5\",\n\t\t\t\t\"peer-data-[size=lg]/menu-button:top-2.5\",\n\t\t\t\t\"group-data-[collapsible=icon]:hidden\",\n\t\t\t\tlocal.showOnHover &&\n\t\t\t\t\t\"peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0\",\n\t\t\t\tlocal.class,\n\t\t\t)}\n\t\t\t{...rest}\n\t\t/>\n\t);\n};\n\ntype SidebarMenuBadgeProps = ComponentProps<\"div\">;\n\nconst SidebarMenuBadge = (props: SidebarMenuBadgeProps) => {\n\tconst [local, rest] = splitProps<SidebarMenuBadgeProps, [[\"class\"]]>(props, [\n\t\t\"class\",\n\t]);\n\treturn (\n\t\t<div\n\t\t\tdata-sidebar=\"menu-badge\"\n\t\t\tclass={cn(\n\t\t\t\t\"text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums\",\n\t\t\t\t\"peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground\",\n\t\t\t\t\"peer-data-[size=sm]/menu-button:top-1\",\n\t\t\t\t\"peer-data-[size=default]/menu-button:top-1.5\",\n\t\t\t\t\"peer-data-[size=lg]/menu-button:top-2.5\",\n\t\t\t\t\"group-data-[collapsible=icon]:hidden\",\n\t\t\t\tlocal.class,\n\t\t\t)}\n\t\t\t{...rest}\n\t\t/>\n\t);\n};\n\ntype SidebarMenuSkeletonProps = ComponentProps<\"div\"> & { showIcon?: boolean };\n\nconst SidebarMenuSkeleton = (props: SidebarMenuSkeletonProps) => {\n\tconst [local, rest] = splitProps<\n\t\tSidebarMenuSkeletonProps,\n\t\t[[\"class\", \"showIcon\"]]\n\t>(props, [\"class\", \"showIcon\"]);\n\n\tconst width = () => `${Math.floor(Math.random() * 40) + 50}%`;\n\n\treturn (\n\t\t<div\n\t\t\tdata-sidebar=\"menu-skeleton\"\n\t\t\tclass={cn(\"flex h-8 items-center gap-2 rounded-md px-2\", local.class)}\n\t\t\t{...rest}\n\t\t>\n\t\t\t<Show when={local.showIcon}>\n\t\t\t\t<Skeleton class=\"size-4 rounded-md\" data-sidebar=\"menu-skeleton-icon\" />\n\t\t\t</Show>\n\t\t\t<Skeleton\n\t\t\t\tclass=\"h-4 max-w-[--skeleton-width] flex-1\"\n\t\t\t\tdata-sidebar=\"menu-skeleton-text\"\n\t\t\t\tstyle={\n\t\t\t\t\t{\n\t\t\t\t\t\t\"--skeleton-width\": width(),\n\t\t\t\t\t} as JSX.CSSProperties\n\t\t\t\t}\n\t\t\t/>\n\t\t</div>\n\t);\n};\n\ntype SidebarMenuSubProps = ComponentProps<\"ul\">;\nconst SidebarMenuSub = (props: SidebarMenuSubProps) => {\n\tconst [local, rest] = splitProps<SidebarMenuSubProps, [[\"class\"]]>(props, [\n\t\t\"class\",\n\t]);\n\n\treturn (\n\t\t<ul\n\t\t\tdata-sidebar=\"menu-sub\"\n\t\t\tclass={cn(\n\t\t\t\t\"border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5\",\n\t\t\t\t\"group-data-[collapsible=icon]:hidden\",\n\t\t\t\tlocal.class,\n\t\t\t)}\n\t\t\t{...rest}\n\t\t/>\n\t);\n};\n\ntype SidebarMenuSubItemProps = ComponentProps<\"li\">;\n\nconst SidebarMenuSubItem = (props: SidebarMenuSubItemProps) => {\n\treturn <li {...props} />;\n};\n\ntype SidebarMenuSubButtonProps = ComponentProps<\"a\"> & {\n\tsize?: \"sm\" | \"md\";\n\tisActive?: boolean;\n};\n\nconst SidebarMenuSubButton = (props: SidebarMenuSubButtonProps) => {\n\tconst mergedProps = mergeProps(\n\t\t{\n\t\t\tsize: \"md\" as const,\n\t\t\tisActive: false,\n\t\t},\n\t\tprops,\n\t);\n\n\tconst [local, rest] = splitProps<\n\t\tSidebarMenuSubButtonProps,\n\t\t[[\"class\", \"size\", \"isActive\"]]\n\t>(mergedProps, [\"class\", \"size\", \"isActive\"]);\n\n\treturn (\n\t\t<a\n\t\t\tdata-sidebar=\"menu-sub-button\"\n\t\t\tdata-size={local.size}\n\t\t\tdata-active={local.isActive}\n\t\t\tclass={cn(\n\t\t\t\t\"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0\",\n\t\t\t\t\"data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground\",\n\t\t\t\tlocal.size === \"sm\" && \"text-xs\",\n\t\t\t\tlocal.size === \"md\" && \"text-sm\",\n\t\t\t\t\"group-data-[collapsible=icon]:hidden\",\n\t\t\t\tlocal.class,\n\t\t\t)}\n\t\t\t{...rest}\n\t\t/>\n\t);\n};\n\nexport {\n\tSidebar,\n\tSidebarContent,\n\tSidebarFooter,\n\tSidebarGroup,\n\tSidebarGroupAction,\n\tSidebarGroupContent,\n\tSidebarGroupLabel,\n\tSidebarHeader,\n\tSidebarInput,\n\tSidebarInset,\n\tSidebarMenu,\n\tSidebarMenuAction,\n\tSidebarMenuBadge,\n\tSidebarMenuButton,\n\tSidebarMenuItem,\n\tSidebarMenuSkeleton,\n\tSidebarMenuSub,\n\tSidebarMenuSubButton,\n\tSidebarMenuSubItem,\n\tSidebarProvider,\n\tSidebarRail,\n\tSidebarSeparator,\n\tSidebarTrigger,\n\tuseSidebar,\n};\n"
+    }
+  ],
+  "type": "components:ui"
+}
\ No newline at end of file
diff --git a/docs/public/registry/index.json b/docs/public/registry/index.json
index 4a13ab9..3b933bc 100644
--- a/docs/public/registry/index.json
+++ b/docs/public/registry/index.json
@@ -311,6 +311,16 @@
     ],
     "type": "components:ui"
   },
+  {
+    "name": "sidebar",
+    "dependencies": [
+      "@kobalte/core"
+    ],
+    "files": [
+      "ui/sidebar.tsx"
+    ],
+    "type": "components:ui"
+  },
   {
     "name": "skeleton",
     "files": [
diff --git a/docs/scripts/utils/index.ts b/docs/scripts/utils/index.ts
index 41c7204..592b4a3 100644
--- a/docs/scripts/utils/index.ts
+++ b/docs/scripts/utils/index.ts
@@ -183,6 +183,12 @@ const ui = [
 		dependencies: ["@kobalte/core"],
 		files: ["ui/sheet.tsx"],
 	},
+	{
+		name: "sidebar",
+		type: "components:ui",
+		dependencies: ["@kobalte/core"],
+		files: ["ui/sidebar.tsx"],
+	},
 	{
 		name: "skeleton",
 		type: "components:ui",
@@ -561,6 +567,11 @@ const example = [
 		type: "components:example",
 		files: ["examples/sheet-side.tsx"],
 	},
+	{
+		name: "sidebar-demo",
+		type: "components:example",
+		files: ["examples/sidebar-demo.tsx"],
+	},
 	{
 		name: "skeleton-demo",
 		type: "components:example",
diff --git a/docs/src/__registry__/index.js b/docs/src/__registry__/index.js
index 68bb4d9..178f2e3 100644
--- a/docs/src/__registry__/index.js
+++ b/docs/src/__registry__/index.js
@@ -376,6 +376,12 @@ export const Index = {
       registryDependencies: undefined,
       component: lazy(() => import("../examples/sheet-side"))
     },
+    "sidebar-demo": {
+      name: "sidebar-demo",
+      type: "components:example",
+      registryDependencies: undefined,
+      component: lazy(() => import("../examples/sidebar-demo"))
+    },
     "skeleton-demo": {
       name: "skeleton-demo",
       type: "components:example",
diff --git a/docs/src/config/docs.ts b/docs/src/config/docs.ts
index ad03f4e..9e7a778 100644
--- a/docs/src/config/docs.ts
+++ b/docs/src/config/docs.ts
@@ -244,6 +244,12 @@ export const docsConfig: TDocsConfig = {
 					href: "/docs/components/sheet",
 					items: [],
 				},
+				{
+					title: "Sidebar",
+					href: "/docs/components/sidebar",
+					items: [],
+					label: "New",
+				},
 				{
 					title: "Skeleton",
 					href: "/docs/components/skeleton",
diff --git a/docs/src/data/docs/cli.mdx b/docs/src/data/docs/cli.mdx
index 50ac753..99f44d2 100644
--- a/docs/src/data/docs/cli.mdx
+++ b/docs/src/data/docs/cli.mdx
@@ -86,6 +86,7 @@ You will be presented with a list of components to choose from:
 │  ◻ select
 │  ◻ separator
 │  ◻ sheet
+│  ◻ sidebar
 │  ◻ skeleton
 │  ◻ switch
 │  ◻ table
diff --git a/docs/src/data/docs/components/sidebar.mdx b/docs/src/data/docs/components/sidebar.mdx
new file mode 100644
index 0000000..c770868
--- /dev/null
+++ b/docs/src/data/docs/components/sidebar.mdx
@@ -0,0 +1,100 @@
+---
+title: Sidebar
+description: A composable, themeable and customizable sidebar component.
+component: true
+---
+
+import ComponentInstallation from "@/components/component-installation";
+import ComponentPreview from "@/components/component-preview";
+
+<ComponentPreview name="sidebar-demo" client:only="solid-js">
+  <Fragment slot="code">
+    ```tsx file=<rootDir>/src/examples/sidebar-demo.tsx
+    ```
+  </Fragment>
+</ComponentPreview>
+
+## Installation
+
+<ComponentInstallation client:only="solid-js">
+
+  <Fragment slot="cli">
+    ```bash
+    npx shadcn-solid@latest add sidebar
+    ```
+  </Fragment>
+
+  <Step slot="tw">
+
+    <StepItem>Install the following dependencies:</StepItem>
+    ```bash
+    npm install @kobalte/core
+    ```
+
+    <StepItem>Copy and paste the following code into your project:</StepItem>
+    ```tsx file=<rootDir>/../packages/tailwindcss/ui/sidebar.tsx
+    ```
+
+  </Step>
+
+  <Step slot="uno">
+
+    <StepItem>Install the following dependencies:</StepItem>
+    ```bash
+    npm install @kobalte/core
+    ```
+
+    <StepItem>Copy and paste the following code into your project:</StepItem>
+    ```tsx file=<rootDir>/../packages/unocss/ui/sidebar.tsx
+    ```
+
+  </Step>
+
+</ComponentInstallation>
+
+## Usage
+
+```tsx showLineNumbers title="src/app.tsx"
+
+export default function App() {
+return (
+<Router
+  root={(props) => (
+    <MetaProvider>
+      <Title>My App</Title>
+      <Suspense>{props.children}</Suspense>
+    </MetaProvider>
+  )}
+>
+  <FileRoutes />
+</Router>
+);
+}
+```
+
+```tsx showLineNumbers title="components/app-sidebar.tsx"
+import {
+Sidebar,
+SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarHeader,
+} from "@/components/ui/sidebar"
+
+export function AppSidebar() {
+return (
+<Sidebar>
+  <SidebarHeader />
+  <SidebarContent>
+    <SidebarGroup />
+    <SidebarGroup />
+  </SidebarContent>
+  <SidebarFooter />
+</Sidebar>
+)
+}
+```
+
+## Examples
+
+###
\ No newline at end of file
diff --git a/docs/src/data/docs/installation/solid-start.mdx b/docs/src/data/docs/installation/solid-start.mdx
index b52b28f..4c69602 100644
--- a/docs/src/data/docs/installation/solid-start.mdx
+++ b/docs/src/data/docs/installation/solid-start.mdx
@@ -17,7 +17,7 @@ pnpm create solid@latest
 
 ### Path Aliases
 
-I'm use the `@` alias to make it easier to import your components. This is how you can configure it:
+I use the `@` alias to make it easier to import your components. This is how you can configure it:
 
 ```json title="tsconfig.json"{3-6}
 {
diff --git a/docs/src/examples/sidebar-demo.tsx b/docs/src/examples/sidebar-demo.tsx
new file mode 100644
index 0000000..9ae6fc7
--- /dev/null
+++ b/docs/src/examples/sidebar-demo.tsx
@@ -0,0 +1,165 @@
+import {
+	Sidebar,
+	SidebarContent,
+	SidebarGroup,
+	SidebarGroupContent,
+	SidebarGroupLabel,
+	SidebarInset,
+	SidebarMenu,
+	SidebarMenuButton,
+	SidebarMenuItem,
+	SidebarProvider,
+	SidebarTrigger,
+} from "@repo/tailwindcss/ui/sidebar";
+import { For, JSX } from "solid-js";
+
+type MenuItem = {
+	title: string;
+	url: string;
+	icon: () => JSX.Element;
+};
+
+const items: MenuItem[] = [
+	{
+		title: "Home",
+		url: "#",
+		icon: () => (
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width="24"
+				height="24"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				class="lucide lucide-house"
+			>
+				<path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8" />
+				<path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
+			</svg>
+		),
+	},
+	{
+		title: "Inbox",
+		url: "#",
+		icon: () => (
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width="24"
+				height="24"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				class="lucide lucide-inbox"
+			>
+				<polyline points="22 12 16 12 14 15 10 15 8 12 2 12" />
+				<path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" />
+			</svg>
+		),
+	},
+	{
+		title: "Calendar",
+		url: "#",
+		icon: () => (
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width="24"
+				height="24"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				class="lucide lucide-calendar"
+			>
+				<path d="M8 2v4" />
+				<path d="M16 2v4" />
+				<rect width="18" height="18" x="3" y="4" rx="2" />
+				<path d="M3 10h18" />
+			</svg>
+		),
+	},
+	{
+		title: "Search",
+		url: "#",
+		icon: () => (
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width="24"
+				height="24"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				class="lucide lucide-search"
+			>
+				<circle cx="11" cy="11" r="8" />
+				<path d="m21 21-4.3-4.3" />
+			</svg>
+		),
+	},
+	{
+		title: "Settings",
+		url: "#",
+		icon: () => (
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width="24"
+				height="24"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				class="lucide lucide-settings"
+			>
+				<path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" />
+				<circle cx="12" cy="12" r="3" />
+			</svg>
+		),
+	},
+];
+
+export default function AppSidebar() {
+	return (
+		<SidebarProvider>
+			<Sidebar>
+				<SidebarContent>
+					<SidebarGroup>
+						<SidebarGroupLabel>Application</SidebarGroupLabel>
+						<SidebarGroupContent>
+							<SidebarMenu>
+								<For each={items}>
+									{(item) => (
+										<SidebarMenuItem>
+											<SidebarMenuButton>
+												<a href={item.url}>
+													<item.icon />
+													<span>{item.title}</span>
+												</a>
+											</SidebarMenuButton>
+										</SidebarMenuItem>
+									)}
+								</For>
+							</SidebarMenu>
+						</SidebarGroupContent>
+					</SidebarGroup>
+				</SidebarContent>
+			</Sidebar>
+			<SidebarInset>
+				<header class="flex items-center justify-between px-4 h-12">
+					<SidebarTrigger />
+				</header>
+			</SidebarInset>
+		</SidebarProvider>
+	);
+}
diff --git a/packages/tailwindcss/ui/sidebar.tsx b/packages/tailwindcss/ui/sidebar.tsx
new file mode 100644
index 0000000..6b089ce
--- /dev/null
+++ b/packages/tailwindcss/ui/sidebar.tsx
@@ -0,0 +1,805 @@
+import { Button } from "@repo/tailwindcss/ui/button";
+import { Separator } from "@repo/tailwindcss/ui/separator";
+import { Sheet, SheetContent } from "@repo/tailwindcss/ui/sheet";
+import { TextField } from "@repo/tailwindcss/ui/textfield";
+
+import { cn } from "@/libs/cn";
+import { Skeleton } from "@repo/tailwindcss/ui/skeleton";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipTrigger,
+} from "@repo/tailwindcss/ui/tooltip";
+import { type VariantProps, cva } from "class-variance-authority";
+import {
+	type Accessor,
+	type ComponentProps,
+	type JSX,
+	Show,
+	createContext,
+	createMemo,
+	createSignal,
+	mergeProps,
+	onCleanup,
+	onMount,
+	splitProps,
+	useContext,
+} from "solid-js";
+
+const SIDEBAR_COOKIE_NAME = "sidebar:state";
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+const SIDEBAR_WIDTH = "16rem";
+const SIDEBAR_WIDTH_MOBILE = "18rem";
+const SIDEBAR_WIDTH_ICON = "3rem";
+const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+const MOBILE_BREAKPOINT = 768;
+
+type SidebarContext = {
+	state: "expanded" | "collapsed";
+	open: boolean;
+	setOpen: (open: boolean) => void;
+	openMobile: boolean;
+	setOpenMobile: (open: boolean) => void;
+	isMobile: boolean;
+	toggleSidebar: () => void;
+};
+
+const SidebarContext = createContext<Accessor<SidebarContext> | null>(null);
+
+function useSidebar() {
+	const context = useContext(SidebarContext);
+
+	if (!context) {
+		throw new Error("useSidebar must be used within a SidebarProvider");
+	}
+
+	return context;
+}
+
+export function useIsMobile() {
+	const [isMobile, setIsMobile] = createSignal<boolean>(false);
+
+	onMount(() => {
+		const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+		const onChange = () => {
+			setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+		};
+
+		mql.addEventListener("change", onChange);
+		setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+
+		onCleanup(() => mql.removeEventListener("change", onChange));
+	});
+
+	return isMobile;
+}
+
+type SidebarProviderProps = {
+	defaultOpen?: boolean;
+	open?: boolean;
+	onOpenChange?: (open: boolean) => void;
+	children: JSX.Element;
+} & ComponentProps<"div">;
+
+const SidebarProvider = (props: SidebarProviderProps) => {
+	const isMobile = useIsMobile();
+	const [openMobile, setOpenMobile] = createSignal(false);
+
+	const [local, rest] = splitProps(props, [
+		"open",
+		"class",
+		"style",
+		"defaultOpen",
+		"onOpenChange",
+		"children",
+	]);
+
+	// This is the internal state of the sidebar.
+	// We use local.open and local.onOpenChange for control from outside the component.
+	const [_open, _setOpen] = createSignal(local.defaultOpen ?? true);
+	const open = () => local.open ?? _open();
+
+	const setOpen = (value: boolean | ((value: boolean) => boolean)) => {
+		const openState = typeof value === "function" ? value(open()) : open();
+		_setOpen(openState);
+		local.onOpenChange?.(open());
+
+		document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+	};
+
+	const toggleSidebar = () => {
+		isMobile() ? setOpenMobile(!openMobile()) : setOpen(!open());
+	};
+
+	// Adds a keyboard shortcut to toggle the sidebar
+	onMount(() => {
+		const handleKeyDown = (event: KeyboardEvent) => {
+			if (
+				event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+				(event.metaKey || event.ctrlKey)
+			) {
+				event.preventDefault();
+				toggleSidebar();
+			}
+		};
+
+		window.addEventListener("keydown", handleKeyDown);
+		onCleanup(() => window.removeEventListener("keydown", handleKeyDown));
+	});
+
+	// We add a state so that we can do data-state="expanded" or "collapsed".
+	// This makes it easier to style the sidebar with Tailwind classes.
+	const state = open() ? "expanded" : "collapsed";
+
+	const contextValue = createMemo<SidebarContext>(() => ({
+		state,
+		open: open(),
+		setOpen,
+		isMobile: isMobile(),
+		openMobile: openMobile(),
+		setOpenMobile,
+		toggleSidebar,
+	}));
+
+	return (
+		<SidebarContext.Provider value={contextValue}>
+			<div
+				class={cn(
+					"group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar",
+					local.class,
+				)}
+				style={{
+					"--sidebar-width": SIDEBAR_WIDTH,
+					"--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+					...(local.style as JSX.CSSProperties),
+				}}
+				{...rest}
+			>
+				{local.children}
+			</div>
+		</SidebarContext.Provider>
+	);
+};
+
+type SidebarProps = {
+	side?: "left" | "right";
+	variant?: "sidebar" | "floating" | "inset";
+	collapsible?: "offcanvas" | "icon" | "none";
+	children: JSX.Element;
+} & ComponentProps<"div">;
+
+const Sidebar = (props: SidebarProps) => {
+	const mergedProps = mergeProps(
+		{
+			side: "left" as const,
+			variant: "sidebar" as const,
+			collapsible: "offcanvas" as const,
+		},
+		props,
+	);
+
+	const [local, rest] = splitProps<
+		SidebarProps,
+		[["class", "children", "side", "variant", "collapsible"]]
+	>(mergedProps, ["class", "children", "side", "variant", "collapsible"]);
+
+	const context = useSidebar();
+
+	if (local.collapsible === "none") {
+		return (
+			<div
+				class={cn(
+					"bg-sidebar text-sidebar-foreground flex h-full w-[--sidebar-width] flex-col",
+					local.class,
+				)}
+				{...rest}
+			>
+				{local.children}
+			</div>
+		);
+	}
+
+	if (context().isMobile) {
+		return (
+			<Sheet
+				open={context().openMobile}
+				onOpenChange={context().setOpenMobile}
+				{...props}
+			>
+				<SheetContent
+					data-sidebar="sidebar"
+					data-mobile="true"
+					class="bg-sidebar text-sidebar-foreground w-[--sidebar-width] p-0 [&>button]:hidden"
+					style={
+						{
+							"--sidebar-width": SIDEBAR_WIDTH_MOBILE,
+						} as JSX.CSSProperties
+					}
+					side={local.side}
+				>
+					<div class="flex h-full w-full flex-col">{local.children}</div>
+				</SheetContent>
+			</Sheet>
+		);
+	}
+
+	return (
+		<div
+			class="text-sidebar-foreground group peer hidden md:block"
+			data-state={context().state}
+			data-collapsible={
+				context().state === "collapsed" ? local.collapsible : ""
+			}
+			data-variant={local.variant}
+			data-side={local.side}
+		>
+			{/* This is what handles the sidebar gap on desktop */}
+			<div
+				class={cn(
+					"relative h-svh w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear",
+					"group-data-[collapsible=offcanvas]:w-0",
+					"group-data-[side=right]:rotate-180",
+					local.variant === "floating" || local.variant === "inset"
+						? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]"
+						: "group-data-[collapsible=icon]:w-[--sidebar-width-icon]",
+				)}
+			/>
+			<div
+				class={cn(
+					"fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex",
+					local.side === "left"
+						? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
+						: "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+					// Adjust the padding for floating and inset variants.
+					local.variant === "floating" || local.variant === "inset"
+						? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]"
+						: "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
+					local.class,
+				)}
+				{...rest}
+			>
+				<div
+					data-sidebar="sidebar"
+					class="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow"
+				>
+					{local.children}
+				</div>
+			</div>
+		</div>
+	);
+};
+
+type SidebarTriggerProps = ComponentProps<"button">;
+
+const SidebarTrigger = (props: SidebarTriggerProps) => {
+	const context = useSidebar();
+
+	const [local, rest] = splitProps<SidebarTriggerProps, [["class", "onClick"]]>(
+		props,
+		["class", "onClick"],
+	);
+
+	return (
+		<Button
+			data-sidebar="trigger"
+			variant="ghost"
+			size="icon"
+			class={cn("h-7 w-7", local.class)}
+			onClick={[local.onClick, () => context().toggleSidebar()]}
+			{...rest}
+		>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width="24"
+				height="24"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				class="lucide lucide-panel-left"
+			>
+				<title>Menu Icon</title>
+				<rect width="18" height="18" x="3" y="3" rx="2" />
+				<path d="M9 3v18" />
+			</svg>
+			<span class="sr-only">Toggle Sidebar</span>
+		</Button>
+	);
+};
+
+const SidebarRail = (props: ComponentProps<"button">) => {
+	const context = useSidebar();
+
+	const [local, rest] = splitProps<SidebarTriggerProps, [["class"]]>(props, [
+		"class",
+	]);
+
+	return (
+		<button
+			data-sidebar="rail"
+			aria-label="Toggle Sidebar"
+			tabIndex={-1}
+			onClick={context().toggleSidebar}
+			title="Toggle Sidebar"
+			class={cn(
+				"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
+				"[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
+				"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+				"group-data-[collapsible=offcanvas]:hover:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
+				"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+				"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+				local.class,
+			)}
+			{...rest}
+		/>
+	);
+};
+
+type SidebarInsetProps = ComponentProps<"main">;
+
+const SidebarInset = (props: SidebarInsetProps) => {
+	const [local, rest] = splitProps<SidebarInsetProps, [["class"]]>(props, [
+		"class",
+	]);
+
+	return (
+		<main
+			class={cn(
+				"bg-background relative flex min-h-svh flex-1 flex-col",
+				"peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
+				local.class,
+			)}
+			{...rest}
+		/>
+	);
+};
+
+type SidebarInputProps = ComponentProps<typeof TextField>;
+const SidebarInput = (props: SidebarInputProps) => {
+	const [local, rest] = splitProps<SidebarInputProps, [["class"]]>(props, [
+		"class",
+	]);
+
+	return (
+		<TextField
+			data-sidebar="input"
+			class={cn(
+				"bg-background focus-visible:ring-sidebar-ring h-8 w-full shadow-none focus-visible:ring-2",
+				local.class,
+			)}
+			{...rest}
+		/>
+	);
+};
+
+type SidebarHeaderProps = ComponentProps<"div">;
+
+const SidebarHeader = (props: SidebarHeaderProps) => {
+	const [local, rest] = splitProps<SidebarHeaderProps, [["class"]]>(props, [
+		"class",
+	]);
+
+	return (
+		<div
+			data-sidebar="header"
+			class={cn("flex flex-col gap-2 p-2", local.class)}
+			{...rest}
+		/>
+	);
+};
+
+type SidebarFooterProps = ComponentProps<"div">;
+
+const SidebarFooter = (props: SidebarFooterProps) => {
+	const [local, rest] = splitProps<SidebarFooterProps, [["class"]]>(props, [
+		"class",
+	]);
+
+	return (
+		<div
+			data-sidebar="footer"
+			class={cn("flex flex-col gap-2 p-2", local.class)}
+			{...rest}
+		/>
+	);
+};
+
+type SidebarSeparatorProps = ComponentProps<typeof Separator>;
+
+const SidebarSeparator = (props: SidebarSeparatorProps) => {
+	const [local, rest] = splitProps<SidebarSeparatorProps, [["class"]]>(props, [
+		"class",
+	]);
+
+	return (
+		<Separator
+			data-sidebar="separator"
+			className={cn("bg-sidebar-border mx-2 w-auto", local.class)}
+			{...rest}
+		/>
+	);
+};
+
+type SidebarContentProps = ComponentProps<"div">;
+
+const SidebarContent = (props: SidebarContentProps) => {
+	const [local, rest] = splitProps<SidebarContentProps, [["class"]]>(props, [
+		"class",
+	]);
+	return (
+		<div
+			data-sidebar="content"
+			class={cn(
+				"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+				local.class,
+			)}
+			{...rest}
+		/>
+	);
+};
+
+type SidebarGroupProps = ComponentProps<"div">;
+
+const SidebarGroup = (props: SidebarGroupProps) => {
+	const [local, rest] = splitProps<SidebarGroupProps, [["class"]]>(props, [
+		"class",
+	]);
+	return (
+		<div
+			data-sidebar="group"
+			class={cn("relative flex w-full min-w-0 flex-col p-2", local.class)}
+			{...rest}
+		/>
+	);
+};
+
+type SidebarGroupLabelProps = ComponentProps<"div">;
+
+const SidebarGroupLabel = (props: SidebarGroupLabelProps) => {
+	const [local, rest] = splitProps<SidebarGroupLabelProps, [["class"]]>(props, [
+		"class",
+	]);
+	return (
+		<div
+			data-sidebar="group-label"
+			class={cn(
+				"text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-none transition-[margin,opa] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+				"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+				local.class,
+			)}
+			{...rest}
+		/>
+	);
+};
+
+type SidebarGroupActionProps = ComponentProps<"button">;
+
+const SidebarGroupAction = (props: SidebarGroupActionProps) => {
+	const [local, rest] = splitProps<SidebarGroupActionProps, [["class"]]>(
+		props,
+		["class"],
+	);
+	return (
+		<button
+			data-sidebar="group-action"
+			class={cn(
+				"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-none transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+				// Increases the hit area of the button on mobile.
+				"after:absolute after:-inset-2 after:md:hidden",
+				"group-data-[collapsible=icon]:hidden",
+				local.class,
+			)}
+			{...rest}
+		/>
+	);
+};
+
+type SidebarGroupContentProps = ComponentProps<"div">;
+
+const SidebarGroupContent = (props: SidebarGroupContentProps) => {
+	const [local, rest] = splitProps<SidebarGroupContentProps, [["class"]]>(
+		props,
+		["class"],
+	);
+	return (
+		<div
+			data-sidebar="group-content"
+			class={cn("w-full text-sm", local.class)}
+			{...rest}
+		/>
+	);
+};
+
+type SidebarMenuProps = ComponentProps<"ul">;
+
+const SidebarMenu = (props: SidebarMenuProps) => {
+	const [local, rest] = splitProps<SidebarMenuProps, [["class"]]>(props, [
+		"class",
+	]);
+	return (
+		<ul
+			data-sidebar="menu"
+			class={cn("flex w-full min-w-0 flex-col gap-1", local.class)}
+			{...rest}
+		/>
+	);
+};
+
+type SidebarMenuItemProps = ComponentProps<"li">;
+
+const SidebarMenuItem = (props: SidebarMenuItemProps) => {
+	const [local, rest] = splitProps<SidebarMenuItemProps, [["class"]]>(props, [
+		"class",
+	]);
+	return (
+		<li
+			data-sidebar="menu-item"
+			class={cn("group/menu-item relative", local.class)}
+			{...rest}
+		/>
+	);
+};
+
+const sidebarMenuButtonVariants = cva(
+	"peer/menu-button ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none transition-[width,height,padding] focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:font-medium group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+	{
+		variants: {
+			variant: {
+				default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+				outline:
+					"bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+			},
+			size: {
+				default: "h-8 text-sm",
+				sm: "h-7 text-xs",
+				lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	},
+);
+
+type SidebarMenuButtonProps = ComponentProps<"button"> & {
+	isActive?: boolean;
+	tooltip?: string | ComponentProps<typeof TooltipContent>;
+} & VariantProps<typeof sidebarMenuButtonVariants>;
+
+const SidebarMenuButton = (props: SidebarMenuButtonProps) => {
+	const context = useSidebar();
+	const mergedProps = mergeProps(
+		{
+			isActive: false,
+			variant: "default" as const,
+			size: "default" as const,
+		},
+		props,
+	);
+
+	const [local, rest] = splitProps<
+		SidebarMenuButtonProps,
+		[["children", "tooltip", "isActive", "variant", "size", "class"]]
+	>(mergedProps, [
+		"children",
+		"tooltip",
+		"isActive",
+		"variant",
+		"size",
+		"class",
+	]);
+
+	const button = (
+		<button
+			class={cn(
+				sidebarMenuButtonVariants({
+					variant: local.variant,
+					size: local.size,
+				}),
+				local.class,
+			)}
+			data-sidebar="menu-button"
+			data-size={local.size}
+			data-active={local.isActive}
+			{...rest}
+		/>
+	);
+
+	if (!local.tooltip) {
+		return button;
+	}
+
+	if (typeof local.tooltip === "string") {
+		local.tooltip = {
+			children: local.tooltip,
+		};
+	}
+
+	return (
+		<Tooltip>
+			<TooltipTrigger>{button}</TooltipTrigger>
+			<TooltipContent
+				side="right"
+				align="center"
+				hidden={context().state !== "collapsed" || context().isMobile}
+				{...local.tooltip}
+			/>
+		</Tooltip>
+	);
+};
+
+type SidebarMenuActionProps = ComponentProps<"button"> & {
+	showOnHover?: boolean;
+};
+const SidebarMenuAction = (props: SidebarMenuActionProps) => {
+	const [local, rest] = splitProps<
+		SidebarMenuActionProps,
+		[["class", "showOnHover"]]
+	>(props, ["class", "showOnHover"]);
+
+	return (
+		<button
+			data-sidebar="menu-action"
+			class={cn(
+				"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-none transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+				// Increases the hit area of the button on mobile.
+				"after:absolute after:-inset-2 after:md:hidden",
+				"peer-data-[size=sm]/menu-button:top-1",
+				"peer-data-[size=default]/menu-button:top-1.5",
+				"peer-data-[size=lg]/menu-button:top-2.5",
+				"group-data-[collapsible=icon]:hidden",
+				local.showOnHover &&
+					"peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
+				local.class,
+			)}
+			{...rest}
+		/>
+	);
+};
+
+type SidebarMenuBadgeProps = ComponentProps<"div">;
+
+const SidebarMenuBadge = (props: SidebarMenuBadgeProps) => {
+	const [local, rest] = splitProps<SidebarMenuBadgeProps, [["class"]]>(props, [
+		"class",
+	]);
+	return (
+		<div
+			data-sidebar="menu-badge"
+			class={cn(
+				"text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums",
+				"peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+				"peer-data-[size=sm]/menu-button:top-1",
+				"peer-data-[size=default]/menu-button:top-1.5",
+				"peer-data-[size=lg]/menu-button:top-2.5",
+				"group-data-[collapsible=icon]:hidden",
+				local.class,
+			)}
+			{...rest}
+		/>
+	);
+};
+
+type SidebarMenuSkeletonProps = ComponentProps<"div"> & { showIcon?: boolean };
+
+const SidebarMenuSkeleton = (props: SidebarMenuSkeletonProps) => {
+	const [local, rest] = splitProps<
+		SidebarMenuSkeletonProps,
+		[["class", "showIcon"]]
+	>(props, ["class", "showIcon"]);
+
+	const width = () => `${Math.floor(Math.random() * 40) + 50}%`;
+
+	return (
+		<div
+			data-sidebar="menu-skeleton"
+			class={cn("flex h-8 items-center gap-2 rounded-md px-2", local.class)}
+			{...rest}
+		>
+			<Show when={local.showIcon}>
+				<Skeleton class="size-4 rounded-md" data-sidebar="menu-skeleton-icon" />
+			</Show>
+			<Skeleton
+				class="h-4 max-w-[--skeleton-width] flex-1"
+				data-sidebar="menu-skeleton-text"
+				style={
+					{
+						"--skeleton-width": width(),
+					} as JSX.CSSProperties
+				}
+			/>
+		</div>
+	);
+};
+
+type SidebarMenuSubProps = ComponentProps<"ul">;
+const SidebarMenuSub = (props: SidebarMenuSubProps) => {
+	const [local, rest] = splitProps<SidebarMenuSubProps, [["class"]]>(props, [
+		"class",
+	]);
+
+	return (
+		<ul
+			data-sidebar="menu-sub"
+			class={cn(
+				"border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
+				"group-data-[collapsible=icon]:hidden",
+				local.class,
+			)}
+			{...rest}
+		/>
+	);
+};
+
+type SidebarMenuSubItemProps = ComponentProps<"li">;
+
+const SidebarMenuSubItem = (props: SidebarMenuSubItemProps) => {
+	return <li {...props} />;
+};
+
+type SidebarMenuSubButtonProps = ComponentProps<"a"> & {
+	size?: "sm" | "md";
+	isActive?: boolean;
+};
+
+const SidebarMenuSubButton = (props: SidebarMenuSubButtonProps) => {
+	const mergedProps = mergeProps(
+		{
+			size: "md" as const,
+			isActive: false,
+		},
+		props,
+	);
+
+	const [local, rest] = splitProps<
+		SidebarMenuSubButtonProps,
+		[["class", "size", "isActive"]]
+	>(mergedProps, ["class", "size", "isActive"]);
+
+	return (
+		<a
+			data-sidebar="menu-sub-button"
+			data-size={local.size}
+			data-active={local.isActive}
+			class={cn(
+				"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+				"data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+				local.size === "sm" && "text-xs",
+				local.size === "md" && "text-sm",
+				"group-data-[collapsible=icon]:hidden",
+				local.class,
+			)}
+			{...rest}
+		/>
+	);
+};
+
+export {
+	Sidebar,
+	SidebarContent,
+	SidebarFooter,
+	SidebarGroup,
+	SidebarGroupAction,
+	SidebarGroupContent,
+	SidebarGroupLabel,
+	SidebarHeader,
+	SidebarInput,
+	SidebarInset,
+	SidebarMenu,
+	SidebarMenuAction,
+	SidebarMenuBadge,
+	SidebarMenuButton,
+	SidebarMenuItem,
+	SidebarMenuSkeleton,
+	SidebarMenuSub,
+	SidebarMenuSubButton,
+	SidebarMenuSubItem,
+	SidebarProvider,
+	SidebarRail,
+	SidebarSeparator,
+	SidebarTrigger,
+	useSidebar,
+};
diff --git a/packages/unocss/ui/sidebar.tsx b/packages/unocss/ui/sidebar.tsx
new file mode 100644
index 0000000..6f25754
--- /dev/null
+++ b/packages/unocss/ui/sidebar.tsx
@@ -0,0 +1,805 @@
+import { Button } from "@repo/unocss/ui/button";
+import { Separator } from "@repo/unocss/ui/separator";
+import { Sheet, SheetContent } from "@repo/unocss/ui/sheet";
+import { TextField } from "@repo/unocss/ui/textfield";
+
+import { cn } from "@/libs/cn";
+import { Skeleton } from "@repo/unocss/ui/skeleton";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipTrigger,
+} from "@repo/unocss/ui/tooltip";
+import { type VariantProps, cva } from "class-variance-authority";
+import {
+	type Accessor,
+	type ComponentProps,
+	type JSX,
+	Show,
+	createContext,
+	createMemo,
+	createSignal,
+	mergeProps,
+	onCleanup,
+	onMount,
+	splitProps,
+	useContext,
+} from "solid-js";
+
+const SIDEBAR_COOKIE_NAME = "sidebar:state";
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+const SIDEBAR_WIDTH = "16rem";
+const SIDEBAR_WIDTH_MOBILE = "18rem";
+const SIDEBAR_WIDTH_ICON = "3rem";
+const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+const MOBILE_BREAKPOINT = 768;
+
+type SidebarContext = {
+	state: "expanded" | "collapsed";
+	open: boolean;
+	setOpen: (open: boolean) => void;
+	openMobile: boolean;
+	setOpenMobile: (open: boolean) => void;
+	isMobile: boolean;
+	toggleSidebar: () => void;
+};
+
+const SidebarContext = createContext<Accessor<SidebarContext> | null>(null);
+
+function useSidebar() {
+	const context = useContext(SidebarContext);
+
+	if (!context) {
+		throw new Error("useSidebar must be used within a SidebarProvider");
+	}
+
+	return context;
+}
+
+export function useIsMobile() {
+	const [isMobile, setIsMobile] = createSignal<boolean>(false);
+
+	onMount(() => {
+		const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+		const onChange = () => {
+			setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+		};
+
+		mql.addEventListener("change", onChange);
+		setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+
+		onCleanup(() => mql.removeEventListener("change", onChange));
+	});
+
+	return isMobile;
+}
+
+type SidebarProviderProps = {
+	defaultOpen?: boolean;
+	open?: boolean;
+	onOpenChange?: (open: boolean) => void;
+	children: JSX.Element;
+} & ComponentProps<"div">;
+
+const SidebarProvider = (props: SidebarProviderProps) => {
+	const isMobile = useIsMobile();
+	const [openMobile, setOpenMobile] = createSignal(false);
+
+	const [local, rest] = splitProps(props, [
+		"open",
+		"class",
+		"style",
+		"defaultOpen",
+		"onOpenChange",
+		"children",
+	]);
+
+	// This is the internal state of the sidebar.
+	// We use local.open and local.onOpenChange for control from outside the component.
+	const [_open, _setOpen] = createSignal(local.defaultOpen ?? true);
+	const open = () => local.open ?? _open();
+
+	const setOpen = (value: boolean | ((value: boolean) => boolean)) => {
+		const openState = typeof value === "function" ? value(open()) : open();
+		_setOpen(openState);
+		local.onOpenChange?.(open());
+
+		document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+	};
+
+	const toggleSidebar = () => {
+		isMobile() ? setOpenMobile(!openMobile()) : setOpen(!open());
+	};
+
+	// Adds a keyboard shortcut to toggle the sidebar
+	onMount(() => {
+		const handleKeyDown = (event: KeyboardEvent) => {
+			if (
+				event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+				(event.metaKey || event.ctrlKey)
+			) {
+				event.preventDefault();
+				toggleSidebar();
+			}
+		};
+
+		window.addEventListener("keydown", handleKeyDown);
+		onCleanup(() => window.removeEventListener("keydown", handleKeyDown));
+	});
+
+	// We add a state so that we can do data-state="expanded" or "collapsed".
+	// This makes it easier to style the sidebar with Tailwind classes.
+	const state = open() ? "expanded" : "collapsed";
+
+	const contextValue = createMemo<SidebarContext>(() => ({
+		state,
+		open: open(),
+		setOpen,
+		isMobile: isMobile(),
+		openMobile: openMobile(),
+		setOpenMobile,
+		toggleSidebar,
+	}));
+
+	return (
+		<SidebarContext.Provider value={contextValue}>
+			<div
+				class={cn(
+					"group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar",
+					local.class,
+				)}
+				style={{
+					"--sidebar-width": SIDEBAR_WIDTH,
+					"--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+					...(local.style as JSX.CSSProperties),
+				}}
+				{...rest}
+			>
+				{local.children}
+			</div>
+		</SidebarContext.Provider>
+	);
+};
+
+type SidebarProps = {
+	side?: "left" | "right";
+	variant?: "sidebar" | "floating" | "inset";
+	collapsible?: "offcanvas" | "icon" | "none";
+	children: JSX.Element;
+} & ComponentProps<"div">;
+
+const Sidebar = (props: SidebarProps) => {
+	const mergedProps = mergeProps(
+		{
+			side: "left" as const,
+			variant: "sidebar" as const,
+			collapsible: "offcanvas" as const,
+		},
+		props,
+	);
+
+	const [local, rest] = splitProps<
+		SidebarProps,
+		[["class", "children", "side", "variant", "collapsible"]]
+	>(mergedProps, ["class", "children", "side", "variant", "collapsible"]);
+
+	const context = useSidebar();
+
+	if (local.collapsible === "none") {
+		return (
+			<div
+				class={cn(
+					"bg-sidebar text-sidebar-foreground flex h-full w-[--sidebar-width] flex-col",
+					local.class,
+				)}
+				{...rest}
+			>
+				{local.children}
+			</div>
+		);
+	}
+
+	if (context().isMobile) {
+		return (
+			<Sheet
+				open={context().openMobile}
+				onOpenChange={context().setOpenMobile}
+				{...props}
+			>
+				<SheetContent
+					data-sidebar="sidebar"
+					data-mobile="true"
+					class="bg-sidebar text-sidebar-foreground w-[--sidebar-width] p-0 [&>button]:hidden"
+					style={
+						{
+							"--sidebar-width": SIDEBAR_WIDTH_MOBILE,
+						} as JSX.CSSProperties
+					}
+					side={local.side}
+				>
+					<div class="flex h-full w-full flex-col">{local.children}</div>
+				</SheetContent>
+			</Sheet>
+		);
+	}
+
+	return (
+		<div
+			class="text-sidebar-foreground group peer hidden md:block"
+			data-state={context().state}
+			data-collapsible={
+				context().state === "collapsed" ? local.collapsible : ""
+			}
+			data-variant={local.variant}
+			data-side={local.side}
+		>
+			{/* This is what handles the sidebar gap on desktop */}
+			<div
+				class={cn(
+					"relative h-svh w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear",
+					"group-data-[collapsible=offcanvas]:w-0",
+					"group-data-[side=right]:rotate-180",
+					local.variant === "floating" || local.variant === "inset"
+						? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]"
+						: "group-data-[collapsible=icon]:w-[--sidebar-width-icon]",
+				)}
+			/>
+			<div
+				class={cn(
+					"fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex",
+					local.side === "left"
+						? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
+						: "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+					// Adjust the padding for floating and inset variants.
+					local.variant === "floating" || local.variant === "inset"
+						? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]"
+						: "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
+					local.class,
+				)}
+				{...rest}
+			>
+				<div
+					data-sidebar="sidebar"
+					class="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow"
+				>
+					{local.children}
+				</div>
+			</div>
+		</div>
+	);
+};
+
+type SidebarTriggerProps = ComponentProps<"button">;
+
+const SidebarTrigger = (props: SidebarTriggerProps) => {
+	const context = useSidebar();
+
+	const [local, rest] = splitProps<SidebarTriggerProps, [["class", "onClick"]]>(
+		props,
+		["class", "onClick"],
+	);
+
+	return (
+		<Button
+			data-sidebar="trigger"
+			variant="ghost"
+			size="icon"
+			class={cn("h-7 w-7", local.class)}
+			onClick={[local.onClick, () => context().toggleSidebar()]}
+			{...rest}
+		>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width="24"
+				height="24"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				class="lucide lucide-panel-left"
+			>
+				<title>Menu Icon</title>
+				<rect width="18" height="18" x="3" y="3" rx="2" />
+				<path d="M9 3v18" />
+			</svg>
+			<span class="sr-only">Toggle Sidebar</span>
+		</Button>
+	);
+};
+
+const SidebarRail = (props: ComponentProps<"button">) => {
+	const context = useSidebar();
+
+	const [local, rest] = splitProps<SidebarTriggerProps, [["class"]]>(props, [
+		"class",
+	]);
+
+	return (
+		<button
+			data-sidebar="rail"
+			aria-label="Toggle Sidebar"
+			tabIndex={-1}
+			onClick={context().toggleSidebar}
+			title="Toggle Sidebar"
+			class={cn(
+				"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
+				"[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
+				"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+				"group-data-[collapsible=offcanvas]:hover:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
+				"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+				"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+				local.class,
+			)}
+			{...rest}
+		/>
+	);
+};
+
+type SidebarInsetProps = ComponentProps<"main">;
+
+const SidebarInset = (props: SidebarInsetProps) => {
+	const [local, rest] = splitProps<SidebarInsetProps, [["class"]]>(props, [
+		"class",
+	]);
+
+	return (
+		<main
+			class={cn(
+				"bg-background relative flex min-h-svh flex-1 flex-col",
+				"peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
+				local.class,
+			)}
+			{...rest}
+		/>
+	);
+};
+
+type SidebarInputProps = ComponentProps<typeof TextField>;
+const SidebarInput = (props: SidebarInputProps) => {
+	const [local, rest] = splitProps<SidebarInputProps, [["class"]]>(props, [
+		"class",
+	]);
+
+	return (
+		<TextField
+			data-sidebar="input"
+			class={cn(
+				"bg-background focus-visible:ring-sidebar-ring h-8 w-full shadow-none focus-visible:ring-2",
+				local.class,
+			)}
+			{...rest}
+		/>
+	);
+};
+
+type SidebarHeaderProps = ComponentProps<"div">;
+
+const SidebarHeader = (props: SidebarHeaderProps) => {
+	const [local, rest] = splitProps<SidebarHeaderProps, [["class"]]>(props, [
+		"class",
+	]);
+
+	return (
+		<div
+			data-sidebar="header"
+			class={cn("flex flex-col gap-2 p-2", local.class)}
+			{...rest}
+		/>
+	);
+};
+
+type SidebarFooterProps = ComponentProps<"div">;
+
+const SidebarFooter = (props: SidebarFooterProps) => {
+	const [local, rest] = splitProps<SidebarFooterProps, [["class"]]>(props, [
+		"class",
+	]);
+
+	return (
+		<div
+			data-sidebar="footer"
+			class={cn("flex flex-col gap-2 p-2", local.class)}
+			{...rest}
+		/>
+	);
+};
+
+type SidebarSeparatorProps = ComponentProps<typeof Separator>;
+
+const SidebarSeparator = (props: SidebarSeparatorProps) => {
+	const [local, rest] = splitProps<SidebarSeparatorProps, [["class"]]>(props, [
+		"class",
+	]);
+
+	return (
+		<Separator
+			data-sidebar="separator"
+			className={cn("bg-sidebar-border mx-2 w-auto", local.class)}
+			{...rest}
+		/>
+	);
+};
+
+type SidebarContentProps = ComponentProps<"div">;
+
+const SidebarContent = (props: SidebarContentProps) => {
+	const [local, rest] = splitProps<SidebarContentProps, [["class"]]>(props, [
+		"class",
+	]);
+	return (
+		<div
+			data-sidebar="content"
+			class={cn(
+				"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+				local.class,
+			)}
+			{...rest}
+		/>
+	);
+};
+
+type SidebarGroupProps = ComponentProps<"div">;
+
+const SidebarGroup = (props: SidebarGroupProps) => {
+	const [local, rest] = splitProps<SidebarGroupProps, [["class"]]>(props, [
+		"class",
+	]);
+	return (
+		<div
+			data-sidebar="group"
+			class={cn("relative flex w-full min-w-0 flex-col p-2", local.class)}
+			{...rest}
+		/>
+	);
+};
+
+type SidebarGroupLabelProps = ComponentProps<"div">;
+
+const SidebarGroupLabel = (props: SidebarGroupLabelProps) => {
+	const [local, rest] = splitProps<SidebarGroupLabelProps, [["class"]]>(props, [
+		"class",
+	]);
+	return (
+		<div
+			data-sidebar="group-label"
+			class={cn(
+				"text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-none transition-[margin,opa] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+				"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+				local.class,
+			)}
+			{...rest}
+		/>
+	);
+};
+
+type SidebarGroupActionProps = ComponentProps<"button">;
+
+const SidebarGroupAction = (props: SidebarGroupActionProps) => {
+	const [local, rest] = splitProps<SidebarGroupActionProps, [["class"]]>(
+		props,
+		["class"],
+	);
+	return (
+		<button
+			data-sidebar="group-action"
+			class={cn(
+				"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-none transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+				// Increases the hit area of the button on mobile.
+				"after:absolute after:-inset-2 after:md:hidden",
+				"group-data-[collapsible=icon]:hidden",
+				local.class,
+			)}
+			{...rest}
+		/>
+	);
+};
+
+type SidebarGroupContentProps = ComponentProps<"div">;
+
+const SidebarGroupContent = (props: SidebarGroupContentProps) => {
+	const [local, rest] = splitProps<SidebarGroupContentProps, [["class"]]>(
+		props,
+		["class"],
+	);
+	return (
+		<div
+			data-sidebar="group-content"
+			class={cn("w-full text-sm", local.class)}
+			{...rest}
+		/>
+	);
+};
+
+type SidebarMenuProps = ComponentProps<"ul">;
+
+const SidebarMenu = (props: SidebarMenuProps) => {
+	const [local, rest] = splitProps<SidebarMenuProps, [["class"]]>(props, [
+		"class",
+	]);
+	return (
+		<ul
+			data-sidebar="menu"
+			class={cn("flex w-full min-w-0 flex-col gap-1", local.class)}
+			{...rest}
+		/>
+	);
+};
+
+type SidebarMenuItemProps = ComponentProps<"li">;
+
+const SidebarMenuItem = (props: SidebarMenuItemProps) => {
+	const [local, rest] = splitProps<SidebarMenuItemProps, [["class"]]>(props, [
+		"class",
+	]);
+	return (
+		<li
+			data-sidebar="menu-item"
+			class={cn("group/menu-item relative", local.class)}
+			{...rest}
+		/>
+	);
+};
+
+const sidebarMenuButtonVariants = cva(
+	"peer/menu-button ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none transition-[width,height,padding] focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:font-medium group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+	{
+		variants: {
+			variant: {
+				default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+				outline:
+					"bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+			},
+			size: {
+				default: "h-8 text-sm",
+				sm: "h-7 text-xs",
+				lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	},
+);
+
+type SidebarMenuButtonProps = ComponentProps<"button"> & {
+	isActive?: boolean;
+	tooltip?: string | ComponentProps<typeof TooltipContent>;
+} & VariantProps<typeof sidebarMenuButtonVariants>;
+
+const SidebarMenuButton = (props: SidebarMenuButtonProps) => {
+	const context = useSidebar();
+	const mergedProps = mergeProps(
+		{
+			isActive: false,
+			variant: "default" as const,
+			size: "default" as const,
+		},
+		props,
+	);
+
+	const [local, rest] = splitProps<
+		SidebarMenuButtonProps,
+		[["children", "tooltip", "isActive", "variant", "size", "class"]]
+	>(mergedProps, [
+		"children",
+		"tooltip",
+		"isActive",
+		"variant",
+		"size",
+		"class",
+	]);
+
+	const button = (
+		<button
+			class={cn(
+				sidebarMenuButtonVariants({
+					variant: local.variant,
+					size: local.size,
+				}),
+				local.class,
+			)}
+			data-sidebar="menu-button"
+			data-size={local.size}
+			data-active={local.isActive}
+			{...rest}
+		/>
+	);
+
+	if (!local.tooltip) {
+		return button;
+	}
+
+	if (typeof local.tooltip === "string") {
+		local.tooltip = {
+			children: local.tooltip,
+		};
+	}
+
+	return (
+		<Tooltip>
+			<TooltipTrigger>{button}</TooltipTrigger>
+			<TooltipContent
+				side="right"
+				align="center"
+				hidden={context().state !== "collapsed" || context().isMobile}
+				{...local.tooltip}
+			/>
+		</Tooltip>
+	);
+};
+
+type SidebarMenuActionProps = ComponentProps<"button"> & {
+	showOnHover?: boolean;
+};
+const SidebarMenuAction = (props: SidebarMenuActionProps) => {
+	const [local, rest] = splitProps<
+		SidebarMenuActionProps,
+		[["class", "showOnHover"]]
+	>(props, ["class", "showOnHover"]);
+
+	return (
+		<button
+			data-sidebar="menu-action"
+			class={cn(
+				"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-none transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+				// Increases the hit area of the button on mobile.
+				"after:absolute after:-inset-2 after:md:hidden",
+				"peer-data-[size=sm]/menu-button:top-1",
+				"peer-data-[size=default]/menu-button:top-1.5",
+				"peer-data-[size=lg]/menu-button:top-2.5",
+				"group-data-[collapsible=icon]:hidden",
+				local.showOnHover &&
+					"peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
+				local.class,
+			)}
+			{...rest}
+		/>
+	);
+};
+
+type SidebarMenuBadgeProps = ComponentProps<"div">;
+
+const SidebarMenuBadge = (props: SidebarMenuBadgeProps) => {
+	const [local, rest] = splitProps<SidebarMenuBadgeProps, [["class"]]>(props, [
+		"class",
+	]);
+	return (
+		<div
+			data-sidebar="menu-badge"
+			class={cn(
+				"text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums",
+				"peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+				"peer-data-[size=sm]/menu-button:top-1",
+				"peer-data-[size=default]/menu-button:top-1.5",
+				"peer-data-[size=lg]/menu-button:top-2.5",
+				"group-data-[collapsible=icon]:hidden",
+				local.class,
+			)}
+			{...rest}
+		/>
+	);
+};
+
+type SidebarMenuSkeletonProps = ComponentProps<"div"> & { showIcon?: boolean };
+
+const SidebarMenuSkeleton = (props: SidebarMenuSkeletonProps) => {
+	const [local, rest] = splitProps<
+		SidebarMenuSkeletonProps,
+		[["class", "showIcon"]]
+	>(props, ["class", "showIcon"]);
+
+	const width = () => `${Math.floor(Math.random() * 40) + 50}%`;
+
+	return (
+		<div
+			data-sidebar="menu-skeleton"
+			class={cn("flex h-8 items-center gap-2 rounded-md px-2", local.class)}
+			{...rest}
+		>
+			<Show when={local.showIcon}>
+				<Skeleton class="size-4 rounded-md" data-sidebar="menu-skeleton-icon" />
+			</Show>
+			<Skeleton
+				class="h-4 max-w-[--skeleton-width] flex-1"
+				data-sidebar="menu-skeleton-text"
+				style={
+					{
+						"--skeleton-width": width(),
+					} as JSX.CSSProperties
+				}
+			/>
+		</div>
+	);
+};
+
+type SidebarMenuSubProps = ComponentProps<"ul">;
+const SidebarMenuSub = (props: SidebarMenuSubProps) => {
+	const [local, rest] = splitProps<SidebarMenuSubProps, [["class"]]>(props, [
+		"class",
+	]);
+
+	return (
+		<ul
+			data-sidebar="menu-sub"
+			class={cn(
+				"border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
+				"group-data-[collapsible=icon]:hidden",
+				local.class,
+			)}
+			{...rest}
+		/>
+	);
+};
+
+type SidebarMenuSubItemProps = ComponentProps<"li">;
+
+const SidebarMenuSubItem = (props: SidebarMenuSubItemProps) => {
+	return <li {...props} />;
+};
+
+type SidebarMenuSubButtonProps = ComponentProps<"a"> & {
+	size?: "sm" | "md";
+	isActive?: boolean;
+};
+
+const SidebarMenuSubButton = (props: SidebarMenuSubButtonProps) => {
+	const mergedProps = mergeProps(
+		{
+			size: "md" as const,
+			isActive: false,
+		},
+		props,
+	);
+
+	const [local, rest] = splitProps<
+		SidebarMenuSubButtonProps,
+		[["class", "size", "isActive"]]
+	>(mergedProps, ["class", "size", "isActive"]);
+
+	return (
+		<a
+			data-sidebar="menu-sub-button"
+			data-size={local.size}
+			data-active={local.isActive}
+			class={cn(
+				"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+				"data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+				local.size === "sm" && "text-xs",
+				local.size === "md" && "text-sm",
+				"group-data-[collapsible=icon]:hidden",
+				local.class,
+			)}
+			{...rest}
+		/>
+	);
+};
+
+export {
+	Sidebar,
+	SidebarContent,
+	SidebarFooter,
+	SidebarGroup,
+	SidebarGroupAction,
+	SidebarGroupContent,
+	SidebarGroupLabel,
+	SidebarHeader,
+	SidebarInput,
+	SidebarInset,
+	SidebarMenu,
+	SidebarMenuAction,
+	SidebarMenuBadge,
+	SidebarMenuButton,
+	SidebarMenuItem,
+	SidebarMenuSkeleton,
+	SidebarMenuSub,
+	SidebarMenuSubButton,
+	SidebarMenuSubItem,
+	SidebarProvider,
+	SidebarRail,
+	SidebarSeparator,
+	SidebarTrigger,
+	useSidebar,
+};