diff --git a/packages/core/src/Adapters/icon.ts b/packages/core/src/Adapters/icon.ts
index c8d9e248..f60f993c 100644
--- a/packages/core/src/Adapters/icon.ts
+++ b/packages/core/src/Adapters/icon.ts
@@ -36,6 +36,7 @@ export const SEMANTIC_ICON_NAMES = [
   "calendar",
   "download",
   "chevronUp",
+  "panelLeft",
   "chevronDown",
   "chevronLeft",
   "chevronRight",
diff --git a/packages/core/src/Config/index.ts b/packages/core/src/Config/index.ts
index a4777535..56624f71 100644
--- a/packages/core/src/Config/index.ts
+++ b/packages/core/src/Config/index.ts
@@ -97,6 +97,8 @@ export type {
   RadioConfigOverrides,
   SelectConfigBase,
   SelectConfigOverrides,
+  SidebarConfigBase,
+  SidebarConfigOverrides,
   SkeletonConfigBase,
   SkeletonConfigOverrides,
   SliderConfigBase,
diff --git a/packages/core/src/Config/types.ts b/packages/core/src/Config/types.ts
index cf283fef..58505c0c 100644
--- a/packages/core/src/Config/types.ts
+++ b/packages/core/src/Config/types.ts
@@ -152,6 +152,14 @@ import type {
   RadioRounded,
   RadioSize,
 } from "@/Tokens/Radio";
+import type {
+  SidebarCollapsible,
+  SidebarCollapsibleItem,
+  SidebarSide,
+  SidebarVariant,
+  SidebarVariantItem,
+  SidebarWidth,
+} from "@/Tokens/Sidebar";
 import type { SkeletonRounded } from "@/Tokens/Skeleton";
 import type {
   SliderColor,
@@ -384,6 +392,7 @@ export interface PasswordFieldConfigOverrides {}
 export interface ProgressConfigOverrides {}
 export interface RadioConfigOverrides {}
 export interface SelectConfigOverrides {}
+export interface SidebarConfigOverrides {}
 export interface SkeletonConfigOverrides {}
 export interface SliderConfigOverrides {}
 export interface SnackbarConfigOverrides {}
@@ -1228,6 +1237,22 @@ export interface ProgressConfigBase {
   }>;
 }
 
+export interface SidebarConfigBase {
+  classes: object;
+  defaultProps: Partial<{
+    collapsible: keyof SidebarCollapsible;
+    defaultOpen: boolean;
+    side: keyof SidebarSide;
+    variant: keyof SidebarVariant;
+  }>;
+  tokens: Partial<{
+    collapsible: Record<string, SidebarCollapsibleItem>;
+    side: Record<string, string>;
+    variant: Record<string, SidebarVariantItem>;
+    width: Partial<SidebarWidth>;
+  }>;
+}
+
 export interface SkeletonConfigBase {
   classes: object;
   defaultProps: Partial<{
@@ -1543,6 +1568,7 @@ export type BridgeUIComponentsConfig = Partial<{
   Progress: Partial<Overwrite<ProgressConfigBase, ProgressConfigOverrides>>;
   Radio: Partial<Overwrite<RadioConfigBase, RadioConfigOverrides>>;
   Select: Partial<Overwrite<SelectConfigBase, SelectConfigOverrides>>;
+  Sidebar: Partial<Overwrite<SidebarConfigBase, SidebarConfigOverrides>>;
   Skeleton: Partial<Overwrite<SkeletonConfigBase, SkeletonConfigOverrides>>;
   Slider: Partial<Overwrite<SliderConfigBase, SliderConfigOverrides>>;
   Snackbar: Partial<Overwrite<SnackbarConfigBase, SnackbarConfigOverrides>>;
diff --git a/packages/core/src/Domain/__tests__/sidebar.test.ts b/packages/core/src/Domain/__tests__/sidebar.test.ts
new file mode 100644
index 00000000..dcb850e6
--- /dev/null
+++ b/packages/core/src/Domain/__tests__/sidebar.test.ts
@@ -0,0 +1,116 @@
+// ** External Imports
+import { describe, expect, test } from "vitest";
+
+// ** Local Imports
+import {
+  getSidebarPanelId,
+  isSidebarIconOnly,
+  resolveSidebarCollapsibleData,
+  resolveSidebarListTooltipPlacement,
+  resolveSidebarState,
+  shouldRenderSidebarAsDrawer,
+  shouldToggleDesktopSidebar,
+  SIDEBAR_DESKTOP_BREAKPOINT,
+  toggleSidebarOpen,
+} from "@/Domain/sidebar";
+
+describe("resolveSidebarState", () => {
+  test("it should return expanded when collapsible is none", () => {
+    expect(resolveSidebarState(false, "none")).toBe("expanded");
+    expect(resolveSidebarState(true, "none")).toBe("expanded");
+  });
+
+  test("it should follow open for icon and offcanvas", () => {
+    expect(resolveSidebarState(true, "icon")).toBe("expanded");
+    expect(resolveSidebarState(false, "icon")).toBe("collapsed");
+    expect(resolveSidebarState(false, "offcanvas")).toBe("collapsed");
+  });
+});
+
+describe("shouldRenderSidebarAsDrawer", () => {
+  test("it should be true only on mobile", () => {
+    expect(shouldRenderSidebarAsDrawer(true)).toBe(true);
+    expect(shouldRenderSidebarAsDrawer(false)).toBe(false);
+  });
+});
+
+describe("toggleSidebarOpen", () => {
+  test("it should invert the flag", () => {
+    expect(toggleSidebarOpen(true)).toBe(false);
+    expect(toggleSidebarOpen(false)).toBe(true);
+  });
+});
+
+describe("resolveSidebarCollapsibleData", () => {
+  test("it should be empty when expanded or none", () => {
+    expect(resolveSidebarCollapsibleData("expanded", "icon")).toBe("");
+    expect(resolveSidebarCollapsibleData("collapsed", "none")).toBe("");
+  });
+
+  test("it should echo the mode when collapsed", () => {
+    expect(resolveSidebarCollapsibleData("collapsed", "icon")).toBe("icon");
+    expect(resolveSidebarCollapsibleData("collapsed", "offcanvas")).toBe(
+      "offcanvas",
+    );
+  });
+});
+
+describe("getSidebarPanelId", () => {
+  test("it should build a stable panel id", () => {
+    expect(getSidebarPanelId("sidebar-1")).toBe("sidebar-1-panel");
+  });
+});
+
+describe("shouldToggleDesktopSidebar", () => {
+  test("it should be false when collapsible is none", () => {
+    expect(shouldToggleDesktopSidebar("none")).toBe(false);
+    expect(shouldToggleDesktopSidebar("icon")).toBe(true);
+    expect(shouldToggleDesktopSidebar("offcanvas")).toBe(true);
+  });
+});
+
+describe("SIDEBAR_DESKTOP_BREAKPOINT", () => {
+  test("it should match the md shell breakpoint", () => {
+    expect(SIDEBAR_DESKTOP_BREAKPOINT).toBe("md");
+  });
+});
+
+describe("isSidebarIconOnly", () => {
+  test("it should be true only on a collapsed desktop icon rail", () => {
+    expect(
+      isSidebarIconOnly({
+        isMobile: false,
+        state: "collapsed",
+        collapsible: "icon",
+      }),
+    ).toBe(true);
+    expect(
+      isSidebarIconOnly({
+        isMobile: true,
+        state: "collapsed",
+        collapsible: "icon",
+      }),
+    ).toBe(false);
+    expect(
+      isSidebarIconOnly({
+        isMobile: false,
+        state: "expanded",
+        collapsible: "icon",
+      }),
+    ).toBe(false);
+    expect(
+      isSidebarIconOnly({
+        isMobile: false,
+        state: "collapsed",
+        collapsible: "offcanvas",
+      }),
+    ).toBe(false);
+  });
+});
+
+describe("resolveSidebarListTooltipPlacement", () => {
+  test("it should sit opposite the dock edge", () => {
+    expect(resolveSidebarListTooltipPlacement("left")).toBe("right");
+    expect(resolveSidebarListTooltipPlacement("right")).toBe("left");
+  });
+});
diff --git a/packages/core/src/Domain/index.ts b/packages/core/src/Domain/index.ts
index c46e9d1b..dee40df7 100644
--- a/packages/core/src/Domain/index.ts
+++ b/packages/core/src/Domain/index.ts
@@ -228,6 +228,21 @@ export type {
   SelectOptionLike,
   SelectValue,
 } from "@/Domain/select";
+export {
+  SIDEBAR_DESKTOP_BREAKPOINT,
+  SIDEBAR_WIDTH_ICON_VAR,
+  SIDEBAR_WIDTH_MOBILE_VAR,
+  SIDEBAR_WIDTH_VAR,
+  getSidebarPanelId,
+  isSidebarIconOnly,
+  resolveSidebarCollapsibleData,
+  resolveSidebarListTooltipPlacement,
+  resolveSidebarState,
+  shouldRenderSidebarAsDrawer,
+  shouldToggleDesktopSidebar,
+  toggleSidebarOpen,
+} from "@/Domain/sidebar";
+export type { SidebarCollapsibleMode, SidebarState } from "@/Domain/sidebar";
 export {
   DEFAULT_SLIDER_MAX,
   DEFAULT_SLIDER_MIN,
diff --git a/packages/core/src/Domain/sidebar.ts b/packages/core/src/Domain/sidebar.ts
new file mode 100644
index 00000000..2649a443
--- /dev/null
+++ b/packages/core/src/Domain/sidebar.ts
@@ -0,0 +1,116 @@
+/**
+ * Desktop visual state derived from `open` and `collapsible`.
+ */
+export type SidebarState = "expanded" | "collapsed";
+
+/**
+ * CSS custom property for the expanded desktop rail width.
+ */
+export const SIDEBAR_WIDTH_VAR = "--bridge-sidebar-width";
+
+/**
+ * CSS custom property for the collapsed icon-rail width.
+ */
+export const SIDEBAR_WIDTH_ICON_VAR = "--bridge-sidebar-width-icon";
+
+/**
+ * CSS custom property for the mobile drawer panel width.
+ */
+export const SIDEBAR_WIDTH_MOBILE_VAR = "--bridge-sidebar-width-mobile";
+
+/**
+ * Tailwind breakpoint at which the desktop rail is shown (`md:` on the shell).
+ * The overlay `Drawer` is used below this width, not the global `sm` mobile flag,
+ * so the rail is not blank between `sm` and `md`.
+ */
+export const SIDEBAR_DESKTOP_BREAKPOINT = "md";
+
+/**
+ * Collapsible modes accepted by {@link resolveSidebarState}.
+ */
+export type SidebarCollapsibleMode = "icon" | "none" | "offcanvas";
+
+/**
+ * Resolves `expanded` vs `collapsed` for desktop chrome.
+ * `none` is always expanded. Mobile overlay is independent (`openMobile`).
+ */
+export function resolveSidebarState(
+  open: boolean,
+  collapsible: SidebarCollapsibleMode,
+): SidebarState {
+  if (collapsible === "none") {
+    return "expanded";
+  }
+
+  return open ? "expanded" : "collapsed";
+}
+
+/**
+ * Whether the sidebar should mount its mobile `Drawer` overlay.
+ * Desktop chrome stays mounted and is hidden with CSS (`md:`).
+ */
+export function shouldRenderSidebarAsDrawer(isMobile: boolean): boolean {
+  return isMobile;
+}
+
+/**
+ * Next boolean for a sidebar open flag (desktop `open` or mobile `openMobile`).
+ */
+export function toggleSidebarOpen(open: boolean): boolean {
+  return !open;
+}
+
+/**
+ * `data-collapsible` value: the mode when collapsed, empty when expanded.
+ */
+export function resolveSidebarCollapsibleData(
+  state: SidebarState,
+  collapsible: SidebarCollapsibleMode,
+): "" | SidebarCollapsibleMode {
+  if (state === "expanded" || collapsible === "none") {
+    return "";
+  }
+
+  return collapsible;
+}
+
+/**
+ * Stable DOM id for the sidebar panel (`aria-controls` on the trigger).
+ */
+export function getSidebarPanelId(sidebarId: string): string {
+  return `${sidebarId}-panel`;
+}
+
+/**
+ * Whether desktop toggle should change `open`. `none` is a no-op on desktop.
+ */
+export function shouldToggleDesktopSidebar(
+  collapsible: SidebarCollapsibleMode,
+): boolean {
+  return collapsible !== "none";
+}
+
+/**
+ * Whether rail lists should collapse to icons.
+ * False below the desktop breakpoint so the overlay drawer keeps labels.
+ */
+export function isSidebarIconOnly({
+  state,
+  isMobile,
+  collapsible,
+}: {
+  collapsible: SidebarCollapsibleMode;
+  isMobile: boolean;
+  state: SidebarState;
+}): boolean {
+  return !isMobile && collapsible === "icon" && state === "collapsed";
+}
+
+/**
+ * Tooltip placement for collapsed icon-rail items. Opposite the dock edge.
+ */
+export function resolveSidebarListTooltipPlacement(
+  side: "left" | "right",
+): "left" | "right" {
+  return side === "right" ? "left" : "right";
+}
diff --git a/packages/core/src/Tokens/Accordion/Variant.ts b/packages/core/src/Tokens/Accordion/Variant.ts
index 244714cd..ed902b9b 100644
--- a/packages/core/src/Tokens/Accordion/Variant.ts
+++ b/packages/core/src/Tokens/Accordion/Variant.ts
@@ -7,6 +7,11 @@ export interface AccordionVariantItem {
    */
   "item": string;
 
+  /**
+   * Classes for the expandable panel region.
+   */
+  "panel": string;
+
   /**
    * Classes for the accordion root.
    */
@@ -50,20 +55,16 @@ export interface AccordionVariant {
  * Default accordion variant class maps.
  */
 export const variantProps: AccordionVariant = {
-  "plain": {
-    "root": "flex flex-col gap-1",
-    "item": "overflow-hidden rounded-lg",
-    "trigger":
-      "text-dark-700 hover:bg-dark-500/5 dark:text-dark-200 dark:hover:bg-dark-500/10",
-  },
   "default": {
     "item": "",
+    "panel": "",
     "trigger":
       "text-dark-700 hover:bg-dark-500/5 dark:text-dark-200 dark:hover:bg-dark-500/10",
     "root":
       "divide-y divide-dark-200 border-y border-dark-200 dark:divide-dark-700 dark:border-dark-700",
   },
   "separated": {
+    "panel": "",
     "root": "flex flex-col gap-2",
     "item":
       "overflow-hidden rounded-lg border border-dark-200 dark:border-dark-700",
@@ -72,9 +73,18 @@ export const variantProps: AccordionVariant = {
   },
   "outlined": {
     "item": "",
+    "panel": "",
     "trigger":
       "text-dark-700 hover:bg-dark-500/5 dark:text-dark-200 dark:hover:bg-dark-500/10",
     "root":
       "overflow-hidden rounded-lg border border-dark-200 divide-y divide-dark-200 dark:border-dark-700 dark:divide-dark-700",
   },
+  "plain": {
+    "item": "",
+    "root": "flex flex-col gap-1 px-2 py-2",
+    "trigger":
+      "rounded-lg min-h-8 px-2 py-1.5 text-dark-700 hover:bg-black/5 dark:text-dark-200 dark:hover:bg-white/10",
+    "panel":
+      "ml-3.5 translate-x-px border-l border-dark-200 p-0 py-0.5 pl-2.5 group-data-[collapsible=icon]:hidden dark:border-dark-700",
+  },
 };
diff --git a/packages/core/src/Tokens/Sidebar/Collapsible.ts b/packages/core/src/Tokens/Sidebar/Collapsible.ts
new file mode 100644
index 00000000..2ca63c4b
--- /dev/null
+++ b/packages/core/src/Tokens/Sidebar/Collapsible.ts
@@ -0,0 +1,58 @@
+/**
+ * Per-mode gap and panel classes for desktop collapse.
+ */
+export interface SidebarCollapsibleItem {
+  /**
+   * Classes merged onto the in-flow gap spacer.
+   */
+  "gap": string;
+
+  /**
+   * Classes merged onto the fixed desktop panel.
+   */
+  "panel": string;
+}
+
+/**
+ * How the desktop sidebar hides.
+ *
+ * `offcanvas` slides out of the layout. `icon` shrinks to the icon rail.
+ * `none` stays expanded.
+ */
+export interface SidebarCollapsible {
+  /**
+   * Collapse to icons. Labels hide via `SidebarList`.
+   */
+  "icon": SidebarCollapsibleItem;
+
+  /**
+   * Always expanded. Trigger is a no-op on desktop.
+   */
+  "none": SidebarCollapsibleItem;
+
+  /**
+   * Slide the rail off-canvas (gap width goes to 0).
+   */
+  "offcanvas": SidebarCollapsibleItem;
+}
+
+/**
+ * Default sidebar collapsible class maps.
+ */
+export const collapsibleProps: SidebarCollapsible = {
+  "none": {
+    "gap": "",
+    "panel": "",
+  },
+  "icon": {
+    "gap": "group-data-[collapsible=icon]:w-[var(--bridge-sidebar-width-icon)]",
+    "panel":
+      "group-data-[collapsible=icon]:w-[var(--bridge-sidebar-width-icon)]",
+  },
+  "offcanvas": {
+    "gap":
+      "group-data-[collapsible=offcanvas]:w-0 group-data-[collapsible=offcanvas]:overflow-hidden",
+    "panel":
+      "group-data-[collapsible=offcanvas]:data-[side=left]:left-[calc(var(--bridge-sidebar-width)*-1)] group-data-[collapsible=offcanvas]:data-[side=right]:right-[calc(var(--bridge-sidebar-width)*-1)]",
+  },
+};
diff --git a/packages/core/src/Tokens/Sidebar/Side.ts b/packages/core/src/Tokens/Sidebar/Side.ts
new file mode 100644
index 00000000..27038a28
--- /dev/null
+++ b/packages/core/src/Tokens/Sidebar/Side.ts
@@ -0,0 +1,22 @@
+/**
+ * Per-side positioning classes for the fixed desktop panel.
+ */
+export interface SidebarSide {
+  /**
+   * Dock the rail to the inline start (physical left in `ltr`).
+   */
+  "left": string;
+
+  /**
+   * Dock the rail to the inline end (physical right in `ltr`).
+   */
+  "right": string;
+}
+
+/**
+ * Physical left/right docking for the fixed desktop panel (`side` is left/right).
+ */
+export const sideProps: SidebarSide = {
+  "left": "left-0",
+  "right": "right-0",
+};
diff --git a/packages/core/src/Tokens/Sidebar/Variant.ts b/packages/core/src/Tokens/Sidebar/Variant.ts
new file mode 100644
index 00000000..72947cfa
--- /dev/null
+++ b/packages/core/src/Tokens/Sidebar/Variant.ts
@@ -0,0 +1,55 @@
+/**
+ * Per-variant chrome for the gap, fixed panel, and main inset.
+ */
+export interface SidebarVariantItem {
+  /**
+   * Classes for the in-flow gap spacer.
+   */
+  "gap": string;
+
+  /**
+   * Classes for `SidebarInset` (main content).
+   */
+  "inset": string;
+
+  /**
+   * Classes for the inner panel surface.
+   */
+  "panel": string;
+}
+
+/**
+ * Sidebar visual layout: flush rail (`sidebar`) or padded main (`inset`).
+ */
+export interface SidebarVariant {
+  /**
+   * Main content is inset with margin and rounding.
+   */
+  "inset": SidebarVariantItem;
+
+  /**
+   * Flush rail that shares an edge with the main column. Default.
+   */
+  "sidebar": SidebarVariantItem;
+}
+
+/**
+ * Default sidebar variant class maps.
+ */
+export const variantProps: SidebarVariant = {
+  "sidebar": {
+    "inset":
+      "relative flex min-h-svh min-w-0 flex-1 flex-col bg-white dark:bg-dark-900",
+    "gap":
+      "relative hidden w-[var(--bridge-sidebar-width)] bg-transparent transition-[width] duration-200 ease-linear md:block",
+    "panel":
+      "border-dark-200 bg-white data-[side=left]:border-e data-[side=right]:border-s dark:border-dark-700 dark:bg-dark-800",
+  },
+  "inset": {
+    "panel": "bg-white p-2 dark:bg-dark-800",
+    "inset":
+      "relative m-2 flex min-h-svh min-w-0 flex-1 flex-col rounded-xl bg-white shadow-sm dark:bg-dark-900",
+    "gap":
+      "relative hidden w-[var(--bridge-sidebar-width)] bg-transparent transition-[width] duration-200 ease-linear md:block group-data-[collapsible=icon]:w-[calc(var(--bridge-sidebar-width-icon)+1rem)]",
+  },
+};
diff --git a/packages/core/src/Tokens/Sidebar/Width.ts b/packages/core/src/Tokens/Sidebar/Width.ts
new file mode 100644
index 00000000..dc3125d9
--- /dev/null
+++ b/packages/core/src/Tokens/Sidebar/Width.ts
@@ -0,0 +1,28 @@
+/**
+ * CSS length values for sidebar rails (set as `--bridge-sidebar-*` on the provider).
+ */
+export interface SidebarWidth {
+  /**
+   * Expanded desktop rail width.
+   */
+  "default": string;
+
+  /**
+   * Collapsed icon-rail width.
+   */
+  "icon": string;
+
+  /**
+   * Mobile drawer panel width.
+   */
+  "mobile": string;
+}
+
+/**
+ * Default sidebar width CSS lengths.
+ */
+export const widthProps: SidebarWidth = {
+  "icon": "3rem",
+  "mobile": "18rem",
+  "default": "16rem",
+};
diff --git a/packages/core/src/Tokens/Sidebar/index.ts b/packages/core/src/Tokens/Sidebar/index.ts
new file mode 100644
index 00000000..ddebea90
--- /dev/null
+++ b/packages/core/src/Tokens/Sidebar/index.ts
@@ -0,0 +1,15 @@
+// ** Exports
+export { collapsibleProps } from "@/Tokens/Sidebar/Collapsible";
+export type {
+  SidebarCollapsible,
+  SidebarCollapsibleItem,
+} from "@/Tokens/Sidebar/Collapsible";
+export { sideProps } from "@/Tokens/Sidebar/Side";
+export type { SidebarSide } from "@/Tokens/Sidebar/Side";
+export { variantProps } from "@/Tokens/Sidebar/Variant";
+export type {
+  SidebarVariant,
+  SidebarVariantItem,
+} from "@/Tokens/Sidebar/Variant";
+export { widthProps } from "@/Tokens/Sidebar/Width";
+export type { SidebarWidth } from "@/Tokens/Sidebar/Width";
diff --git a/packages/core/src/Tokens/index.ts b/packages/core/src/Tokens/index.ts
index 7ae81cd4..cd235dce 100644
--- a/packages/core/src/Tokens/index.ts
+++ b/packages/core/src/Tokens/index.ts
@@ -288,6 +288,20 @@ export type {
   RadioRounded,
   RadioSize,
 } from "@/Tokens/Radio";
+export {
+  collapsibleProps as sidebarCollapsibleProps,
+  sideProps as sidebarSideProps,
+  variantProps as sidebarVariantProps,
+  widthProps as sidebarWidthProps,
+} from "@/Tokens/Sidebar";
+export type {
+  SidebarCollapsible,
+  SidebarCollapsibleItem,
+  SidebarSide,
+  SidebarVariant,
+  SidebarVariantItem,
+  SidebarWidth,
+} from "@/Tokens/Sidebar";
 export { roundedProps as skeletonRoundedProps } from "@/Tokens/Skeleton";
 export type { SkeletonRounded } from "@/Tokens/Skeleton";
 export {
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index c9956c3a..8bef47c7 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -75,6 +75,7 @@ export type {
   ProgressConfigOverrides,
   RadioConfigOverrides,
   SelectConfigOverrides,
+  SidebarConfigOverrides,
   SkeletonConfigOverrides,
   SliderConfigOverrides,
   SpinnerConfigOverrides,
@@ -116,6 +117,10 @@ export {
   DEFAULT_SLIDER_STEP,
   DEFAULT_SPINNER_THICKNESS,
   DEFAULT_START_OF_WEEK,
+  SIDEBAR_DESKTOP_BREAKPOINT,
+  SIDEBAR_WIDTH_ICON_VAR,
+  SIDEBAR_WIDTH_MOBILE_VAR,
+  SIDEBAR_WIDTH_VAR,
   SPINNER_VIEWBOX_SIZE,
   applyDateSelection,
   applyOtpInput,
@@ -166,6 +171,7 @@ export {
   getFieldOverlayControlSize,
   getNumberFieldStepper,
   getPaginationItems,
+  getSidebarPanelId,
   getSliderBarGeometry,
   getSliderPointerClientX,
   getSliderPrecision,
@@ -201,6 +207,7 @@ export {
   isMonthDisabled,
   isOtpCharAllowed,
   isOtpComplete,
+  isSidebarIconOnly,
   isSliderStopCovered,
   isTimeDisabled,
   isTimeRangeValue,
@@ -238,6 +245,9 @@ export {
   resolveSelectAsyncDebounce,
   resolveSelectAsyncLimit,
   resolveSelectAsyncOptions,
+  resolveSidebarCollapsibleData,
+  resolveSidebarListTooltipPlacement,
+  resolveSidebarState,
   resolveSliderBounds,
   resolveSliderDefaultValue,
   resolveStartOfWeek,
@@ -251,6 +261,8 @@ export {
   setDataTableColumnFilter,
   setDataTableColumnSearch,
   setDataTableRowSelection,
+  shouldRenderSidebarAsDrawer,
+  shouldToggleDesktopSidebar,
   sliceDataTablePage,
   snapMinutes,
   snapSliderValue,
@@ -272,6 +284,7 @@ export {
   toggleDataTableRowExpansion,
   toggleDataTableRowSelection,
   toggleDataTableSorting,
+  toggleSidebarOpen,
   unitFromPointer,
   valueToPercent,
   writeSliderRangeThumb,
@@ -330,6 +343,8 @@ export type {
   SelectOptionKeys,
   SelectOptionLike,
   SelectValue,
+  SidebarCollapsibleMode,
+  SidebarState,
   SliderBarGeometry,
   SliderBounds,
   SliderRangeValue,
@@ -712,6 +727,20 @@ export type {
   RadioRounded,
   RadioSize,
 } from "@/Tokens/Radio";
+export {
+  collapsibleProps as sidebarCollapsibleProps,
+  sideProps as sidebarSideProps,
+  variantProps as sidebarVariantProps,
+  widthProps as sidebarWidthProps,
+} from "@/Tokens/Sidebar";
+export type {
+  SidebarCollapsible,
+  SidebarCollapsibleItem,
+  SidebarSide,
+  SidebarVariant,
+  SidebarVariantItem,
+  SidebarWidth,
+} from "@/Tokens/Sidebar";
 export { roundedProps as skeletonRoundedProps } from "@/Tokens/Skeleton";
 export type { SkeletonRounded } from "@/Tokens/Skeleton";
 export {
diff --git a/packages/react/ai/skills/bridge-ui-components/SKILL.md b/packages/react/ai/skills/bridge-ui-components/SKILL.md
index 16fc0c42..57908f48 100644
--- a/packages/react/ai/skills/bridge-ui-components/SKILL.md
+++ b/packages/react/ai/skills/bridge-ui-components/SKILL.md
@@ -2,7 +2,7 @@
 name: bridge-ui-components
 description: >-
   Use Bridge UI React components — Button, Avatar, Card, Alert, Accordion, Badge, Icon,
-  Link, List, Table, DataTable, Tabs, Spinner, Skeleton, EmptyState, Progress, Stepper, Pagination, TextField, Select,
+  Link, List, Table, DataTable, Tabs, Spinner, Skeleton, EmptyState, Sidebar, Progress, Stepper, Pagination, TextField, Select,
   Autocomplete, DateField, DatePicker, DateRangeField, DateRangePicker,
   TimeField, TimePicker, DateTimeField, DateTimePicker, ColorField, ColorPicker,
   classes, customProps, slots. Use when building UI with Bridge components.
@@ -30,6 +30,7 @@ Do **not** invent APIs. Copy examples from `.ai/docs/components/{Component}.md`
 | Tabs                          | `.ai/docs/components/Tabs.md`                                         |
 | Text input                    | `.ai/docs/components/TextField.md`                                    |
 | Select / autocomplete         | `.ai/docs/components/Select.md`, `Autocomplete.md`                    |
+| Sidebar / app shell           | `.ai/docs/components/Sidebar.md`                                      |
 | Date                          | `.ai/docs/components/DateField.md`, `DatePicker.md`                   |
 | Date range                    | `.ai/docs/components/DateRangeField.md`, `DateRangePicker.md`         |
 | Time                          | `.ai/docs/components/TimeField.md`, `TimePicker.md`                   |
diff --git a/packages/react/docs/README.md b/packages/react/docs/README.md
index 511d1ff7..639b2cf4 100644
--- a/packages/react/docs/README.md
+++ b/packages/react/docs/README.md
@@ -50,6 +50,7 @@ Component reference and adapter samples for **React**. This folder ships with th
 - [Progress](./components/Progress.md)
 - [Radio](./components/Radio.md)
 - [Select](./components/Select.md)
+- [Sidebar](./components/Sidebar.md)
 - [Skeleton](./components/Skeleton.md)
 - [Slider](./components/Slider.md)
 - [Snackbar](./components/Snackbar.md)
diff --git a/packages/react/docs/components/Drawer.md b/packages/react/docs/components/Drawer.md
index 9a49d6a8..4d8b4f79 100644
--- a/packages/react/docs/components/Drawer.md
+++ b/packages/react/docs/components/Drawer.md
@@ -171,4 +171,4 @@ import { Drawer } from "@bridge-ui/react/Components/Drawer";
 
 ## Related components
 
-Card, [useDrawerAction](./useDrawerAction.md), useDialogAction, useModalAction
+Card, Sidebar, [useDrawerAction](./useDrawerAction.md), useDialogAction, useModalAction
diff --git a/packages/react/docs/components/List.md b/packages/react/docs/components/List.md
index eacde6ba..4a6208f0 100644
--- a/packages/react/docs/components/List.md
+++ b/packages/react/docs/components/List.md
@@ -172,4 +172,4 @@ With the default `as="li"`, sticky styles apply on the section root. The list (o
 
 ## Related components
 
-Menu, Select
+Menu, Select, Sidebar
diff --git a/packages/react/docs/components/Sidebar.md b/packages/react/docs/components/Sidebar.md
new file mode 100644
index 00000000..bb2a65bc
--- /dev/null
+++ b/packages/react/docs/components/Sidebar.md
@@ -0,0 +1,269 @@
+# Sidebar
+
+Persistent app-shell rail. Mount `SidebarProvider` around `Sidebar` and `SidebarInset` as siblings. Put `SidebarList` / `Accordion` in the rail. On small viewports the panel opens as a `Drawer`.
+
+## Import
+
+```ts
+import {
+  Sidebar,
+  SidebarInset,
+  SidebarList,
+  SidebarListItem,
+  SidebarProvider,
+  SidebarTrigger,
+  useSidebar,
+} from "@bridge-ui/react/Components/Sidebar";
+```
+
+## Prerequisites
+
+Mount `SidebarProvider` around the app shell (`Sidebar` and `SidebarInset` as siblings) before using `SidebarTrigger` or `useSidebar`.
+
+`BridgeUIProvider` still holds theme, tokens, and `defaultProps`. It does not own instance `open` state.
+
+## Examples
+
+### Usage
+
+```tsx
+<SidebarProvider>
+  <Sidebar>
+    <SidebarList>
+      <SidebarListItem interactive primary="Home" />
+      <SidebarListItem interactive primary="Settings" />
+    </SidebarList>
+  </Sidebar>
+  <SidebarInset>
+    <SidebarTrigger />
+    {children}
+  </SidebarInset>
+</SidebarProvider>
+```
+
+### Header and footer
+
+Put brand and account rows in `slots.header` / `slots.footer`. `SidebarList` collapses those rows to the start avatar. The end chevron hides while collapsed. Header and footer lists use `classes.root` `p-0` because those slots are already padded.
+
+```tsx
+function Brand() {
+  return (
+    <SidebarList classes={{ root: "p-0" }}>
+      <SidebarListItem
+        interactive
+        primary="Acme Inc"
+        secondary="Enterprise"
+        slots={{
+          end: <Icon icon="chevronUpDown" />,
+          start: <Avatar size="sm" rounded="lg" fallback="A" color="primary" />,
+        }}
+      />
+    </SidebarList>
+  );
+}
+
+function Account() {
+  return (
+    <SidebarList classes={{ root: "p-0" }}>
+      <SidebarListItem
+        interactive
+        primary="Ada Lovelace"
+        secondary="ada@example.com"
+        slots={{
+          end: <Icon icon="chevronUpDown" />,
+          start: <Avatar size="sm" rounded="lg" fallback="AL" />,
+        }}
+      />
+    </SidebarList>
+  );
+}
+
+<SidebarProvider>
+  <Sidebar
+    collapsible="icon"
+    slots={{
+      header: <Brand />,
+      footer: <Account />,
+    }}
+  >
+    <SidebarList>
+      <SidebarListItem interactive primary="Home" />
+    </SidebarList>
+  </Sidebar>
+  <SidebarInset>
+    <SidebarTrigger />
+    {children}
+  </SidebarInset>
+</SidebarProvider>;
+```
+
+### Icon collapse
+
+Use `SidebarList` / `SidebarListItem` when `collapsible="icon"`. Collapsed items keep `primary` as an `aria-label` and show it in a `Tooltip` on the whole item. Nested `SidebarList` is hidden. The mobile drawer keeps labels.
+
+```tsx
+<SidebarProvider>
+  <Sidebar
+    collapsible="icon"
+    slots={{
+      header: <Brand />,
+      footer: <Account />,
+    }}
+  >
+    <SidebarList>
+      <ListSection title="Application" />
+      <SidebarListItem
+        interactive
+        primary="Home"
+        slots={{ start: <Icon icon="user" /> }}
+      />
+    </SidebarList>
+  </Sidebar>
+  <SidebarInset>
+    <SidebarTrigger />
+    {children}
+  </SidebarInset>
+</SidebarProvider>
+```
+
+### Controlled
+
+```tsx
+<SidebarProvider open={open} onOpenChange={setOpen}>
+  <Sidebar>
+    <SidebarList>
+      <SidebarListItem interactive primary="Home" />
+    </SidebarList>
+  </Sidebar>
+  <SidebarInset>
+    <SidebarTrigger />
+    {children}
+  </SidebarInset>
+</SidebarProvider>
+```
+
+### Right side
+
+```tsx
+<SidebarProvider>
+  <Sidebar side="right">
+    <SidebarList>
+      <SidebarListItem interactive primary="Inbox" />
+    </SidebarList>
+  </Sidebar>
+  <SidebarInset>
+    <SidebarTrigger />
+    {children}
+  </SidebarInset>
+</SidebarProvider>
+```
+
+### Inset variant
+
+```tsx
+<SidebarProvider>
+  <Sidebar variant="inset">
+    <SidebarList>
+      <SidebarListItem interactive primary="Home" />
+    </SidebarList>
+  </Sidebar>
+  <SidebarInset>
+    <SidebarTrigger />
+    {children}
+  </SidebarInset>
+</SidebarProvider>
+```
+
+### Collapsible groups
+
+```tsx
+<SidebarProvider>
+  <Sidebar>
+    <Accordion variant="plain">
+      <AccordionItem title="Projects" value="projects">
+        <SidebarList classes={{ root: "p-0" }}>
+          <SidebarListItem interactive primary="Alpha" />
+          <SidebarListItem interactive primary="Beta" />
+        </SidebarList>
+      </AccordionItem>
+    </Accordion>
+  </Sidebar>
+  <SidebarInset>
+    <SidebarTrigger />
+    {children}
+  </SidebarInset>
+</SidebarProvider>
+```
+
+## Props (`SidebarProvider`)
+
+| Prop           | Type                         | Default | Description                                  |
+| -------------- | ---------------------------- | ------- | -------------------------------------------- |
+| `children`     | `ReactNode`                  | —       | `Sidebar`, `SidebarInset`, and other shell.  |
+| `classes`      | `SidebarProviderClasses`     | —       | Part classes (`root`).                       |
+| `customProps`  | `SidebarProviderCustomProps` | —       | Extra props for the layout wrapper.          |
+| `defaultOpen`  | `boolean`                    | `true`  | Uncontrolled initial desktop expanded state. |
+| `onOpenChange` | `(open: boolean) => void`    | —       | Called when desktop `open` should change.    |
+| `open`         | `boolean`                    | —       | Controlled desktop expanded state.           |
+
+## Props (`Sidebar`)
+
+| Prop          | Type                              | Default       | Description                                            |
+| ------------- | --------------------------------- | ------------- | ------------------------------------------------------ |
+| `ariaLabel`   | `string`                          | `"Sidebar"`   | Accessible name for the `aside` and the mobile drawer. |
+| `children`    | `ReactNode`                       | —             | Rail content (`SidebarList` / `Accordion`).            |
+| `classes`     | `SidebarClasses`                  | —             | Part classes (`root`, `header`, `content`, …).         |
+| `collapsible` | `"icon" \| "none" \| "offcanvas"` | `"offcanvas"` | How the desktop rail hides.                            |
+| `customProps` | `SidebarCustomProps`              | —             | Extra props for internal parts.                        |
+| `side`        | `"left" \| "right"`               | `"left"`      | Edge the rail docks to.                                |
+| `slots`       | `SidebarSlots`                    | —             | `header`, `footer`.                                    |
+| `variant`     | `"inset" \| "sidebar"`            | `"sidebar"`   | Flush rail or padded main column.                      |
+
+## Props (`SidebarInset`)
+
+| Prop          | Type                      | Default | Description                     |
+| ------------- | ------------------------- | ------- | ------------------------------- |
+| `children`    | `ReactNode`               | —       | Main content.                   |
+| `classes`     | `SidebarInsetClasses`     | —       | Part classes (`root`).          |
+| `customProps` | `SidebarInsetCustomProps` | —       | Extra props for the inset root. |
+
+## Props (`SidebarTrigger`)
+
+Renders a `Button`. Forwards native button attributes. Default accessible name is `Toggle sidebar`.
+
+## Props (`SidebarList`)
+
+Same as `List`, plus `iconOnly`. Sets `iconOnly` when the icon rail is collapsed on desktop. Applies stacked nav chrome (gap, compact rows, nested guide). Override with `iconOnly`. Nested `SidebarList` is hidden while collapsed. `ListSection` labels are hidden while collapsed.
+
+## Props (`SidebarListItem`)
+
+Same as `ListItem`, plus `tooltip` / `tooltipPlacement`. Applies compact nav chrome. Tooltips only show while the icon rail is collapsed (`primary`, or `tooltip` to override).
+
+## `useSidebar`
+
+Must be called under `SidebarProvider`.
+
+| Field           | Type                              | Description                                    |
+| --------------- | --------------------------------- | ---------------------------------------------- |
+| `collapsible`   | `"icon" \| "none" \| "offcanvas"` | Mode from the nearest `Sidebar`.               |
+| `isMobile`      | `boolean`                         | Viewport is below `md` (desktop rail CSS).     |
+| `open`          | `boolean`                         | Desktop expanded state.                        |
+| `openMobile`    | `boolean`                         | Mobile drawer visibility.                      |
+| `setOpen`       | `(open: boolean) => void`         | Sets desktop `open`.                           |
+| `setOpenMobile` | `(open: boolean) => void`         | Sets mobile drawer visibility.                 |
+| `side`          | `"left" \| "right"`               | Dock edge.                                     |
+| `state`         | `"collapsed" \| "expanded"`       | Desktop visual state.                          |
+| `toggleSidebar` | `() => void`                      | Toggles desktop `open` or mobile `openMobile`. |
+| `variant`       | `"inset" \| "sidebar"`            | Visual variant.                                |
+
+## Accessibility
+
+- Desktop panel is an `aside` with `aria-label`
+- Offcanvas collapsed panel is `inert` (out of the tab order)
+- Mobile uses `Drawer` (dialog, overlay, Escape)
+- Trigger sets `aria-expanded` and `aria-controls`
+- `SidebarListItem` copies string `primary` to `aria-label` when collapsed
+
+## Related components
+
+Accordion, Avatar, Button, Drawer, List, ListItem, ListSection, Tooltip
diff --git a/packages/react/docs/examples/icon-fontawesome.ts b/packages/react/docs/examples/icon-fontawesome.ts
index e582a164..c6086ac9 100644
--- a/packages/react/docs/examples/icon-fontawesome.ts
+++ b/packages/react/docs/examples/icon-fontawesome.ts
@@ -122,6 +122,7 @@ const icons = {
   columns: faTableColumns,
   chevronUpDown: faUpDown,
   calendar: faCalendarDays,
+  panelLeft: faTableColumns,
   search: faMagnifyingGlass,
   alert: faCircleExclamation,
   chevronDown: faChevronDown,
diff --git a/packages/react/docs/examples/icon-heroicons.ts b/packages/react/docs/examples/icon-heroicons.ts
index 3ef89374..db5d9e72 100644
--- a/packages/react/docs/examples/icon-heroicons.ts
+++ b/packages/react/docs/examples/icon-heroicons.ts
@@ -8,6 +8,7 @@
 import {
   ArrowDownTrayIcon,
   ArrowPathIcon,
+  Bars3Icon,
   BellIcon,
   CalendarDaysIcon,
   CheckCircleIcon,
@@ -51,6 +52,7 @@ const icons = {
   filter: FunnelIcon,
   palette: SwatchIcon,
   eyeOff: EyeSlashIcon,
+  panelLeft: Bars3Icon,
   loader: ArrowPathIcon,
   success: CheckCircleIcon,
   chevronUp: ChevronUpIcon,
diff --git a/packages/react/docs/examples/icon-lucide.ts b/packages/react/docs/examples/icon-lucide.ts
index 9638fc46..56de8631 100644
--- a/packages/react/docs/examples/icon-lucide.ts
+++ b/packages/react/docs/examples/icon-lucide.ts
@@ -28,6 +28,7 @@ import {
   Loader2,
   Minus,
   Palette,
+  PanelLeft,
   Plus,
   Search,
   TriangleAlert,
@@ -60,6 +61,7 @@ const icons = {
   download: Download,
   success: CircleCheck,
   chevronUp: ChevronUp,
+  panelLeft: PanelLeft,
   warning: TriangleAlert,
   chevronDown: ChevronDown,
   chevronLeft: ChevronLeft,
diff --git a/packages/react/docs/examples/icon-phosphor.ts b/packages/react/docs/examples/icon-phosphor.ts
index b4faec7e..7dbf3e8c 100644
--- a/packages/react/docs/examples/icon-phosphor.ts
+++ b/packages/react/docs/examples/icon-phosphor.ts
@@ -26,6 +26,7 @@ import {
   MinusIcon,
   PaletteIcon,
   PlusIcon,
+  SidebarIcon,
   SpinnerGapIcon,
   UserIcon,
   WarningCircleIcon,
@@ -56,6 +57,7 @@ const icons = {
   warning: WarningIcon,
   loader: SpinnerGapIcon,
   chevronUp: CaretUpIcon,
+  panelLeft: SidebarIcon,
   alert: WarningCircleIcon,
   success: CheckCircleIcon,
   chevronLeft: CaretLeftIcon,
diff --git a/packages/react/docs/examples/icon-tabler.ts b/packages/react/docs/examples/icon-tabler.ts
index 871dadd5..6ef2d80d 100644
--- a/packages/react/docs/examples/icon-tabler.ts
+++ b/packages/react/docs/examples/icon-tabler.ts
@@ -24,6 +24,7 @@ import {
   IconEyeOff,
   IconFilter,
   IconInfoCircle,
+  IconLayoutSidebar,
   IconLoader2,
   IconMinus,
   IconPalette,
@@ -62,6 +63,7 @@ const icons = {
   warning: IconAlertTriangle,
   chevronUpDown: IconSelector,
   calendar: IconCalendarMonth,
+  panelLeft: IconLayoutSidebar,
   chevronDown: IconChevronDown,
   chevronLeft: IconChevronLeft,
   chevronRight: IconChevronRight,
diff --git a/packages/react/src/Components/Accordion/AccordionContext.tsx b/packages/react/src/Components/Accordion/AccordionContext.tsx
index fa5157d0..ca6517a1 100644
--- a/packages/react/src/Components/Accordion/AccordionContext.tsx
+++ b/packages/react/src/Components/Accordion/AccordionContext.tsx
@@ -63,6 +63,7 @@ export type AccordionContextValue = {
     itemSize?: string;
     itemVariant?: string;
     panelSize?: string;
+    panelVariant?: string;
     rootSize?: string;
     rootVariant?: string;
     triggerSize?: string;
diff --git a/packages/react/src/Components/Accordion/__tests__/Accordion.test.tsx b/packages/react/src/Components/Accordion/__tests__/Accordion.test.tsx
index 337001fc..009800c9 100644
--- a/packages/react/src/Components/Accordion/__tests__/Accordion.test.tsx
+++ b/packages/react/src/Components/Accordion/__tests__/Accordion.test.tsx
@@ -152,6 +152,20 @@ test("it should apply plain variant classes on the root", () => {
   expect(className).toContain("gap-1");
   expect(className).not.toContain("border");
   expect(className).not.toContain("divide-y");
+
+  const trigger = screen.getByRole("button", { name: "One" });
+
+  expect(trigger.className).toContain("px-2");
+  expect(trigger.className).toContain("min-h-8");
+  expect(trigger.className).toContain("py-1.5");
+  expect(trigger.className).not.toContain("text-primary-700");
+
+  const panel = screen.getByRole("region", { hidden: true });
+
+  expect(panel.className).toContain("p-0");
+  expect(panel.className).toContain("border-l");
+  expect(panel.className).not.toContain("pb-4");
+  expect(panel.className).toContain("group-data-[collapsible=icon]:hidden");
 });
 
 test("it should apply separated variant classes on the root", () => {
diff --git a/packages/react/src/Components/Accordion/hooks/useAccordion.ts b/packages/react/src/Components/Accordion/hooks/useAccordion.ts
index cf4b5eaf..3886ac30 100644
--- a/packages/react/src/Components/Accordion/hooks/useAccordion.ts
+++ b/packages/react/src/Components/Accordion/hooks/useAccordion.ts
@@ -224,9 +224,14 @@ export function useAccordion(
         triggerSize: get(sizeItem, "trigger"),
         rootVariant: get(variantItem, "root"),
         itemVariant: get(variantItem, "item"),
+        panelVariant: get(variantItem, "panel"),
         triggerVariant: get(variantItem, "trigger"),
-        colorIndicator: get(colorItem, "indicator"),
-        colorTriggerExpanded: get(colorItem, "triggerExpanded"),
+        colorIndicator:
+          merged.variant === "plain" ? undefined : get(colorItem, "indicator"),
+        colorTriggerExpanded:
+          merged.variant === "plain"
+            ? undefined
+            : get(colorItem, "triggerExpanded"),
       },
     };
   }, [
@@ -237,6 +242,7 @@ export function useAccordion(
     focusTrigger,
     itemValues,
     merged.disabled,
+    merged.variant,
     multiple,
     registerItem,
     sizeItem,
diff --git a/packages/react/src/Components/AccordionItem/hooks/useAccordionItem.ts b/packages/react/src/Components/AccordionItem/hooks/useAccordionItem.ts
index 16ecf77f..682a8701 100644
--- a/packages/react/src/Components/AccordionItem/hooks/useAccordionItem.ts
+++ b/packages/react/src/Components/AccordionItem/hooks/useAccordionItem.ts
@@ -252,6 +252,7 @@ export function useAccordionItem(props: AccordionItemProps) {
         "aria-labelledby": getAccordionTriggerId(accordion.id, value),
         className: cn({
           [accordion.tokenClasses.panelSize ?? ""]: true,
+          [accordion.tokenClasses.panelVariant ?? ""]: true,
           [get(mergedClasses, "panel") ?? ""]: true,
         }),
       },
diff --git a/packages/react/src/Components/List/hooks/useList.ts b/packages/react/src/Components/List/hooks/useList.ts
index ecf48268..058b2280 100644
--- a/packages/react/src/Components/List/hooks/useList.ts
+++ b/packages/react/src/Components/List/hooks/useList.ts
@@ -62,15 +62,13 @@ export function useList(props: ListProps) {
   });
 
   const rootBind = derived(() => {
-    return mergePartBind(
-      customProps?.root,
-      rootInheritedAttrs,
-      cn({
+    return mergePartBind(customProps?.root, rootInheritedAttrs, {
+      className: cn({
         "m-0 list-none py-2 text-dark-900 dark:text-dark-100": true,
         "pl-4": merged.nested,
         [get(mergedClasses, "root") ?? ""]: true,
       }),
-    );
+    });
   });
 
   return {
diff --git a/packages/react/src/Components/ListItem/ListItem.tsx b/packages/react/src/Components/ListItem/ListItem.tsx
index 4611492c..d72cab28 100644
--- a/packages/react/src/Components/ListItem/ListItem.tsx
+++ b/packages/react/src/Components/ListItem/ListItem.tsx
@@ -29,13 +29,15 @@ function ListItemRow({
         <div {...startBind}>{slots?.start}</div>
       ) : null}
 
-      <div {...contentBind}>
-        {hasPrimary ? <span {...primaryBind}>{primaryContent}</span> : null}
+      {hasPrimary || hasSecondary ? (
+        <div {...contentBind}>
+          {hasPrimary ? <span {...primaryBind}>{primaryContent}</span> : null}
 
-        {hasSecondary ? (
-          <span {...secondaryBind}>{secondaryContent}</span>
-        ) : null}
-      </div>
+          {hasSecondary ? (
+            <span {...secondaryBind}>{secondaryContent}</span>
+          ) : null}
+        </div>
+      ) : null}
 
       {hasEnd ? (
         <div {...endBind}>
diff --git a/packages/react/src/Components/ListItem/__tests__/ListItem.test.tsx b/packages/react/src/Components/ListItem/__tests__/ListItem.test.tsx
index 3adf0e5a..a4d95c19 100644
--- a/packages/react/src/Components/ListItem/__tests__/ListItem.test.tsx
+++ b/packages/react/src/Components/ListItem/__tests__/ListItem.test.tsx
@@ -1,11 +1,15 @@
 // ** External Imports
-import { render, screen } from "@testing-library/react";
-import { expect, test } from "vitest";
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, expect, test } from "vitest";
 
 // ** Local Imports
 import { List } from "@/Components/List";
 import { ListItem } from "@/Components/ListItem";
 
+afterEach(() => {
+  cleanup();
+});
+
 test("it should render primary text from the primary prop", () => {
   render(<ListItem primary="Edit item" />);
 
diff --git a/packages/react/src/Components/ListSection/ListSection.tsx b/packages/react/src/Components/ListSection/ListSection.tsx
index 7b5fabab..a9ff51ef 100644
--- a/packages/react/src/Components/ListSection/ListSection.tsx
+++ b/packages/react/src/Components/ListSection/ListSection.tsx
@@ -6,7 +6,12 @@ import { useListSection } from "@/Components/ListSection/hooks/useListSection";
 import type { ListSectionProps } from "@/Components/ListSection/listSection.types";
 
 function ListSection(props: ListSectionProps) {
-  const { label, merged, rootBind, titleBind } = useListSection(props);
+  const { label, merged, rootBind, isHidden, titleBind } =
+    useListSection(props);
+
+  if (isHidden) {
+    return null;
+  }
 
   if (merged.as === "div") {
     return <div {...titleBind}>{label}</div>;
diff --git a/packages/react/src/Components/ListSection/ListSectionContext.tsx b/packages/react/src/Components/ListSection/ListSectionContext.tsx
new file mode 100644
index 00000000..81e1a8db
--- /dev/null
+++ b/packages/react/src/Components/ListSection/ListSectionContext.tsx
@@ -0,0 +1,17 @@
+// ** External Imports
+import { createContext, useContext } from "react";
+
+export type ListSectionContextValue = {
+  hidden: boolean;
+};
+
+export const ListSectionContext = createContext<null | ListSectionContextValue>(
+  null,
+);
+
+/**
+ * Visibility from the nearest list that owns sections.
+ */
+export function useListSectionContext() {
+  return useContext(ListSectionContext);
+}
diff --git a/packages/react/src/Components/ListSection/__tests__/ListSection.test.tsx b/packages/react/src/Components/ListSection/__tests__/ListSection.test.tsx
index 3703b30b..635f729e 100644
--- a/packages/react/src/Components/ListSection/__tests__/ListSection.test.tsx
+++ b/packages/react/src/Components/ListSection/__tests__/ListSection.test.tsx
@@ -1,11 +1,15 @@
 // ** External Imports
-import { render, screen } from "@testing-library/react";
-import { expect, test } from "vitest";
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, expect, test } from "vitest";
 
 // ** Local Imports
 import { List } from "@/Components/List";
 import { ListSection } from "@/Components/ListSection";
 
+afterEach(() => {
+  cleanup();
+});
+
 test("it should render the title from the title prop", () => {
   render(<ListSection title="Section title" />);
 
diff --git a/packages/react/src/Components/ListSection/__tests__/useListSection.test.ts b/packages/react/src/Components/ListSection/__tests__/useListSection.test.ts
index 5f6d4001..3d0805ac 100644
--- a/packages/react/src/Components/ListSection/__tests__/useListSection.test.ts
+++ b/packages/react/src/Components/ListSection/__tests__/useListSection.test.ts
@@ -24,6 +24,7 @@ test("it should apply section title classes", () => {
   const { result } = renderUseListSection({ title: "Settings" });
 
   expect(result.current.titleBind.role).toBe("presentation");
+  expect(result.current.titleBind.className).toContain("px-2");
   expect(result.current.titleBind.className).toContain("text-xs");
   expect(result.current.titleBind.className).toContain("uppercase");
 });
diff --git a/packages/react/src/Components/ListSection/hooks/useListSection.ts b/packages/react/src/Components/ListSection/hooks/useListSection.ts
index ce8ed71b..d440c6f2 100644
--- a/packages/react/src/Components/ListSection/hooks/useListSection.ts
+++ b/packages/react/src/Components/ListSection/hooks/useListSection.ts
@@ -10,6 +10,7 @@ import type {
   ListSectionOwnProps,
   ListSectionProps,
 } from "@/Components/ListSection/listSection.types";
+import { useListSectionContext } from "@/Components/ListSection/ListSectionContext";
 import {
   derived,
   mergePartBind,
@@ -28,6 +29,7 @@ const listSectionBridgeKeys = [
 
 export function useListSection(props: ListSectionProps) {
   const listContext = useListContext();
+  const listSection = useListSectionContext();
 
   const { componentProps, inheritedAttrs } = splitComponentProps<
     ListSectionProps,
@@ -66,6 +68,10 @@ export function useListSection(props: ListSectionProps) {
     return listContext?.dense ?? false;
   });
 
+  const isHidden = derived(() => {
+    return listSection?.hidden ?? false;
+  });
+
   const label = derived(() => {
     return merged.title ?? children;
   });
@@ -94,7 +100,7 @@ export function useListSection(props: ListSectionProps) {
       {
         role: "presentation",
         className: cn({
-          "bg-white px-4 text-xs font-semibold tracking-wide text-dark-500 uppercase dark:bg-dark-800 dark:text-dark-300": true,
+          "bg-white px-2 text-xs font-semibold tracking-wide text-dark-500 uppercase dark:bg-dark-800 dark:text-dark-300": true,
           "sticky top-0 z-10": merged.sticky && isDivRoot,
           "py-2": !isDense,
           "py-1.5": isDense,
@@ -109,6 +115,7 @@ export function useListSection(props: ListSectionProps) {
     label,
     merged,
     rootBind,
+    isHidden,
     titleBind,
   };
 }
diff --git a/packages/react/src/Components/Sidebar/Sidebar.tsx b/packages/react/src/Components/Sidebar/Sidebar.tsx
new file mode 100644
index 00000000..6e27fde1
--- /dev/null
+++ b/packages/react/src/Components/Sidebar/Sidebar.tsx
@@ -0,0 +1,103 @@
+// ** Local Imports
+import { Drawer } from "@/Components/Drawer";
+import { useSidebarShell } from "@/Components/Sidebar/hooks/useSidebarShell";
+import type { SidebarProps } from "@/Components/Sidebar/sidebar.types";
+import { hasNamedSlot } from "@/Utils";
+
+const sidebarLibDefaults = {
+  side: "left",
+  variant: "sidebar",
+  ariaLabel: "Sidebar",
+  collapsible: "offcanvas",
+} as const;
+
+function SidebarPanelBody({
+  slots,
+  children,
+  headerBind,
+  footerBind,
+  contentBind,
+}: Pick<
+  ReturnType<typeof useSidebarShell>,
+  "slots" | "children" | "footerBind" | "headerBind" | "contentBind"
+>) {
+  return (
+    <>
+      {hasNamedSlot(slots, "header") ? (
+        <div {...headerBind}>{slots?.header}</div>
+      ) : null}
+
+      <div {...contentBind}>{children}</div>
+
+      {hasNamedSlot(slots, "footer") ? (
+        <div {...footerBind}>{slots?.footer}</div>
+      ) : null}
+    </>
+  );
+}
+
+function Sidebar(props: SidebarProps) {
+  const {
+    slots,
+    merged,
+    panelId,
+    gapBind,
+    children,
+    rootBind,
+    isMobile,
+    asideBind,
+    panelBind,
+    headerBind,
+    footerBind,
+    openMobile,
+    contentBind,
+    mobileWidth,
+    showAsDrawer,
+    setOpenMobile,
+  } = useSidebarShell(props, sidebarLibDefaults);
+
+  const body = (
+    <SidebarPanelBody
+      slots={slots}
+      children={children}
+      headerBind={headerBind}
+      footerBind={footerBind}
+      contentBind={contentBind}
+    />
+  );
+
+  return (
+    <>
+      <div {...rootBind}>
+        <div {...gapBind} />
+
+        <aside {...asideBind}>
+          <div {...panelBind}>{showAsDrawer ? null : body}</div>
+        </aside>
+      </div>
+
+      {isMobile ? (
+        <Drawer
+          show={openMobile}
+          placement={merged.side}
+          ariaLabel={merged.ariaLabel}
+          onShowChange={setOpenMobile}
+          customProps={{
+            panel: {
+              className: "p-0",
+              id: showAsDrawer ? panelId : undefined,
+              style: {
+                width: mobileWidth,
+                maxWidth: `min(${mobileWidth}, 88vw)`,
+              },
+            },
+          }}
+        >
+          <div {...panelBind}>{showAsDrawer ? body : null}</div>
+        </Drawer>
+      ) : null}
+    </>
+  );
+}
+
+export default Sidebar;
diff --git a/packages/react/src/Components/Sidebar/SidebarContext.tsx b/packages/react/src/Components/Sidebar/SidebarContext.tsx
new file mode 100644
index 00000000..a50a68cc
--- /dev/null
+++ b/packages/react/src/Components/Sidebar/SidebarContext.tsx
@@ -0,0 +1,122 @@
+// ** External Imports
+import { createContext, useContext } from "react";
+
+// ** Core Imports
+import type {
+  SidebarCollapsibleMode,
+  SidebarState,
+} from "@bridge-ui/core/Domain";
+import type {
+  SidebarCollapsible,
+  SidebarSide,
+  SidebarVariant,
+} from "@bridge-ui/core/Tokens";
+
+/**
+ * Layout fields registered by `Sidebar` for inset / trigger consumers.
+ */
+export type SidebarLayout = {
+  /**
+   * Desktop collapse mode.
+   */
+  collapsible: keyof SidebarCollapsible;
+
+  /**
+   * Id of the visible panel (`aria-controls`).
+   */
+  panelId: string;
+
+  /**
+   * Dock edge.
+   */
+  side: keyof SidebarSide;
+
+  /**
+   * Visual variant.
+   */
+  variant: keyof SidebarVariant;
+};
+
+/**
+ * Shared sidebar state for `Sidebar`, `SidebarInset`, and `SidebarTrigger`.
+ */
+export type SidebarContextValue = {
+  /**
+   * Desktop collapse mode from the nearest `Sidebar`.
+   */
+  collapsible: keyof SidebarCollapsible;
+
+  /**
+   * Whether the viewport is below the mobile breakpoint.
+   */
+  isMobile: boolean;
+
+  /**
+   * Desktop expanded state.
+   */
+  open: boolean;
+
+  /**
+   * Mobile drawer visibility.
+   */
+  openMobile: boolean;
+
+  /**
+   * Id of the visible panel for `aria-controls`.
+   */
+  panelId: string;
+
+  /**
+   * Sets layout fields from the `Sidebar` panel.
+   *
+   * @internal
+   */
+  setLayout: (layout: Partial<SidebarLayout>) => void;
+
+  /**
+   * Sets the desktop expanded state.
+   */
+  setOpen: (open: boolean) => void;
+
+  /**
+   * Sets the mobile drawer visibility.
+   */
+  setOpenMobile: (open: boolean) => void;
+
+  /**
+   * Dock edge from the nearest `Sidebar`.
+   */
+  side: keyof SidebarSide;
+
+  /**
+   * Desktop visual state (`expanded` / `collapsed`).
+   */
+  state: SidebarState;
+
+  /**
+   * Toggles desktop `open` or mobile `openMobile` based on viewport.
+   */
+  toggleSidebar: () => void;
+
+  /**
+   * Visual variant from the nearest `Sidebar`.
+   */
+  variant: keyof SidebarVariant;
+};
+
+export const SidebarContext = createContext<null | SidebarContextValue>(null);
+
+/**
+ * Reads the nearest `SidebarProvider` context. Throws when used outside it.
+ */
+export function useSidebar(): SidebarContextValue {
+  const context = useContext(SidebarContext);
+
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider");
+  }
+
+  return context;
+}
+
+export type { SidebarCollapsibleMode };
diff --git a/packages/react/src/Components/Sidebar/SidebarInset.tsx b/packages/react/src/Components/Sidebar/SidebarInset.tsx
new file mode 100644
index 00000000..fc937194
--- /dev/null
+++ b/packages/react/src/Components/Sidebar/SidebarInset.tsx
@@ -0,0 +1,11 @@
+// ** Local Imports
+import { useSidebarInset } from "@/Components/Sidebar/hooks/useSidebarInset";
+import type { SidebarInsetProps } from "@/Components/Sidebar/sidebar.types";
+
+function SidebarInset(props: SidebarInsetProps) {
+  const { children, rootBind } = useSidebarInset(props);
+
+  return <main {...rootBind}>{children}</main>;
+}
+
+export default SidebarInset;
diff --git a/packages/react/src/Components/Sidebar/SidebarList.tsx b/packages/react/src/Components/Sidebar/SidebarList.tsx
new file mode 100644
index 00000000..1b399db0
--- /dev/null
+++ b/packages/react/src/Components/Sidebar/SidebarList.tsx
@@ -0,0 +1,39 @@
+// ** Core Imports
+import { cn } from "@bridge-ui/core/Utils";
+
+// ** Local Imports
+import { List } from "@/Components/List";
+import { ListSectionContext } from "@/Components/ListSection/ListSectionContext";
+import { useSidebarList } from "@/Components/Sidebar/hooks/useSidebarList";
+import type { SidebarListProps } from "@/Components/Sidebar/sidebar.types";
+import { SidebarListContext } from "@/Components/Sidebar/SidebarListContext";
+
+function SidebarList({
+  nested,
+  classes,
+  iconOnly: iconOnlyProp,
+  ...props
+}: SidebarListProps) {
+  const { iconOnly, rootClassName } = useSidebarList({
+    nested,
+    iconOnly: iconOnlyProp,
+  });
+
+  return (
+    <SidebarListContext.Provider value={{ iconOnly }}>
+      <ListSectionContext.Provider value={{ hidden: iconOnly }}>
+        <List
+          {...props}
+          nested={nested}
+          hidden={nested === true && iconOnly ? true : undefined}
+          classes={{
+            ...classes,
+            root: cn(rootClassName, classes?.root),
+          }}
+        />
+      </ListSectionContext.Provider>
+    </SidebarListContext.Provider>
+  );
+}
+
+export default SidebarList;
diff --git a/packages/react/src/Components/Sidebar/SidebarListContext.tsx b/packages/react/src/Components/Sidebar/SidebarListContext.tsx
new file mode 100644
index 00000000..6de52b58
--- /dev/null
+++ b/packages/react/src/Components/Sidebar/SidebarListContext.tsx
@@ -0,0 +1,17 @@
+// ** External Imports
+import { createContext, useContext } from "react";
+
+export type SidebarListContextValue = {
+  iconOnly: boolean;
+};
+
+export const SidebarListContext = createContext<null | SidebarListContextValue>(
+  null,
+);
+
+/**
+ * Icon-rail mode from the nearest `SidebarList`.
+ */
+export function useSidebarListContext() {
+  return useContext(SidebarListContext);
+}
diff --git a/packages/react/src/Components/Sidebar/SidebarListItem.tsx b/packages/react/src/Components/Sidebar/SidebarListItem.tsx
new file mode 100644
index 00000000..f55059bf
--- /dev/null
+++ b/packages/react/src/Components/Sidebar/SidebarListItem.tsx
@@ -0,0 +1,65 @@
+// ** Core Imports
+import { cn } from "@bridge-ui/core/Utils";
+
+// ** Local Imports
+import { ListItem } from "@/Components/ListItem";
+import { useSidebarListItem } from "@/Components/Sidebar/hooks/useSidebarListItem";
+import type { SidebarListItemProps } from "@/Components/Sidebar/sidebar.types";
+import { Tooltip } from "@/Components/Tooltip";
+
+function SidebarListItem({
+  classes,
+  customProps,
+  tooltip: tooltipProp,
+  tooltipPlacement: tooltipPlacementProp,
+  ...props
+}: SidebarListItemProps) {
+  const { tooltip, itemClasses, accessibleName, tooltipPlacement } =
+    useSidebarListItem({
+      tooltip: tooltipProp,
+      primary: props.primary,
+      secondary: props.secondary,
+      tooltipPlacement: tooltipPlacementProp,
+    });
+
+  const item = (
+    <ListItem
+      {...props}
+      as={tooltip ? "div" : props.as}
+      customProps={{
+        ...customProps,
+        interactive: {
+          "aria-label": accessibleName,
+          ...customProps?.interactive,
+        },
+      }}
+      classes={{
+        ...classes,
+        end: cn(itemClasses.end, classes?.end),
+        start: cn(itemClasses.start, classes?.start),
+        content: cn(itemClasses.content, classes?.content),
+        interactive: cn(itemClasses.interactive, classes?.interactive),
+      }}
+    />
+  );
+
+  if (!tooltip) {
+    return item;
+  }
+
+  return (
+    <li className="list-none">
+      <Tooltip
+        content={tooltip}
+        slots={{ trigger: item }}
+        placement={tooltipPlacement}
+        classes={{
+          root: "flex w-full min-w-0",
+          trigger: "flex w-full min-w-0",
+        }}
+      />
+    </li>
+  );
+}
+
+export default SidebarListItem;
diff --git a/packages/react/src/Components/Sidebar/SidebarProvider.tsx b/packages/react/src/Components/Sidebar/SidebarProvider.tsx
new file mode 100644
index 00000000..bde61c61
--- /dev/null
+++ b/packages/react/src/Components/Sidebar/SidebarProvider.tsx
@@ -0,0 +1,23 @@
+// ** Local Imports
+import { useSidebarProvider } from "@/Components/Sidebar/hooks/useSidebarProvider";
+import type { SidebarProviderProps } from "@/Components/Sidebar/sidebar.types";
+import { SidebarContext } from "@/Components/Sidebar/SidebarContext";
+
+const sidebarProviderLibDefaults = {
+  defaultOpen: true,
+} as const;
+
+function SidebarProvider(props: SidebarProviderProps) {
+  const { children, rootBind, contextValue } = useSidebarProvider(
+    props,
+    sidebarProviderLibDefaults,
+  );
+
+  return (
+    <SidebarContext.Provider value={contextValue}>
+      <div {...rootBind}>{children}</div>
+    </SidebarContext.Provider>
+  );
+}
+
+export default SidebarProvider;
diff --git a/packages/react/src/Components/Sidebar/SidebarTrigger.tsx b/packages/react/src/Components/Sidebar/SidebarTrigger.tsx
new file mode 100644
index 00000000..d10f48ea
--- /dev/null
+++ b/packages/react/src/Components/Sidebar/SidebarTrigger.tsx
@@ -0,0 +1,31 @@
+// ** Local Imports
+import { Button } from "@/Components/Button";
+import { useSidebarTrigger } from "@/Components/Sidebar/hooks/useSidebarTrigger";
+import type { SidebarTriggerProps } from "@/Components/Sidebar/sidebar.types";
+
+function SidebarTrigger(props: SidebarTriggerProps) {
+  const { side, panelId, children, expanded, handleClick, rootInheritedAttrs } =
+    useSidebarTrigger(props);
+
+  return (
+    <Button
+      {...rootInheritedAttrs}
+      color="dark"
+      type="button"
+      density="mini"
+      variant="light"
+      onClick={handleClick}
+      aria-expanded={expanded}
+      aria-controls={panelId || undefined}
+      icon={children ? undefined : "panelLeft"}
+      aria-label={props["aria-label"] ?? "Toggle sidebar"}
+      classes={{
+        icon: side === "right" ? "rotate-180 rtl:rotate-0" : "rtl:rotate-180",
+      }}
+    >
+      {children}
+    </Button>
+  );
+}
+
+export default SidebarTrigger;
diff --git a/packages/react/src/Components/Sidebar/__tests__/Sidebar.cy.tsx b/packages/react/src/Components/Sidebar/__tests__/Sidebar.cy.tsx
new file mode 100644
index 00000000..31ebb4e5
--- /dev/null
+++ b/packages/react/src/Components/Sidebar/__tests__/Sidebar.cy.tsx
@@ -0,0 +1,75 @@
+// ** Local Imports
+import {
+  Sidebar,
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/Components/Sidebar";
+
+test("it should render the sidebar and inset", () => {
+  cy.mount(
+    <SidebarProvider>
+      <Sidebar>Home</Sidebar>
+      <SidebarInset>
+        <SidebarTrigger />
+        Main
+      </SidebarInset>
+    </SidebarProvider>,
+  );
+
+  cy.contains("Home").should("exist");
+  cy.contains("Main").should("be.visible");
+  cy.get("button[aria-label='Toggle sidebar']").should("be.visible");
+});
+
+test("it should collapse when the trigger is clicked", () => {
+  cy.mount(
+    <SidebarProvider>
+      <Sidebar>Home</Sidebar>
+      <SidebarInset>
+        <SidebarTrigger />
+        Main
+      </SidebarInset>
+    </SidebarProvider>,
+  );
+
+  cy.get("[data-state='expanded']").should("exist");
+  cy.get("button[aria-label='Toggle sidebar']").click();
+  cy.get("[data-state='collapsed']").should("exist");
+});
+
+test("it should render header and footer slot content", () => {
+  cy.mount(
+    <SidebarProvider>
+      <Sidebar
+        slots={{
+          header: <div>Brand</div>,
+          footer: <div>Account</div>,
+        }}
+      >
+        Nav
+      </Sidebar>
+      <SidebarInset>
+        <SidebarTrigger />
+      </SidebarInset>
+    </SidebarProvider>,
+  );
+
+  cy.contains("Brand").should("exist");
+  cy.contains("Account").should("exist");
+});
+
+test("it should inert the aside when offcanvas is collapsed", () => {
+  cy.mount(
+    <SidebarProvider>
+      <Sidebar>Home</Sidebar>
+      <SidebarInset>
+        <SidebarTrigger />
+        Main
+      </SidebarInset>
+    </SidebarProvider>,
+  );
+
+  cy.get("button[aria-label='Toggle sidebar']").click();
+  cy.get("aside").should("have.attr", "inert");
+});
diff --git a/packages/react/src/Components/Sidebar/__tests__/Sidebar.test.tsx b/packages/react/src/Components/Sidebar/__tests__/Sidebar.test.tsx
new file mode 100644
index 00000000..8171e2d2
--- /dev/null
+++ b/packages/react/src/Components/Sidebar/__tests__/Sidebar.test.tsx
@@ -0,0 +1,275 @@
+// ** External Imports
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, expect, test } from "vitest";
+
+// ** Local Imports
+import { ListSection } from "@/Components/ListSection";
+import {
+  Sidebar,
+  SidebarInset,
+  SidebarList,
+  SidebarListItem,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/Components/Sidebar";
+
+afterEach(() => {
+  cleanup();
+});
+
+function AppShell({
+  open,
+  defaultOpen,
+  collapsible,
+  onOpenChange,
+}: {
+  collapsible?: "icon" | "none" | "offcanvas";
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  open?: boolean;
+}) {
+  return (
+    <SidebarProvider
+      open={open}
+      defaultOpen={defaultOpen}
+      onOpenChange={onOpenChange}
+    >
+      <Sidebar collapsible={collapsible}>
+        <nav>Home</nav>
+      </Sidebar>
+      <SidebarInset>
+        <SidebarTrigger />
+        <p>Main</p>
+      </SidebarInset>
+    </SidebarProvider>
+  );
+}
+
+test("it should render the sidebar aside and main inset", () => {
+  render(<AppShell />);
+
+  expect(screen.getByText("Home")).toBeTruthy();
+  expect(screen.getByText("Main")).toBeTruthy();
+  expect(screen.getByRole("complementary", { name: "Sidebar" })).toBeTruthy();
+});
+
+test("it should default to expanded desktop state", () => {
+  const { container } = render(<AppShell />);
+
+  expect(container.querySelector('[data-state="expanded"]')).not.toBeNull();
+});
+
+test("it should toggle desktop open when the trigger is clicked", () => {
+  const { container } = render(<AppShell />);
+
+  fireEvent.click(screen.getByRole("button", { name: "Toggle sidebar" }));
+
+  expect(container.querySelector('[data-state="collapsed"]')).not.toBeNull();
+});
+
+test("it should call onOpenChange when the trigger is clicked", () => {
+  const onOpenChange = (open: boolean) => {
+    calls.push(open);
+  };
+  const calls: boolean[] = [];
+
+  render(<AppShell onOpenChange={onOpenChange} />);
+
+  fireEvent.click(screen.getByRole("button", { name: "Toggle sidebar" }));
+
+  expect(calls).toEqual([false]);
+});
+
+test("it should keep expanded state when collapsible is none", () => {
+  const { container } = render(<AppShell collapsible="none" />);
+
+  fireEvent.click(screen.getByRole("button", { name: "Toggle sidebar" }));
+
+  expect(container.querySelector('[data-state="expanded"]')).not.toBeNull();
+  expect(container.querySelector('[data-state="collapsed"]')).toBeNull();
+});
+
+test("it should render header and footer slots", () => {
+  render(
+    <SidebarProvider>
+      <Sidebar
+        slots={{
+          footer: <div>User</div>,
+          header: <div>Brand</div>,
+        }}
+      >
+        Nav
+      </Sidebar>
+      <SidebarInset>
+        <SidebarTrigger />
+      </SidebarInset>
+    </SidebarProvider>,
+  );
+
+  expect(screen.getByText("Brand")).toBeTruthy();
+  expect(screen.getByText("User")).toBeTruthy();
+});
+
+test("it should mark the trigger as expanded by default", () => {
+  render(<AppShell />);
+
+  expect(
+    screen
+      .getByRole("button", { name: "Toggle sidebar" })
+      .getAttribute("aria-expanded"),
+  ).toBe("true");
+});
+
+test("it should dock the left aside and slide it off-canvas by offsetting left", () => {
+  const { container } = render(<AppShell />);
+  const aside = container.querySelector("aside");
+
+  expect(aside?.className).toContain("left-0");
+  expect(aside?.className).toContain("overflow-hidden");
+  expect(aside?.className).toContain(
+    "left-[calc(var(--bridge-sidebar-width)*-1)]",
+  );
+});
+
+test("it should apply data-side from the side prop", () => {
+  const { container } = render(
+    <SidebarProvider>
+      <Sidebar side="right">Nav</Sidebar>
+      <SidebarInset>
+        <SidebarTrigger />
+      </SidebarInset>
+    </SidebarProvider>,
+  );
+
+  expect(container.querySelector('[data-side="right"]')).not.toBeNull();
+});
+
+test("it should inert the aside when offcanvas is collapsed", () => {
+  const { container } = render(<AppShell />);
+
+  fireEvent.click(screen.getByRole("button", { name: "Toggle sidebar" }));
+
+  expect(container.querySelector("aside")?.hasAttribute("inert")).toBe(true);
+});
+
+test("it should not inert the aside when icon mode is collapsed", () => {
+  const { container } = render(<AppShell collapsible="icon" />);
+
+  fireEvent.click(screen.getByRole("button", { name: "Toggle sidebar" }));
+
+  expect(container.querySelector("aside")?.hasAttribute("inert")).toBe(false);
+});
+
+test("it should collapse SidebarList items when the icon rail is collapsed", () => {
+  render(
+    <SidebarProvider defaultOpen={false}>
+      <Sidebar collapsible="icon">
+        <SidebarList>
+          <SidebarListItem interactive primary="Home" />
+        </SidebarList>
+      </Sidebar>
+      <SidebarInset>
+        <SidebarTrigger />
+      </SidebarInset>
+    </SidebarProvider>,
+  );
+
+  expect(
+    screen.getByRole("button", { name: "Home" }).getAttribute("aria-label"),
+  ).toBe("Home");
+});
+
+test("it should collapse header rows with secondary to a square hit", () => {
+  render(
+    <SidebarProvider defaultOpen={false}>
+      <Sidebar
+        collapsible="icon"
+        slots={{
+          header: (
+            <SidebarList classes={{ root: "p-0" }}>
+              <SidebarListItem
+                interactive
+                primary="Acme Inc"
+                secondary="Enterprise"
+              />
+            </SidebarList>
+          ),
+        }}
+      >
+        <SidebarList>
+          <SidebarListItem interactive primary="Home" />
+        </SidebarList>
+      </Sidebar>
+      <SidebarInset>
+        <SidebarTrigger />
+      </SidebarInset>
+    </SidebarProvider>,
+  );
+
+  const item = screen.getByRole("button", { name: "Acme Inc" });
+
+  expect(item.className).toContain("size-8");
+  expect(item.className).toContain("p-0");
+  expect(item.className).not.toMatch(/\bpx-4\b/);
+});
+
+test("it should apply nav chrome on SidebarList and SidebarListItem", () => {
+  const { container } = render(
+    <SidebarProvider>
+      <Sidebar>
+        <SidebarList>
+          <SidebarListItem interactive primary="Home" />
+        </SidebarList>
+      </Sidebar>
+      <SidebarInset>
+        <SidebarTrigger />
+      </SidebarInset>
+    </SidebarProvider>,
+  );
+
+  const item = screen.getByRole("button", { name: "Home" });
+
+  expect(container.querySelector("ul")?.className).toContain("gap-1");
+  expect(item.className).toContain("min-h-8");
+  expect(item.className).toContain("rounded-lg");
+});
+
+test("it should hide nested SidebarList when the icon rail is collapsed", () => {
+  const { container } = render(
+    <SidebarProvider defaultOpen={false}>
+      <Sidebar collapsible="icon">
+        <SidebarList>
+          <SidebarListItem interactive primary="Home" />
+          <SidebarList nested>
+            <SidebarListItem interactive primary="Nested" />
+          </SidebarList>
+        </SidebarList>
+      </Sidebar>
+      <SidebarInset>
+        <SidebarTrigger />
+      </SidebarInset>
+    </SidebarProvider>,
+  );
+
+  expect(container.querySelectorAll("ul")[1]?.hasAttribute("hidden")).toBe(
+    true,
+  );
+});
+
+test("it should hide ListSection when the icon rail is collapsed", () => {
+  render(
+    <SidebarProvider defaultOpen={false}>
+      <Sidebar collapsible="icon">
+        <SidebarList>
+          <ListSection title="Application" />
+          <SidebarListItem interactive primary="Home" />
+        </SidebarList>
+      </Sidebar>
+      <SidebarInset>
+        <SidebarTrigger />
+      </SidebarInset>
+    </SidebarProvider>,
+  );
+
+  expect(screen.queryByText("Application")).toBeNull();
+});
diff --git a/packages/react/src/Components/Sidebar/__tests__/useSidebar.test.tsx b/packages/react/src/Components/Sidebar/__tests__/useSidebar.test.tsx
new file mode 100644
index 00000000..e9b21577
--- /dev/null
+++ b/packages/react/src/Components/Sidebar/__tests__/useSidebar.test.tsx
@@ -0,0 +1,62 @@
+// ** External Imports
+import { cleanup, renderHook } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { act } from "react";
+import { afterEach, expect, test } from "vitest";
+
+// ** Local Imports
+import { Sidebar, SidebarProvider, useSidebar } from "@/Components/Sidebar";
+
+afterEach(() => {
+  cleanup();
+});
+
+function wrapper({ children }: { children: ReactNode }) {
+  return (
+    <SidebarProvider>
+      <Sidebar>{children}</Sidebar>
+    </SidebarProvider>
+  );
+}
+
+test("it should throw when used outside SidebarProvider", () => {
+  expect(() => {
+    renderHook(() => useSidebar());
+  }).toThrow("useSidebar must be used within a SidebarProvider");
+});
+
+test("it should default to open expanded state", () => {
+  const { result } = renderHook(() => useSidebar(), { wrapper });
+
+  expect(result.current.open).toBe(true);
+  expect(result.current.state).toBe("expanded");
+  expect(result.current.openMobile).toBe(false);
+});
+
+test("it should toggle desktop open", () => {
+  const { result } = renderHook(() => useSidebar(), { wrapper });
+
+  act(() => {
+    result.current.toggleSidebar();
+  });
+
+  expect(result.current.open).toBe(false);
+  expect(result.current.state).toBe("collapsed");
+});
+
+test("it should expose side and collapsible from Sidebar", () => {
+  function iconWrapper({ children }: { children: ReactNode }) {
+    return (
+      <SidebarProvider>
+        <Sidebar side="right" collapsible="icon">
+          {children}
+        </Sidebar>
+      </SidebarProvider>
+    );
+  }
+
+  const { result } = renderHook(() => useSidebar(), { wrapper: iconWrapper });
+
+  expect(result.current.side).toBe("right");
+  expect(result.current.collapsible).toBe("icon");
+});
diff --git a/packages/react/src/Components/Sidebar/__tests__/useSidebarList.test.tsx b/packages/react/src/Components/Sidebar/__tests__/useSidebarList.test.tsx
new file mode 100644
index 00000000..100c44d3
--- /dev/null
+++ b/packages/react/src/Components/Sidebar/__tests__/useSidebarList.test.tsx
@@ -0,0 +1,73 @@
+// ** External Imports
+import { renderHook } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { expect, test } from "vitest";
+
+// ** Local Imports
+import { Sidebar, SidebarProvider, useSidebarList } from "@/Components/Sidebar";
+
+function collapsedIconWrapper({ children }: { children: ReactNode }) {
+  return (
+    <SidebarProvider defaultOpen={false}>
+      <Sidebar collapsible="icon">{children}</Sidebar>
+    </SidebarProvider>
+  );
+}
+
+function expandedIconWrapper({ children }: { children: ReactNode }) {
+  return (
+    <SidebarProvider>
+      <Sidebar collapsible="icon">{children}</Sidebar>
+    </SidebarProvider>
+  );
+}
+
+test("it should set iconOnly when the icon rail is collapsed", () => {
+  const { result } = renderHook(() => useSidebarList({}), {
+    wrapper: collapsedIconWrapper,
+  });
+
+  expect(result.current.iconOnly).toBe(true);
+});
+
+test("it should not set iconOnly when the icon rail is expanded", () => {
+  const { result } = renderHook(() => useSidebarList({}), {
+    wrapper: expandedIconWrapper,
+  });
+
+  expect(result.current.iconOnly).toBe(false);
+});
+
+test("it should allow iconOnly to be overridden", () => {
+  const { result } = renderHook(() => useSidebarList({ iconOnly: false }), {
+    wrapper: collapsedIconWrapper,
+  });
+
+  expect(result.current.iconOnly).toBe(false);
+});
+
+test("it should apply stacked nav chrome on the list root", () => {
+  const { result } = renderHook(() => useSidebarList({}), {
+    wrapper: expandedIconWrapper,
+  });
+
+  expect(result.current.rootClassName).toContain("px-2");
+  expect(result.current.rootClassName).toContain("gap-1");
+});
+
+test("it should apply a nested start-edge guide line", () => {
+  const { result } = renderHook(() => useSidebarList({ nested: true }), {
+    wrapper: expandedIconWrapper,
+  });
+
+  expect(result.current.rootClassName).toContain("ml-3.5");
+  expect(result.current.rootClassName).toContain("border-l");
+});
+
+test("it should hide nested lists when the icon rail is collapsed", () => {
+  const { result } = renderHook(() => useSidebarList({ nested: true }), {
+    wrapper: collapsedIconWrapper,
+  });
+
+  expect(result.current.rootClassName).toContain("hidden");
+});
diff --git a/packages/react/src/Components/Sidebar/__tests__/useSidebarListItem.test.tsx b/packages/react/src/Components/Sidebar/__tests__/useSidebarListItem.test.tsx
new file mode 100644
index 00000000..8da2dd0f
--- /dev/null
+++ b/packages/react/src/Components/Sidebar/__tests__/useSidebarListItem.test.tsx
@@ -0,0 +1,152 @@
+// ** External Imports
+import { renderHook } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { expect, test } from "vitest";
+
+// ** Local Imports
+import {
+  Sidebar,
+  SidebarProvider,
+  useSidebarListItem,
+} from "@/Components/Sidebar";
+
+function collapsedIconWrapper({
+  side,
+  children,
+}: {
+  children: ReactNode;
+  side?: "left" | "right";
+}) {
+  return (
+    <SidebarProvider defaultOpen={false}>
+      <Sidebar side={side} collapsible="icon">
+        {children}
+      </Sidebar>
+    </SidebarProvider>
+  );
+}
+
+test("it should use primary as tooltip when the icon rail is collapsed", () => {
+  const { result } = renderHook(() => useSidebarListItem({ primary: "Home" }), {
+    wrapper: ({ children }: { children: ReactNode }) => {
+      return collapsedIconWrapper({ children });
+    },
+  });
+
+  expect(result.current.tooltip).toBe("Home");
+  expect(result.current.tooltipPlacement).toBe("right");
+});
+
+test("it should place the tooltip opposite a right rail", () => {
+  const { result } = renderHook(() => useSidebarListItem({ primary: "Home" }), {
+    wrapper: ({ children }: { children: ReactNode }) => {
+      return collapsedIconWrapper({ children, side: "right" });
+    },
+  });
+
+  expect(result.current.tooltipPlacement).toBe("left");
+});
+
+test("it should omit the tooltip when the rail is expanded", () => {
+  const { result } = renderHook(() => useSidebarListItem({ primary: "Home" }), {
+    wrapper: ({ children }: { children: ReactNode }) => {
+      return (
+        <SidebarProvider>
+          <Sidebar collapsible="icon">{children}</Sidebar>
+        </SidebarProvider>
+      );
+    },
+  });
+
+  expect(result.current.tooltip).toBeUndefined();
+});
+
+test("it should omit an explicit tooltip when the rail is expanded", () => {
+  const { result } = renderHook(
+    () => useSidebarListItem({ primary: "Home", tooltip: "Go home" }),
+    {
+      wrapper: ({ children }: { children: ReactNode }) => {
+        return (
+          <SidebarProvider>
+            <Sidebar collapsible="icon">{children}</Sidebar>
+          </SidebarProvider>
+        );
+      },
+    },
+  );
+
+  expect(result.current.tooltip).toBeUndefined();
+});
+
+test("it should use an explicit tooltip when the icon rail is collapsed", () => {
+  const { result } = renderHook(
+    () => useSidebarListItem({ primary: "Home", tooltip: "Go home" }),
+    {
+      wrapper: ({ children }: { children: ReactNode }) => {
+        return collapsedIconWrapper({ children });
+      },
+    },
+  );
+
+  expect(result.current.tooltip).toBe("Go home");
+});
+
+test("it should apply compact nav chrome when the rail is expanded", () => {
+  const { result } = renderHook(() => useSidebarListItem({ primary: "Home" }), {
+    wrapper: ({ children }: { children: ReactNode }) => {
+      return (
+        <SidebarProvider>
+          <Sidebar collapsible="icon">{children}</Sidebar>
+        </SidebarProvider>
+      );
+    },
+  });
+
+  expect(result.current.itemClasses.interactive).toContain("min-h-8");
+  expect(result.current.itemClasses.interactive).toContain("rounded-lg");
+});
+
+test("it should apply a taller hit when secondary is set", () => {
+  const { result } = renderHook(
+    () => useSidebarListItem({ primary: "Acme Inc", secondary: "Enterprise" }),
+    {
+      wrapper: ({ children }: { children: ReactNode }) => {
+        return (
+          <SidebarProvider>
+            <Sidebar collapsible="icon">{children}</Sidebar>
+          </SidebarProvider>
+        );
+      },
+    },
+  );
+
+  expect(result.current.itemClasses.interactive).toContain("py-2");
+  expect(result.current.itemClasses.interactive).toContain("min-h-12");
+});
+
+test("it should apply a compact hit when the icon rail is collapsed", () => {
+  const { result } = renderHook(() => useSidebarListItem({ primary: "Home" }), {
+    wrapper: ({ children }: { children: ReactNode }) => {
+      return collapsedIconWrapper({ children });
+    },
+  });
+
+  expect(result.current.itemClasses.interactive).toContain("h-8");
+  expect(result.current.itemClasses.content).toContain("hidden");
+});
+
+test("it should square the hit when secondary is set on the icon rail", () => {
+  const { result } = renderHook(
+    () => useSidebarListItem({ primary: "Acme Inc", secondary: "Enterprise" }),
+    {
+      wrapper: ({ children }: { children: ReactNode }) => {
+        return collapsedIconWrapper({ children });
+      },
+    },
+  );
+
+  expect(result.current.itemClasses.interactive).toContain("size-8");
+  expect(result.current.itemClasses.interactive).toContain("p-0");
+  expect(result.current.itemClasses.content).toContain("hidden");
+  expect(result.current.itemClasses.end).toContain("hidden");
+});
diff --git a/packages/react/src/Components/Sidebar/hooks/useSidebar.ts b/packages/react/src/Components/Sidebar/hooks/useSidebar.ts
new file mode 100644
index 00000000..e3d81433
--- /dev/null
+++ b/packages/react/src/Components/Sidebar/hooks/useSidebar.ts
@@ -0,0 +1,3 @@
+// ** Local Imports
+export { useSidebar } from "@/Components/Sidebar/SidebarContext";
+export type { SidebarContextValue } from "@/Components/Sidebar/SidebarContext";
diff --git a/packages/react/src/Components/Sidebar/hooks/useSidebarInset.ts b/packages/react/src/Components/Sidebar/hooks/useSidebarInset.ts
new file mode 100644
index 00000000..6768b9d1
--- /dev/null
+++ b/packages/react/src/Components/Sidebar/hooks/useSidebarInset.ts
@@ -0,0 +1,80 @@
+// ** External Imports
+import { get, omit } from "es-toolkit/compat";
+import { useMemo } from "react";
+
+// ** Core Imports
+import { sidebarVariantProps as variantProps } from "@bridge-ui/core/Tokens";
+import {
+  cn,
+  mergeBridgeUILayeredClasses,
+  splitComponentProps,
+} from "@bridge-ui/core/Utils";
+
+// ** Local Imports
+import type {
+  SidebarInsetOwnProps,
+  SidebarInsetProps,
+} from "@/Components/Sidebar/sidebar.types";
+import { useSidebar } from "@/Components/Sidebar/SidebarContext";
+import { derived, mergePartBind, useBridgeUIComponent } from "@/Utils";
+
+const sidebarInsetBridgeKeys = [
+  "classes",
+  "customProps",
+] as const satisfies readonly (keyof SidebarInsetOwnProps)[];
+
+export function useSidebarInset(props: SidebarInsetProps) {
+  const sidebar = useSidebar();
+
+  const { componentProps, inheritedAttrs } = splitComponentProps<
+    SidebarInsetProps,
+    typeof sidebarInsetBridgeKeys
+  >({
+    props,
+    bridgeKeys: sidebarInsetBridgeKeys,
+  });
+
+  const { merged, entry: bridgeSidebar } = useBridgeUIComponent<
+    SidebarInsetOwnProps,
+    "Sidebar"
+  >({
+    props: componentProps,
+    componentName: "Sidebar",
+  });
+
+  const children = derived(() => {
+    return props.children;
+  });
+
+  const rootInheritedAttrs = derived(() => {
+    return omit(inheritedAttrs, ["children"]);
+  });
+
+  const customProps = derived(() => {
+    return merged.customProps as SidebarInsetOwnProps["customProps"];
+  });
+
+  const variantItem = useMemo(() => {
+    const classes = mergeBridgeUILayeredClasses(
+      variantProps,
+      bridgeSidebar?.tokens?.variant,
+    );
+
+    return get(classes, sidebar.variant);
+  }, [sidebar.variant, bridgeSidebar?.tokens?.variant]);
+
+  const rootBind = derived(() => {
+    return mergePartBind(customProps?.root, rootInheritedAttrs, {
+      className: cn({
+        [get(variantItem, "inset") ?? ""]: true,
+        [get(merged.classes, "root") ?? ""]: true,
+      }),
+    });
+  });
+
+  return {
+    merged,
+    children,
+    rootBind,
+  };
+}
diff --git a/packages/react/src/Components/Sidebar/hooks/useSidebarList.ts b/packages/react/src/Components/Sidebar/hooks/useSidebarList.ts
new file mode 100644
index 00000000..04a75eea
--- /dev/null
+++ b/packages/react/src/Components/Sidebar/hooks/useSidebarList.ts
@@ -0,0 +1,47 @@
+// ** Core Imports
+import { isSidebarIconOnly } from "@bridge-ui/core/Domain";
+import { cn } from "@bridge-ui/core/Utils";
+
+// ** Local Imports
+import { useSidebar } from "@/Components/Sidebar/SidebarContext";
+import { useSidebarListContext } from "@/Components/Sidebar/SidebarListContext";
+import type { SidebarListProps } from "@/Components/Sidebar/sidebar.types";
+import { derived } from "@/Utils";
+
+/**
+ * Binds icon-rail mode and applies nav chrome.
+ */
+export function useSidebarList(
+  props: Pick<SidebarListProps, "nested" | "iconOnly">,
+) {
+  const sidebar = useSidebar();
+  const parent = useSidebarListContext();
+
+  const iconOnly = derived(() => {
+    if (props.iconOnly !== undefined) {
+      return props.iconOnly === true;
+    }
+
+    if (parent) {
+      return parent.iconOnly;
+    }
+
+    return isSidebarIconOnly({
+      state: sidebar.state,
+      isMobile: sidebar.isMobile,
+      collapsible: sidebar.collapsible,
+    });
+  });
+
+  const rootClassName = derived(() => {
+    return cn({
+      "flex flex-col gap-1": true,
+      "px-2": props.nested !== true,
+      "ml-3.5 translate-x-px border-l border-dark-200 py-0.5 pl-2.5 dark:border-dark-700":
+        props.nested === true,
+      hidden: props.nested === true && iconOnly,
+    });
+  });
+
+  return { iconOnly, rootClassName };
+}
diff --git a/packages/react/src/Components/Sidebar/hooks/useSidebarListItem.ts b/packages/react/src/Components/Sidebar/hooks/useSidebarListItem.ts
new file mode 100644
index 00000000..0858b76f
--- /dev/null
+++ b/packages/react/src/Components/Sidebar/hooks/useSidebarListItem.ts
@@ -0,0 +1,96 @@
+// ** Core Imports
+import {
+  isSidebarIconOnly,
+  resolveSidebarListTooltipPlacement,
+} from "@bridge-ui/core/Domain";
+import { cn } from "@bridge-ui/core/Utils";
+
+// ** Local Imports
+import { useSidebar } from "@/Components/Sidebar/SidebarContext";
+import { useSidebarListContext } from "@/Components/Sidebar/SidebarListContext";
+import type { SidebarListItemProps } from "@/Components/Sidebar/sidebar.types";
+import { derived, isPropPresent } from "@/Utils";
+
+/**
+ * Tooltip and nav chrome for a rail item.
+ */
+export function useSidebarListItem(
+  props: Pick<
+    SidebarListItemProps,
+    "primary" | "tooltip" | "secondary" | "tooltipPlacement"
+  >,
+) {
+  const sidebar = useSidebar();
+  const list = useSidebarListContext();
+
+  const iconOnly = derived(() => {
+    if (list) {
+      return list.iconOnly;
+    }
+
+    return isSidebarIconOnly({
+      state: sidebar.state,
+      isMobile: sidebar.isMobile,
+      collapsible: sidebar.collapsible,
+    });
+  });
+
+  const tooltip = derived(() => {
+    if (!iconOnly) {
+      return undefined;
+    }
+
+    if (props.tooltip !== undefined) {
+      return props.tooltip || undefined;
+    }
+
+    if (typeof props.primary !== "string") {
+      return undefined;
+    }
+
+    return props.primary;
+  });
+
+  const tooltipPlacement = derived(() => {
+    if (props.tooltipPlacement !== undefined) {
+      return props.tooltipPlacement;
+    }
+
+    return resolveSidebarListTooltipPlacement(sidebar.side);
+  });
+
+  const accessibleName = derived(() => {
+    if (!iconOnly || typeof props.primary !== "string") {
+      return undefined;
+    }
+
+    return props.primary;
+  });
+
+  const itemClasses = derived(() => {
+    const hasSecondary = isPropPresent(props.secondary);
+
+    return {
+      end: cn({
+        hidden: iconOnly,
+      }),
+      content: cn({
+        hidden: iconOnly,
+      }),
+      start: cn({
+        "items-center justify-center": true,
+      }),
+      interactive: cn({
+        "gap-x-2 overflow-hidden rounded-lg px-2 transition-[width,height,padding] duration-200 ease-linear":
+          !iconOnly,
+        "min-h-12 py-2": !iconOnly && hasSecondary,
+        "min-h-8 py-0": !iconOnly && !hasSecondary,
+        "gap-0 overflow-hidden rounded-lg p-0": iconOnly,
+        "size-8 justify-center": iconOnly && hasSecondary,
+        "h-8 w-full px-2": iconOnly && !hasSecondary,
+      }),
+    };
+  });
+
+  return { tooltip, itemClasses, accessibleName, tooltipPlacement };
+}
diff --git a/packages/react/src/Components/Sidebar/hooks/useSidebarProvider.ts b/packages/react/src/Components/Sidebar/hooks/useSidebarProvider.ts
new file mode 100644
index 00000000..1336766c
--- /dev/null
+++ b/packages/react/src/Components/Sidebar/hooks/useSidebarProvider.ts
@@ -0,0 +1,219 @@
+// ** External Imports
+import { get, omit } from "es-toolkit/compat";
+import { toMerged } from "es-toolkit/object";
+import { useCallback, useMemo, useState, type CSSProperties } from "react";
+
+// ** Core Imports
+import {
+  resolveSidebarState,
+  shouldToggleDesktopSidebar,
+  SIDEBAR_DESKTOP_BREAKPOINT,
+  SIDEBAR_WIDTH_ICON_VAR,
+  SIDEBAR_WIDTH_MOBILE_VAR,
+  SIDEBAR_WIDTH_VAR,
+  toggleSidebarOpen,
+} from "@bridge-ui/core/Domain";
+import {
+  sidebarWidthProps as widthProps,
+  type SidebarWidth,
+} from "@bridge-ui/core/Tokens";
+import {
+  cn,
+  splitComponentProps,
+  type LibDefaultsShape,
+  type MergeLibDefaults,
+} from "@bridge-ui/core/Utils";
+
+// ** Local Imports
+import type {
+  SidebarContextValue,
+  SidebarLayout,
+} from "@/Components/Sidebar/SidebarContext";
+import type {
+  SidebarProviderOwnProps,
+  SidebarProviderProps,
+} from "@/Components/Sidebar/sidebar.types";
+import {
+  derived,
+  mergePartBind,
+  useBreakpoint,
+  useBridgeUIComponent,
+  useBridgeUIMergedRegistryClasses,
+} from "@/Utils";
+
+const sidebarProviderBridgeKeys = [
+  "open",
+  "classes",
+  "customProps",
+  "defaultOpen",
+  "onOpenChange",
+] as const satisfies readonly (keyof (SidebarProviderOwnProps & {
+  onOpenChange?: (open: boolean) => void;
+}))[];
+
+type SidebarProviderLibDefaults = LibDefaultsShape<
+  SidebarProviderOwnProps,
+  "defaultOpen"
+>;
+
+type SidebarProviderMerged = MergeLibDefaults<
+  SidebarProviderOwnProps,
+  SidebarProviderLibDefaults
+>;
+
+const defaultLayout: SidebarLayout = {
+  panelId: "",
+  side: "left",
+  variant: "sidebar",
+  collapsible: "offcanvas",
+};
+
+export function useSidebarProvider(
+  props: SidebarProviderProps,
+  libDefaults: SidebarProviderLibDefaults,
+) {
+  const { componentProps, inheritedAttrs } = splitComponentProps<
+    SidebarProviderProps,
+    typeof sidebarProviderBridgeKeys
+  >({
+    props,
+    bridgeKeys: sidebarProviderBridgeKeys,
+  });
+
+  const { merged, entry: bridgeSidebar } = useBridgeUIComponent<
+    SidebarProviderMerged,
+    "Sidebar"
+  >({
+    libDefaults,
+    props: componentProps,
+    componentName: "Sidebar",
+  });
+
+  const children = derived(() => {
+    return props.children;
+  });
+
+  const rootInheritedAttrs = derived(() => {
+    return omit(inheritedAttrs, ["children"]);
+  });
+
+  const customProps = derived(() => {
+    return merged.customProps;
+  });
+
+  const mergedClasses = useBridgeUIMergedRegistryClasses({
+    entry: bridgeSidebar,
+    props: componentProps,
+  });
+
+  const breakpoint = useBreakpoint();
+  const isMobile = derived(() => {
+    return breakpoint.lessThan(SIDEBAR_DESKTOP_BREAKPOINT);
+  });
+
+  const isOpenControlled = derived(() => {
+    return props.open !== undefined;
+  });
+
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(
+    () => merged.defaultOpen,
+  );
+  const open = derived(() => {
+    return isOpenControlled ? Boolean(props.open) : uncontrolledOpen;
+  });
+
+  const [openMobile, setOpenMobile] = useState(false);
+  const [layout, setLayoutState] = useState<SidebarLayout>(defaultLayout);
+
+  const setOpen = useCallback(
+    (next: boolean) => {
+      if (!isOpenControlled) {
+        setUncontrolledOpen(next);
+      }
+
+      props.onOpenChange?.(next);
+    },
+    [isOpenControlled, props.onOpenChange],
+  );
+
+  const setLayout = useCallback((next: Partial<SidebarLayout>) => {
+    setLayoutState((current) => {
+      const mergedLayout = { ...current, ...next };
+
+      if (
+        current.side === mergedLayout.side &&
+        current.panelId === mergedLayout.panelId &&
+        current.variant === mergedLayout.variant &&
+        current.collapsible === mergedLayout.collapsible
+      ) {
+        return current;
+      }
+
+      return mergedLayout;
+    });
+  }, []);
+
+  const toggleSidebar = useCallback(() => {
+    if (isMobile) {
+      setOpenMobile((current) => toggleSidebarOpen(current));
+      return;
+    }
+
+    if (!shouldToggleDesktopSidebar(layout.collapsible)) {
+      return;
+    }
+
+    setOpen(toggleSidebarOpen(open));
+  }, [isMobile, layout.collapsible, open, setOpen]);
+
+  const state = derived(() => {
+    return resolveSidebarState(open, layout.collapsible);
+  });
+
+  const widthItem = useMemo((): SidebarWidth => {
+    return toMerged(widthProps, bridgeSidebar?.tokens?.width ?? {});
+  }, [bridgeSidebar?.tokens?.width]);
+
+  const contextValue = derived((): SidebarContextValue => {
+    return {
+      open,
+      state,
+      setOpen,
+      isMobile,
+      setLayout,
+      openMobile,
+      toggleSidebar,
+      setOpenMobile,
+      side: layout.side,
+      panelId: layout.panelId,
+      variant: layout.variant,
+      collapsible: layout.collapsible,
+    };
+  });
+
+  const rootBind = derived(() => {
+    const inheritedStyle = (rootInheritedAttrs as { style?: CSSProperties })
+      .style;
+
+    return mergePartBind(customProps?.root, rootInheritedAttrs, {
+      "data-side": layout.side,
+      className: cn({
+        "flex min-h-svh w-full data-[side=right]:flex-row-reverse": true,
+        [get(mergedClasses, "root") ?? ""]: true,
+      }),
+      style: {
+        ...inheritedStyle,
+        [SIDEBAR_WIDTH_VAR]: widthItem.default,
+        [SIDEBAR_WIDTH_ICON_VAR]: widthItem.icon,
+        [SIDEBAR_WIDTH_MOBILE_VAR]: widthItem.mobile,
+      } as CSSProperties,
+    });
+  });
+
+  return {
+    merged,
+    children,
+    rootBind,
+    contextValue,
+  };
+}
diff --git a/packages/react/src/Components/Sidebar/hooks/useSidebarShell.ts b/packages/react/src/Components/Sidebar/hooks/useSidebarShell.ts
new file mode 100644
index 00000000..8a9c573e
--- /dev/null
+++ b/packages/react/src/Components/Sidebar/hooks/useSidebarShell.ts
@@ -0,0 +1,271 @@
+// ** External Imports
+import { get, omit } from "es-toolkit/compat";
+import { toMerged } from "es-toolkit/object";
+import { useId, useLayoutEffect, useMemo } from "react";
+
+// ** Core Imports
+import {
+  getSidebarPanelId,
+  resolveSidebarCollapsibleData,
+  shouldRenderSidebarAsDrawer,
+} from "@bridge-ui/core/Domain";
+import {
+  sidebarCollapsibleProps as collapsibleProps,
+  sidebarSideProps as sideProps,
+  sidebarVariantProps as variantProps,
+  sidebarWidthProps as widthProps,
+  type SidebarWidth,
+} from "@bridge-ui/core/Tokens";
+import {
+  cn,
+  mergeBridgeUILayeredClasses,
+  splitComponentProps,
+  type LibDefaultsShape,
+  type MergeLibDefaults,
+} from "@bridge-ui/core/Utils";
+
+// ** Local Imports
+import type {
+  SidebarOwnProps,
+  SidebarProps,
+} from "@/Components/Sidebar/sidebar.types";
+import { useSidebar } from "@/Components/Sidebar/SidebarContext";
+import {
+  derived,
+  mergePartBind,
+  useBridgeUIComponent,
+  useBridgeUIMergedRegistryClasses,
+} from "@/Utils";
+
+const sidebarBridgeKeys = [
+  "side",
+  "slots",
+  "classes",
+  "variant",
+  "ariaLabel",
+  "collapsible",
+  "customProps",
+] as const satisfies readonly (keyof SidebarOwnProps)[];
+
+type SidebarLibDefaults = LibDefaultsShape<
+  SidebarOwnProps,
+  "side" | "variant" | "ariaLabel" | "collapsible"
+>;
+
+type SidebarMerged = MergeLibDefaults<SidebarOwnProps, SidebarLibDefaults>;
+
+export function useSidebarShell(
+  props: SidebarProps,
+  libDefaults: SidebarLibDefaults,
+) {
+  const reactId = useId();
+  const panelId = getSidebarPanelId(`bridge-sidebar${reactId}`);
+  const sidebar = useSidebar();
+
+  const { componentProps, inheritedAttrs } = splitComponentProps<
+    SidebarProps,
+    typeof sidebarBridgeKeys
+  >({
+    props,
+    bridgeKeys: sidebarBridgeKeys,
+  });
+
+  const { merged, entry: bridgeSidebar } = useBridgeUIComponent<
+    SidebarMerged,
+    "Sidebar"
+  >({
+    libDefaults,
+    props: componentProps,
+    componentName: "Sidebar",
+  });
+
+  useLayoutEffect(() => {
+    sidebar.setLayout({
+      panelId,
+      side: merged.side,
+      variant: merged.variant,
+      collapsible: merged.collapsible,
+    });
+  }, [
+    panelId,
+    merged.side,
+    merged.variant,
+    sidebar.setLayout,
+    merged.collapsible,
+  ]);
+
+  const slots = derived(() => {
+    return props.slots;
+  });
+
+  const children = derived(() => {
+    return props.children;
+  });
+
+  const rootInheritedAttrs = derived(() => {
+    return omit(inheritedAttrs, ["slots", "children"]);
+  });
+
+  const customProps = derived(() => {
+    return merged.customProps;
+  });
+
+  const mergedClasses = useBridgeUIMergedRegistryClasses({
+    entry: bridgeSidebar,
+    props: componentProps,
+  });
+
+  const variantItem = useMemo(() => {
+    const classes = mergeBridgeUILayeredClasses(
+      variantProps,
+      bridgeSidebar?.tokens?.variant,
+    );
+
+    return get(classes, merged.variant);
+  }, [merged.variant, bridgeSidebar?.tokens?.variant]);
+
+  const collapsibleItem = useMemo(() => {
+    const classes = mergeBridgeUILayeredClasses(
+      collapsibleProps,
+      bridgeSidebar?.tokens?.collapsible,
+    );
+
+    return get(classes, merged.collapsible);
+  }, [merged.collapsible, bridgeSidebar?.tokens?.collapsible]);
+
+  const sideClass = useMemo(() => {
+    const classes = mergeBridgeUILayeredClasses(
+      sideProps,
+      bridgeSidebar?.tokens?.side,
+    );
+
+    return get(classes, merged.side);
+  }, [merged.side, bridgeSidebar?.tokens?.side]);
+
+  const collapsibleData = derived(() => {
+    return resolveSidebarCollapsibleData(sidebar.state, merged.collapsible);
+  });
+
+  const showAsDrawer = derived(() => {
+    return shouldRenderSidebarAsDrawer(sidebar.isMobile) && sidebar.openMobile;
+  });
+
+  const rootBind = derived(() => {
+    return mergePartBind(customProps?.root, rootInheritedAttrs, {
+      "data-side": merged.side,
+      "data-state": sidebar.state,
+      "data-variant": merged.variant,
+      "data-collapsible": collapsibleData,
+      "data-mobile": sidebar.isMobile ? "true" : "false",
+      className: cn({
+        "group peer hidden text-dark-900 md:block dark:text-dark-100": true,
+        [get(mergedClasses, "root") ?? ""]: true,
+      }),
+    });
+  });
+
+  const gapBind = derived(() => {
+    return mergePartBind(
+      customProps?.gap,
+      {},
+      cn({
+        [get(variantItem, "gap") ?? ""]: true,
+        [get(collapsibleItem, "gap") ?? ""]: true,
+        [get(mergedClasses, "gap") ?? ""]: true,
+      }),
+    );
+  });
+
+  const asideBind = derived(() => {
+    const offcanvasCollapsed = collapsibleData === "offcanvas";
+
+    return mergePartBind(
+      {},
+      {},
+      {
+        "data-side": merged.side,
+        "aria-label": merged.ariaLabel,
+        id: showAsDrawer ? undefined : panelId,
+        inert: offcanvasCollapsed ? true : undefined,
+        className: cn({
+          "fixed inset-y-0 z-10 hidden h-full w-[var(--bridge-sidebar-width)] overflow-hidden transition-[left,right,width] duration-200 ease-linear md:flex": true,
+          [sideClass ?? ""]: true,
+          [get(collapsibleItem, "panel") ?? ""]: true,
+        }),
+      },
+    );
+  });
+
+  const panelBind = derived(() => {
+    return mergePartBind(
+      customProps?.panel,
+      {},
+      cn({
+        "flex h-full w-full flex-col overflow-hidden": true,
+        [get(variantItem, "panel") ?? ""]: true,
+        [get(mergedClasses, "panel") ?? ""]: true,
+      }),
+    );
+  });
+
+  const headerBind = derived(() => {
+    return mergePartBind(
+      customProps?.header,
+      {},
+      cn({
+        "flex shrink-0 flex-col gap-2 px-2 py-2.5": true,
+        [get(mergedClasses, "header") ?? ""]: true,
+      }),
+    );
+  });
+
+  const contentBind = derived(() => {
+    return mergePartBind(
+      customProps?.content,
+      {},
+      cn({
+        "bridge-scroll-fade-y flex min-h-0 flex-1 flex-col overflow-y-auto": true,
+        [get(mergedClasses, "content") ?? ""]: true,
+      }),
+    );
+  });
+
+  const footerBind = derived(() => {
+    return mergePartBind(
+      customProps?.footer,
+      {},
+      cn({
+        "flex shrink-0 flex-col gap-2 px-2 py-2.5": true,
+        [get(mergedClasses, "footer") ?? ""]: true,
+      }),
+    );
+  });
+
+  const mobileWidth = derived(() => {
+    const widthItem = toMerged(
+      widthProps,
+      bridgeSidebar?.tokens?.width ?? {},
+    ) as SidebarWidth;
+
+    return widthItem.mobile;
+  });
+
+  return {
+    slots,
+    merged,
+    panelId,
+    gapBind,
+    children,
+    rootBind,
+    asideBind,
+    panelBind,
+    headerBind,
+    footerBind,
+    contentBind,
+    mobileWidth,
+    showAsDrawer,
+    isMobile: sidebar.isMobile,
+    openMobile: sidebar.openMobile,
+    setOpenMobile: sidebar.setOpenMobile,
+  };
+}
diff --git a/packages/react/src/Components/Sidebar/hooks/useSidebarTrigger.ts b/packages/react/src/Components/Sidebar/hooks/useSidebarTrigger.ts
new file mode 100644
index 00000000..59d85515
--- /dev/null
+++ b/packages/react/src/Components/Sidebar/hooks/useSidebarTrigger.ts
@@ -0,0 +1,63 @@
+// ** External Imports
+import { omit } from "es-toolkit/compat";
+import type { MouseEvent } from "react";
+
+// ** Core Imports
+import { splitComponentProps } from "@bridge-ui/core/Utils";
+
+// ** Local Imports
+import type {
+  SidebarTriggerOwnProps,
+  SidebarTriggerProps,
+} from "@/Components/Sidebar/sidebar.types";
+import { useSidebar } from "@/Components/Sidebar/SidebarContext";
+import { derived } from "@/Utils";
+
+const sidebarTriggerBridgeKeys = [
+  "children",
+] as const satisfies readonly (keyof SidebarTriggerOwnProps)[];
+
+export function useSidebarTrigger(props: SidebarTriggerProps) {
+  const sidebar = useSidebar();
+
+  const { inheritedAttrs } = splitComponentProps<
+    SidebarTriggerProps,
+    typeof sidebarTriggerBridgeKeys
+  >({
+    props,
+    bridgeKeys: sidebarTriggerBridgeKeys,
+  });
+
+  const children = derived(() => {
+    return props.children;
+  });
+
+  const rootInheritedAttrs = derived(() => {
+    return omit(inheritedAttrs, ["children", "onClick"]);
+  });
+
+  const expanded = derived(() => {
+    return sidebar.isMobile ? sidebar.openMobile : sidebar.open;
+  });
+
+  const handleClick = derived(() => {
+    return (event: MouseEvent<HTMLButtonElement>) => {
+      props.onClick?.(event);
+
+      if (event.defaultPrevented) {
+        return;
+      }
+
+      sidebar.toggleSidebar();
+    };
+  });
+
+  return {
+    children,
+    expanded,
+    handleClick,
+    side: sidebar.side,
+    rootInheritedAttrs,
+    panelId: sidebar.panelId,
+  };
+}
diff --git a/packages/react/src/Components/Sidebar/index.ts b/packages/react/src/Components/Sidebar/index.ts
new file mode 100644
index 00000000..b6ce64eb
--- /dev/null
+++ b/packages/react/src/Components/Sidebar/index.ts
@@ -0,0 +1,44 @@
+// ** Exports
+export { useSidebar } from "@/Components/Sidebar/hooks/useSidebar";
+export { useSidebarInset } from "@/Components/Sidebar/hooks/useSidebarInset";
+export { useSidebarList } from "@/Components/Sidebar/hooks/useSidebarList";
+export { useSidebarListItem } from "@/Components/Sidebar/hooks/useSidebarListItem";
+export { useSidebarProvider } from "@/Components/Sidebar/hooks/useSidebarProvider";
+export { useSidebarShell } from "@/Components/Sidebar/hooks/useSidebarShell";
+export { useSidebarTrigger } from "@/Components/Sidebar/hooks/useSidebarTrigger";
+export { default as Sidebar } from "@/Components/Sidebar/Sidebar";
+export type {
+  SidebarClasses,
+  SidebarCollapsibleOverrides,
+  SidebarCustomProps,
+  SidebarInsetClasses,
+  SidebarInsetCustomProps,
+  SidebarInsetOwnProps,
+  SidebarInsetProps,
+  SidebarListItemOwnProps,
+  SidebarListItemProps,
+  SidebarListOwnProps,
+  SidebarListProps,
+  SidebarOwnProps,
+  SidebarProps,
+  SidebarProviderCallbacks,
+  SidebarProviderClasses,
+  SidebarProviderCustomProps,
+  SidebarProviderOwnProps,
+  SidebarProviderProps,
+  SidebarSideOverrides,
+  SidebarSlots,
+  SidebarTriggerOwnProps,
+  SidebarTriggerProps,
+  SidebarVariantOverrides,
+} from "@/Components/Sidebar/sidebar.types";
+export {
+  SidebarContext,
+  type SidebarContextValue,
+  type SidebarLayout,
+} from "@/Components/Sidebar/SidebarContext";
+export { default as SidebarInset } from "@/Components/Sidebar/SidebarInset";
+export { default as SidebarList } from "@/Components/Sidebar/SidebarList";
+export { default as SidebarListItem } from "@/Components/Sidebar/SidebarListItem";
+export { default as SidebarProvider } from "@/Components/Sidebar/SidebarProvider";
+export { default as SidebarTrigger } from "@/Components/Sidebar/SidebarTrigger";
diff --git a/packages/react/src/Components/Sidebar/sidebar.types.ts b/packages/react/src/Components/Sidebar/sidebar.types.ts
new file mode 100644
index 00000000..b613abf0
--- /dev/null
+++ b/packages/react/src/Components/Sidebar/sidebar.types.ts
@@ -0,0 +1,324 @@
+// ** External Imports
+import type { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from "react";
+
+// ** Core Imports
+import type { PositionPlacement } from "@bridge-ui/core/Runtime";
+import type {
+  SidebarCollapsible,
+  SidebarSide,
+  SidebarVariant,
+} from "@bridge-ui/core/Tokens";
+import type { MergeHtmlProps, MergeProps } from "@bridge-ui/core/Utils";
+
+// ** Local Imports
+import type { ListProps } from "@/Components/List/list.types";
+import type { ListItemProps } from "@/Components/ListItem/listItem.types";
+
+export interface SidebarSideOverrides {}
+export interface SidebarVariantOverrides {}
+export interface SidebarCollapsibleOverrides {}
+
+export interface SidebarClasses {
+  /**
+   * The classes to apply to the scrollable content region.
+   */
+  content?: string;
+
+  /**
+   * The classes to apply to the footer.
+   */
+  footer?: string;
+
+  /**
+   * The classes to apply to the in-flow gap spacer.
+   */
+  gap?: string;
+
+  /**
+   * The classes to apply to the header.
+   */
+  header?: string;
+
+  /**
+   * The classes to apply to the inner panel surface.
+   */
+  panel?: string;
+
+  /**
+   * The classes to apply to the desktop rail chrome (gap + fixed panel).
+   */
+  root?: string;
+}
+
+export interface SidebarCustomProps {
+  /**
+   * Props forwarded to the scrollable content region.
+   */
+  content?: HTMLAttributes<HTMLDivElement>;
+
+  /**
+   * Props forwarded to the footer.
+   */
+  footer?: HTMLAttributes<HTMLDivElement>;
+
+  /**
+   * Props forwarded to the in-flow gap spacer.
+   */
+  gap?: HTMLAttributes<HTMLDivElement>;
+
+  /**
+   * Props forwarded to the header.
+   */
+  header?: HTMLAttributes<HTMLDivElement>;
+
+  /**
+   * Props forwarded to the inner panel surface.
+   */
+  panel?: HTMLAttributes<HTMLDivElement>;
+
+  /**
+   * Props forwarded to the desktop rail chrome.
+   */
+  root?: HTMLAttributes<HTMLDivElement>;
+}
+
+export interface SidebarInsetClasses {
+  /**
+   * The classes to apply to the inset root.
+   */
+  root?: string;
+}
+
+export interface SidebarInsetCustomProps {
+  /**
+   * Props forwarded to the inset root.
+   */
+  root?: HTMLAttributes<HTMLElement>;
+}
+
+export interface SidebarInsetOwnProps {
+  /**
+   * The children to render.
+   *
+   * @default undefined
+   */
+  children?: ReactNode;
+
+  /**
+   * The classes to apply to the inset.
+   *
+   * @default undefined
+   */
+  classes?: SidebarInsetClasses;
+
+  /**
+   * Extra props for internal parts.
+   *
+   * @default undefined
+   */
+  customProps?: SidebarInsetCustomProps;
+}
+
+export interface SidebarListItemOwnProps {
+  /**
+   * Tooltip label while the icon rail is collapsed. When omitted, string
+   * `primary` is used. Has no effect on the mobile drawer or an expanded rail.
+   *
+   * @default undefined
+   */
+  tooltip?: string;
+
+  /**
+   * Placement of {@link SidebarListItemOwnProps.tooltip}. Defaults to the
+   * side opposite the rail.
+   *
+   * @default undefined
+   */
+  tooltipPlacement?: PositionPlacement;
+}
+
+export interface SidebarListOwnProps {
+  /**
+   * Collapse items to leading icons. Defaults to the collapsed icon rail.
+   * Nested `SidebarList` is hidden. `ListSection` labels are hidden.
+   *
+   * @default undefined
+   */
+  iconOnly?: boolean;
+}
+
+/**
+ * Persistent app-shell sidebar panel. Mount under `SidebarProvider` with
+ * `SidebarInset`. Put `SidebarList` / `Accordion` in `children`.
+ */
+export interface SidebarOwnProps {
+  /**
+   * Accessible name for the desktop `aside` and the mobile drawer.
+   *
+   * @default "Sidebar"
+   */
+  ariaLabel?: string;
+
+  /**
+   * The children to render in the scrollable region.
+   *
+   * @default undefined
+   */
+  children?: ReactNode;
+
+  /**
+   * The classes to apply to the sidebar.
+   *
+   * @default undefined
+   */
+  classes?: SidebarClasses;
+
+  /**
+   * How the desktop rail hides.
+   *
+   * @default "offcanvas"
+   */
+  collapsible?: MergeProps<SidebarCollapsible, SidebarCollapsibleOverrides>;
+
+  /**
+   * Extra props for internal parts (`header`, `content`, `footer`, etc.).
+   * Root HTML attributes stay on the component top level.
+   *
+   * @default undefined
+   */
+  customProps?: SidebarCustomProps;
+
+  /**
+   * Which edge the rail docks to.
+   *
+   * @default "left"
+   */
+  side?: MergeProps<SidebarSide, SidebarSideOverrides>;
+
+  /**
+   * Header and footer slots. `children` is the scroller.
+   *
+   * @default undefined
+   */
+  slots?: SidebarSlots;
+
+  /**
+   * Visual layout of the rail and inset.
+   *
+   * @default "sidebar"
+   */
+  variant?: MergeProps<SidebarVariant, SidebarVariantOverrides>;
+}
+
+export interface SidebarProviderCallbacks {
+  /**
+   * Called when the desktop `open` state should change (controlled).
+   *
+   * @default undefined
+   */
+  onOpenChange?: (open: boolean) => void;
+}
+
+export interface SidebarProviderClasses {
+  /**
+   * The classes to apply to the layout wrapper.
+   */
+  root?: string;
+}
+
+export interface SidebarProviderCustomProps {
+  /**
+   * Props forwarded to the layout wrapper.
+   */
+  root?: HTMLAttributes<HTMLDivElement>;
+}
+
+export interface SidebarProviderOwnProps {
+  /**
+   * The children to render (`Sidebar`, `SidebarInset`, etc.).
+   *
+   * @default undefined
+   */
+  children?: ReactNode;
+
+  /**
+   * The classes to apply to the provider wrapper.
+   *
+   * @default undefined
+   */
+  classes?: SidebarProviderClasses;
+
+  /**
+   * Extra props for the layout wrapper.
+   *
+   * @default undefined
+   */
+  customProps?: SidebarProviderCustomProps;
+
+  /**
+   * Initial desktop expanded state when `open` is omitted.
+   *
+   * @default true
+   */
+  defaultOpen?: boolean;
+
+  /**
+   * Controlled desktop expanded state.
+   *
+   * @default undefined
+   */
+  open?: boolean;
+}
+
+export interface SidebarSlots {
+  /**
+   * Sticky footer (user menu, settings).
+   */
+  footer?: ReactNode;
+
+  /**
+   * Sticky header (branding, workspace switcher).
+   */
+  header?: ReactNode;
+}
+
+export interface SidebarTriggerOwnProps {
+  /**
+   * The children to render inside the trigger. Replaces the default icon.
+   *
+   * @default undefined
+   */
+  children?: ReactNode;
+}
+
+export type SidebarInsetProps = MergeHtmlProps<
+  SidebarInsetOwnProps,
+  HTMLAttributes<HTMLElement>
+>;
+
+export type SidebarProps = MergeHtmlProps<
+  SidebarOwnProps,
+  HTMLAttributes<HTMLDivElement>
+>;
+
+export type SidebarProviderProps = MergeHtmlProps<
+  SidebarProviderOwnProps & SidebarProviderCallbacks,
+  HTMLAttributes<HTMLDivElement>
+>;
+
+export type SidebarTriggerProps = MergeHtmlProps<
+  SidebarTriggerOwnProps,
+  ButtonHTMLAttributes<HTMLButtonElement>
+>;
+
+/**
+ * `List` bound to the nearest `Sidebar`. Sets `iconOnly` when the icon rail
+ * is collapsed on desktop.
+ */
+export type SidebarListProps = ListProps & SidebarListOwnProps;
+
+/**
+ * `ListItem` bound to the nearest `Sidebar`. Shows `primary` in a tooltip
+ * when the icon rail is collapsed.
+ */
+export type SidebarListItemProps = ListItemProps & SidebarListItemOwnProps;
diff --git a/packages/react/src/augments.ts b/packages/react/src/augments.ts
index d6a743c5..dcfb14bf 100644
--- a/packages/react/src/augments.ts
+++ b/packages/react/src/augments.ts
@@ -35,6 +35,13 @@ import type {
 import type { ProgressClasses, ProgressProps } from "@/Components/Progress";
 import type { RadioClasses, RadioProps } from "@/Components/Radio";
 import type { SelectClasses, SelectProps } from "@/Components/Select";
+import type {
+  SidebarClasses,
+  SidebarInsetClasses,
+  SidebarProps,
+  SidebarProviderClasses,
+  SidebarProviderProps,
+} from "@/Components/Sidebar";
 import type { SkeletonClasses, SkeletonProps } from "@/Components/Skeleton";
 import type { SliderClasses, SliderProps } from "@/Components/Slider";
 import type { SnackbarClasses, SnackbarProps } from "@/Components/Snackbar";
@@ -251,6 +258,14 @@ declare module "@bridge-ui/core/Config" {
     >;
   }
 
+  interface SidebarConfigOverrides {
+    classes: SidebarClasses & SidebarInsetClasses & SidebarProviderClasses;
+    defaultProps: Partial<
+      Pick<SidebarProps, "side" | "variant" | "ariaLabel" | "collapsible"> &
+        Pick<SidebarProviderProps, "open" | "defaultOpen">
+    >;
+  }
+
   interface SkeletonConfigOverrides {
     classes: SkeletonClasses;
     defaultProps: Partial<Pick<SkeletonProps, "rounded">>;
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 8e56f8d2..fc37c84d 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -501,6 +501,47 @@ export type {
   SelectSlots,
   SelectValue,
 } from "@/Components/Select";
+export {
+  Sidebar,
+  SidebarInset,
+  SidebarList,
+  SidebarListItem,
+  SidebarProvider,
+  SidebarTrigger,
+  useSidebar,
+  useSidebarInset,
+  useSidebarList,
+  useSidebarListItem,
+  useSidebarProvider,
+  useSidebarShell,
+  useSidebarTrigger,
+} from "@/Components/Sidebar";
+export type {
+  SidebarClasses,
+  SidebarCollapsibleOverrides,
+  SidebarContextValue,
+  SidebarCustomProps,
+  SidebarInsetClasses,
+  SidebarInsetCustomProps,
+  SidebarInsetOwnProps,
+  SidebarInsetProps,
+  SidebarListItemOwnProps,
+  SidebarListItemProps,
+  SidebarListOwnProps,
+  SidebarListProps,
+  SidebarOwnProps,
+  SidebarProps,
+  SidebarProviderCallbacks,
+  SidebarProviderClasses,
+  SidebarProviderCustomProps,
+  SidebarProviderOwnProps,
+  SidebarProviderProps,
+  SidebarSideOverrides,
+  SidebarSlots,
+  SidebarTriggerOwnProps,
+  SidebarTriggerProps,
+  SidebarVariantOverrides,
+} from "@/Components/Sidebar";
 export { Skeleton, useSkeleton } from "@/Components/Skeleton";
 export type {
   SkeletonClasses,
diff --git a/packages/vue/ai/skills/bridge-ui-components/SKILL.md b/packages/vue/ai/skills/bridge-ui-components/SKILL.md
index ae3ed02d..667e036c 100644
--- a/packages/vue/ai/skills/bridge-ui-components/SKILL.md
+++ b/packages/vue/ai/skills/bridge-ui-components/SKILL.md
@@ -2,7 +2,7 @@
 name: bridge-ui-components
 description: >-
   Use Bridge UI Vue components — Button, Avatar, Card, Alert, Accordion, Badge, Icon,
-  Link, List, Table, DataTable, Tabs, Spinner, Skeleton, EmptyState, Progress, Stepper, Pagination, TextField, Select,
+  Link, List, Table, DataTable, Tabs, Spinner, Skeleton, EmptyState, Sidebar, Progress, Stepper, Pagination, TextField, Select,
   Autocomplete, DateField, DatePicker, DateRangeField, DateRangePicker,
   TimeField, TimePicker, DateTimeField, DateTimePicker, ColorField, ColorPicker,
   classes, customProps, slots. Use when building UI with Bridge components.
@@ -32,6 +32,7 @@ In templates, use kebab-case attrs (`start-icon`, `custom-props`, `error-message
 | Tabs                          | `.ai/docs/components/Tabs.md`                                         |
 | Text input                    | `.ai/docs/components/TextField.md`                                    |
 | Select / autocomplete         | `.ai/docs/components/Select.md`, `Autocomplete.md`                    |
+| Sidebar / app shell           | `.ai/docs/components/Sidebar.md`                                      |
 | Date                          | `.ai/docs/components/DateField.md`, `DatePicker.md`                   |
 | Date range                    | `.ai/docs/components/DateRangeField.md`, `DateRangePicker.md`         |
 | Time                          | `.ai/docs/components/TimeField.md`, `TimePicker.md`                   |
diff --git a/packages/vue/docs/README.md b/packages/vue/docs/README.md
index eab88561..417d30dd 100644
--- a/packages/vue/docs/README.md
+++ b/packages/vue/docs/README.md
@@ -50,6 +50,7 @@ Component reference and adapter samples for **Vue**. This folder ships with the
 - [Progress](./components/Progress.md)
 - [Radio](./components/Radio.md)
 - [Select](./components/Select.md)
+- [Sidebar](./components/Sidebar.md)
 - [Skeleton](./components/Skeleton.md)
 - [Slider](./components/Slider.md)
 - [Snackbar](./components/Snackbar.md)
diff --git a/packages/vue/docs/components/Drawer.md b/packages/vue/docs/components/Drawer.md
index d849e6ed..5c63c306 100644
--- a/packages/vue/docs/components/Drawer.md
+++ b/packages/vue/docs/components/Drawer.md
@@ -134,4 +134,4 @@ import { Drawer } from "@bridge-ui/vue/Components/Drawer";
 
 ## Related components
 
-Card, useDialogAction, useDrawerAction, useModalAction
+Card, Sidebar, useDialogAction, useDrawerAction, useModalAction
diff --git a/packages/vue/docs/components/List.md b/packages/vue/docs/components/List.md
index dc21ef03..b853d7ad 100644
--- a/packages/vue/docs/components/List.md
+++ b/packages/vue/docs/components/List.md
@@ -164,4 +164,4 @@ With the default `as="li"`, sticky styles apply on the section root. The list (o
 
 ## Related components
 
-Menu, Select
+Menu, Select, Sidebar
diff --git a/packages/vue/docs/components/Sidebar.md b/packages/vue/docs/components/Sidebar.md
new file mode 100644
index 00000000..58408cc9
--- /dev/null
+++ b/packages/vue/docs/components/Sidebar.md
@@ -0,0 +1,281 @@
+# Sidebar
+
+Persistent app-shell rail. Mount `SidebarProvider` around `Sidebar` and `SidebarInset` as siblings. Put `SidebarList` / `Accordion` in the default slot. On small viewports the panel opens as a `Drawer`.
+
+## Import
+
+```ts
+import {
+  Sidebar,
+  SidebarInset,
+  SidebarList,
+  SidebarListItem,
+  SidebarProvider,
+  SidebarTrigger,
+  useSidebar,
+} from "@bridge-ui/vue/Components/Sidebar";
+```
+
+## Prerequisites
+
+Mount `SidebarProvider` around the app shell (`Sidebar` and `SidebarInset` as siblings) before using `SidebarTrigger` or `useSidebar`.
+
+`BridgeUIProvider` still holds theme, tokens, and `defaultProps`. It does not own instance `open` state.
+
+## Examples
+
+### Usage
+
+```vue
+<SidebarProvider>
+  <Sidebar>
+    <SidebarList>
+      <SidebarListItem interactive primary="Home" />
+      <SidebarListItem interactive primary="Settings" />
+    </SidebarList>
+  </Sidebar>
+  <SidebarInset>
+    <SidebarTrigger />
+    <slot />
+  </SidebarInset>
+</SidebarProvider>
+```
+
+### Header and footer
+
+Put brand and account rows in `#header` / `#footer`. `SidebarList` collapses those rows to the start avatar. The end chevron hides while collapsed. Header and footer lists use `classes.root` `p-0` because those slots are already padded.
+
+```vue
+<template>
+  <SidebarList :classes="{ root: 'p-0' }">
+    <SidebarListItem interactive primary="Acme Inc" secondary="Enterprise">
+      <template #end>
+        <Icon icon="chevronUpDown" />
+      </template>
+      <template #start>
+        <Avatar size="sm" rounded="lg" fallback="A" color="primary" />
+      </template>
+    </SidebarListItem>
+  </SidebarList>
+</template>
+```
+
+```vue
+<template>
+  <SidebarList :classes="{ root: 'p-0' }">
+    <SidebarListItem
+      interactive
+      primary="Ada Lovelace"
+      secondary="ada@example.com"
+    >
+      <template #end>
+        <Icon icon="chevronUpDown" />
+      </template>
+      <template #start>
+        <Avatar size="sm" rounded="lg" fallback="AL" />
+      </template>
+    </SidebarListItem>
+  </SidebarList>
+</template>
+```
+
+```vue
+<SidebarProvider>
+  <Sidebar collapsible="icon">
+    <template #header>
+      <Brand />
+    </template>
+    <SidebarList>
+      <SidebarListItem interactive primary="Home" />
+    </SidebarList>
+    <template #footer>
+      <Account />
+    </template>
+  </Sidebar>
+  <SidebarInset>
+    <SidebarTrigger />
+    <slot />
+  </SidebarInset>
+</SidebarProvider>
+```
+
+### Icon collapse
+
+Use `SidebarList` / `SidebarListItem` when `collapsible="icon"`. Collapsed items keep `primary` as an `aria-label` and show it in a `Tooltip` on the whole item. Nested `SidebarList` is hidden. The mobile drawer keeps labels.
+
+```vue
+<template>
+  <SidebarList>
+    <ListSection title="Application" />
+    <SidebarListItem interactive primary="Home">
+      <template #start>
+        <Icon icon="user" />
+      </template>
+    </SidebarListItem>
+  </SidebarList>
+</template>
+```
+
+```vue
+<SidebarProvider>
+  <Sidebar collapsible="icon">
+    <template #header>
+      <Brand />
+    </template>
+    <Nav />
+    <template #footer>
+      <Account />
+    </template>
+  </Sidebar>
+  <SidebarInset>
+    <SidebarTrigger />
+    <slot />
+  </SidebarInset>
+</SidebarProvider>
+```
+
+### Controlled
+
+```vue
+<SidebarProvider v-model="open">
+  <Sidebar>
+    <SidebarList>
+      <SidebarListItem interactive primary="Home" />
+    </SidebarList>
+  </Sidebar>
+  <SidebarInset>
+    <SidebarTrigger />
+    <slot />
+  </SidebarInset>
+</SidebarProvider>
+```
+
+### Right side
+
+```vue
+<SidebarProvider>
+  <Sidebar side="right">
+    <SidebarList>
+      <SidebarListItem interactive primary="Inbox" />
+    </SidebarList>
+  </Sidebar>
+  <SidebarInset>
+    <SidebarTrigger />
+    <slot />
+  </SidebarInset>
+</SidebarProvider>
+```
+
+### Inset variant
+
+```vue
+<SidebarProvider>
+  <Sidebar variant="inset">
+    <SidebarList>
+      <SidebarListItem interactive primary="Home" />
+    </SidebarList>
+  </Sidebar>
+  <SidebarInset>
+    <SidebarTrigger />
+    <slot />
+  </SidebarInset>
+</SidebarProvider>
+```
+
+### Collapsible groups
+
+```vue
+<SidebarProvider>
+  <Sidebar>
+    <Accordion variant="plain">
+      <AccordionItem title="Projects" value="projects">
+        <SidebarList :classes="{ root: 'p-0' }">
+          <SidebarListItem interactive primary="Alpha" />
+          <SidebarListItem interactive primary="Beta" />
+        </SidebarList>
+      </AccordionItem>
+    </Accordion>
+  </Sidebar>
+  <SidebarInset>
+    <SidebarTrigger />
+    <slot />
+  </SidebarInset>
+</SidebarProvider>
+```
+
+## Props (`SidebarProvider`)
+
+| Prop               | Type                         | Default | Description                                  |
+| ------------------ | ---------------------------- | ------- | -------------------------------------------- |
+| `classes`          | `SidebarProviderClasses`     | —       | Part classes (`root`).                       |
+| `customProps`      | `SidebarProviderCustomProps` | —       | Extra props for the layout wrapper.          |
+| `defaultOpen`      | `boolean`                    | `true`  | Uncontrolled initial desktop expanded state. |
+| `v-model`          | `boolean`                    | —       | Controlled desktop expanded state.           |
+| `v-on:open-change` | `(open: boolean)`            | —       | Emitted when desktop `open` should change.   |
+
+## Props (`Sidebar`)
+
+| Prop          | Type                              | Default       | Description                                            |
+| ------------- | --------------------------------- | ------------- | ------------------------------------------------------ |
+| `ariaLabel`   | `string`                          | `"Sidebar"`   | Accessible name for the `aside` and the mobile drawer. |
+| `classes`     | `SidebarClasses`                  | —             | Part classes (`root`, `header`, `content`, …).         |
+| `collapsible` | `"icon" \| "none" \| "offcanvas"` | `"offcanvas"` | How the desktop rail hides.                            |
+| `customProps` | `SidebarCustomProps`              | —             | Extra props for internal parts.                        |
+| `side`        | `"left" \| "right"`               | `"left"`      | Edge the rail docks to.                                |
+| `variant`     | `"inset" \| "sidebar"`            | `"sidebar"`   | Flush rail or padded main column.                      |
+
+## Slots (`Sidebar`)
+
+| Slot      | Description                                 |
+| --------- | ------------------------------------------- |
+| `default` | Rail content (`SidebarList` / `Accordion`). |
+| `footer`  | Sticky footer.                              |
+| `header`  | Sticky header.                              |
+
+## Props (`SidebarInset`)
+
+| Prop          | Type                      | Default | Description                     |
+| ------------- | ------------------------- | ------- | ------------------------------- |
+| `classes`     | `SidebarInsetClasses`     | —       | Part classes (`root`).          |
+| `customProps` | `SidebarInsetCustomProps` | —       | Extra props for the inset root. |
+
+## Props (`SidebarTrigger`)
+
+Renders a `Button`. Forwards native button attributes. Default accessible name is `Toggle sidebar`.
+
+## Props (`SidebarList`)
+
+Same as `List`, plus `icon-only`. Sets `icon-only` when the icon rail is collapsed on desktop. Applies stacked nav chrome (gap, compact rows, nested guide). Override with `icon-only`. Nested `SidebarList` is hidden while collapsed. `ListSection` labels are hidden while collapsed.
+
+## Props (`SidebarListItem`)
+
+Same as `ListItem`, plus `tooltip` / `tooltip-placement`. Applies compact nav chrome. Tooltips only show while the icon rail is collapsed (`primary`, or `tooltip` to override).
+
+## `useSidebar`
+
+Must be called under `SidebarProvider`. Returns a computed context object (`sidebar.value.open`, …).
+
+| Field           | Type                              | Description                                    |
+| --------------- | --------------------------------- | ---------------------------------------------- |
+| `collapsible`   | `"icon" \| "none" \| "offcanvas"` | Mode from the nearest `Sidebar`.               |
+| `isMobile`      | `boolean`                         | Viewport is below `md` (desktop rail CSS).     |
+| `open`          | `boolean`                         | Desktop expanded state.                        |
+| `openMobile`    | `boolean`                         | Mobile drawer visibility.                      |
+| `setOpen`       | `(open: boolean) => void`         | Sets desktop `open`.                           |
+| `setOpenMobile` | `(open: boolean) => void`         | Sets mobile drawer visibility.                 |
+| `side`          | `"left" \| "right"`               | Dock edge.                                     |
+| `state`         | `"collapsed" \| "expanded"`       | Desktop visual state.                          |
+| `toggleSidebar` | `() => void`                      | Toggles desktop `open` or mobile `openMobile`. |
+| `variant`       | `"inset" \| "sidebar"`            | Visual variant.                                |
+
+## Accessibility
+
+- Desktop panel is an `aside` with `aria-label`
+- Offcanvas collapsed panel is `inert` (out of the tab order)
+- Mobile uses `Drawer` (dialog, overlay, Escape)
+- Trigger sets `aria-expanded` and `aria-controls`
+- `SidebarListItem` copies string `primary` to `aria-label` when collapsed
+
+## Related components
+
+Accordion, Avatar, Button, Drawer, List, ListItem, ListSection, Tooltip
diff --git a/packages/vue/docs/examples/icon-fontawesome.ts b/packages/vue/docs/examples/icon-fontawesome.ts
index 2b4a85f4..7f769bce 100644
--- a/packages/vue/docs/examples/icon-fontawesome.ts
+++ b/packages/vue/docs/examples/icon-fontawesome.ts
@@ -110,6 +110,7 @@ const icons = {
   columns: faTableColumns,
   chevronUpDown: faUpDown,
   calendar: faCalendarDays,
+  panelLeft: faTableColumns,
   search: faMagnifyingGlass,
   alert: faCircleExclamation,
   chevronDown: faChevronDown,
diff --git a/packages/vue/docs/examples/icon-heroicons.ts b/packages/vue/docs/examples/icon-heroicons.ts
index 3f64a020..33d19f4e 100644
--- a/packages/vue/docs/examples/icon-heroicons.ts
+++ b/packages/vue/docs/examples/icon-heroicons.ts
@@ -8,6 +8,7 @@
 import {
   ArrowDownTrayIcon,
   ArrowPathIcon,
+  Bars3Icon,
   BellIcon,
   CalendarDaysIcon,
   CheckCircleIcon,
@@ -51,6 +52,7 @@ const icons = {
   filter: FunnelIcon,
   palette: SwatchIcon,
   eyeOff: EyeSlashIcon,
+  panelLeft: Bars3Icon,
   loader: ArrowPathIcon,
   success: CheckCircleIcon,
   chevronUp: ChevronUpIcon,
diff --git a/packages/vue/docs/examples/icon-lucide.ts b/packages/vue/docs/examples/icon-lucide.ts
index 805d90e8..f6097626 100644
--- a/packages/vue/docs/examples/icon-lucide.ts
+++ b/packages/vue/docs/examples/icon-lucide.ts
@@ -27,6 +27,7 @@ import {
   Loader2,
   Minus,
   Palette,
+  PanelLeft,
   Plus,
   Search,
   TriangleAlert,
@@ -60,6 +61,7 @@ const icons = {
   download: Download,
   success: CircleCheck,
   chevronUp: ChevronUp,
+  panelLeft: PanelLeft,
   warning: TriangleAlert,
   chevronDown: ChevronDown,
   chevronLeft: ChevronLeft,
diff --git a/packages/vue/docs/examples/icon-phosphor.ts b/packages/vue/docs/examples/icon-phosphor.ts
index 7b842d28..baea72a6 100644
--- a/packages/vue/docs/examples/icon-phosphor.ts
+++ b/packages/vue/docs/examples/icon-phosphor.ts
@@ -26,6 +26,7 @@ import {
   PhMinus,
   PhPalette,
   PhPlus,
+  PhSidebar,
   PhSpinnerGap,
   PhUser,
   PhWarning,
@@ -56,6 +57,7 @@ const icons = {
   warning: PhWarning,
   loader: PhSpinnerGap,
   chevronUp: PhCaretUp,
+  panelLeft: PhSidebar,
   alert: PhWarningCircle,
   success: PhCheckCircle,
   chevronDown: PhCaretDown,
diff --git a/packages/vue/docs/examples/icon-tabler.ts b/packages/vue/docs/examples/icon-tabler.ts
index c489d1e9..b05239d3 100644
--- a/packages/vue/docs/examples/icon-tabler.ts
+++ b/packages/vue/docs/examples/icon-tabler.ts
@@ -24,6 +24,7 @@ import {
   IconEyeOff,
   IconFilter,
   IconInfoCircle,
+  IconLayoutSidebar,
   IconLoader2,
   IconMinus,
   IconPalette,
@@ -62,6 +63,7 @@ const icons = {
   warning: IconAlertTriangle,
   chevronUpDown: IconSelector,
   calendar: IconCalendarMonth,
+  panelLeft: IconLayoutSidebar,
   chevronDown: IconChevronDown,
   chevronLeft: IconChevronLeft,
   chevronRight: IconChevronRight,
diff --git a/packages/vue/src/Components/Accordion/__tests__/Accordion.test.ts b/packages/vue/src/Components/Accordion/__tests__/Accordion.test.ts
index 038e54d9..d71eecbb 100644
--- a/packages/vue/src/Components/Accordion/__tests__/Accordion.test.ts
+++ b/packages/vue/src/Components/Accordion/__tests__/Accordion.test.ts
@@ -189,6 +189,20 @@ test("it should apply plain variant classes on the root", () => {
   expect(className).toContain("gap-1");
   expect(className).not.toContain("border");
   expect(className).not.toContain("divide-y");
+
+  const trigger = wrapper.get("button");
+
+  expect(trigger.classes()).toContain("px-2");
+  expect(trigger.classes()).toContain("min-h-8");
+  expect(trigger.classes()).toContain("py-1.5");
+  expect(trigger.classes().join(" ")).not.toContain("text-primary-700");
+
+  const panel = wrapper.get('[role="region"]');
+
+  expect(panel.classes()).toContain("p-0");
+  expect(panel.classes()).toContain("border-l");
+  expect(panel.classes()).not.toContain("pb-4");
+  expect(panel.classes()).toContain("group-data-[collapsible=icon]:hidden");
 });
 
 test("it should apply separated variant classes on the root", () => {
diff --git a/packages/vue/src/Components/Accordion/accordionInjectionKey.ts b/packages/vue/src/Components/Accordion/accordionInjectionKey.ts
index e3c3aec3..ceb7fe04 100644
--- a/packages/vue/src/Components/Accordion/accordionInjectionKey.ts
+++ b/packages/vue/src/Components/Accordion/accordionInjectionKey.ts
@@ -14,6 +14,7 @@ export type AccordionTokenClasses = {
   itemSize?: string;
   itemVariant?: string;
   panelSize?: string;
+  panelVariant?: string;
   rootSize?: string;
   rootVariant?: string;
   triggerSize?: string;
diff --git a/packages/vue/src/Components/Accordion/composables/useAccordion.ts b/packages/vue/src/Components/Accordion/composables/useAccordion.ts
index 8286056d..2049ce83 100644
--- a/packages/vue/src/Components/Accordion/composables/useAccordion.ts
+++ b/packages/vue/src/Components/Accordion/composables/useAccordion.ts
@@ -199,9 +199,16 @@ export function useAccordion(
         triggerSize: get(sizeItem.value, "trigger"),
         rootVariant: get(variantItem.value, "root"),
         itemVariant: get(variantItem.value, "item"),
+        panelVariant: get(variantItem.value, "panel"),
         triggerVariant: get(variantItem.value, "trigger"),
-        colorIndicator: get(colorItem.value, "indicator"),
-        colorTriggerExpanded: get(colorItem.value, "triggerExpanded"),
+        colorIndicator:
+          merged.value.variant === "plain"
+            ? undefined
+            : get(colorItem.value, "indicator"),
+        colorTriggerExpanded:
+          merged.value.variant === "plain"
+            ? undefined
+            : get(colorItem.value, "triggerExpanded"),
       },
     };
   });
diff --git a/packages/vue/src/Components/AccordionItem/composables/useAccordionItem.ts b/packages/vue/src/Components/AccordionItem/composables/useAccordionItem.ts
index 29caa754..10907221 100644
--- a/packages/vue/src/Components/AccordionItem/composables/useAccordionItem.ts
+++ b/packages/vue/src/Components/AccordionItem/composables/useAccordionItem.ts
@@ -288,6 +288,7 @@ export function useAccordionItem(props: AccordionItemOwnProps) {
         ),
         class: cn({
           [accordionContextRef.value.tokenClasses.panelSize ?? ""]: true,
+          [accordionContextRef.value.tokenClasses.panelVariant ?? ""]: true,
           [get(mergedClasses.value, "panel") ?? ""]: true,
         }),
       },
diff --git a/packages/vue/src/Components/List/composables/useList.ts b/packages/vue/src/Components/List/composables/useList.ts
index 607a97ae..84032d83 100644
--- a/packages/vue/src/Components/List/composables/useList.ts
+++ b/packages/vue/src/Components/List/composables/useList.ts
@@ -62,15 +62,13 @@ export function useList(props: ListOwnProps) {
   });
 
   const rootBind = computed(() => {
-    return mergePartBind(
-      customProps.value?.root,
-      rootInheritedAttrs.value,
-      cn({
+    return mergePartBind(customProps.value?.root, rootInheritedAttrs.value, {
+      class: cn({
         "m-0 list-none py-2 text-dark-900 dark:text-dark-100": true,
         "pl-4": merged.value.nested,
         [get(mergedClasses.value, "root") ?? ""]: true,
       }),
-    );
+    });
   });
 
   return {
diff --git a/packages/vue/src/Components/ListItem/ListItem.vue b/packages/vue/src/Components/ListItem/ListItem.vue
index 2cfe2bfc..24b09d0f 100644
--- a/packages/vue/src/Components/ListItem/ListItem.vue
+++ b/packages/vue/src/Components/ListItem/ListItem.vue
@@ -56,7 +56,7 @@ const rootTag = computed(() => {
           <slot name="start" />
         </div>
 
-        <div v-bind="contentBind">
+        <div v-bind="contentBind" v-if="hasPrimary || hasSecondary">
           <span v-if="hasPrimary" v-bind="primaryBind">
             <slot name="primary" v-if="hasNamedSlot(slots, 'primary')" />
 
@@ -93,7 +93,7 @@ const rootTag = computed(() => {
         <slot name="start" />
       </div>
 
-      <div v-bind="contentBind">
+      <div v-bind="contentBind" v-if="hasPrimary || hasSecondary">
         <span v-if="hasPrimary" v-bind="primaryBind">
           <slot name="primary" v-if="hasNamedSlot(slots, 'primary')" />
 
diff --git a/packages/vue/src/Components/ListSection/ListSection.vue b/packages/vue/src/Components/ListSection/ListSection.vue
index a39ef824..8bba79af 100644
--- a/packages/vue/src/Components/ListSection/ListSection.vue
+++ b/packages/vue/src/Components/ListSection/ListSection.vue
@@ -22,7 +22,7 @@ const props = withDefaults(defineProps<ListSectionOwnProps>(), {
   sticky: false,
 });
 
-const { merged, rootBind, titleBind } = useListSection(props);
+const { merged, rootBind, isHidden, titleBind } = useListSection(props);
 
 const rootTag = computed(() => {
   return merged.value.as ?? "li";
@@ -30,21 +30,23 @@ const rootTag = computed(() => {
 </script>
 
 <template>
-  <div v-bind="titleBind" v-if="rootTag === 'div'">
-    <slot v-if="hasNamedSlot(slots, 'default')" />
-
-    <template v-else-if="isPropPresent(merged.title)">
-      {{ merged.title }}
-    </template>
-  </div>
-
-  <component v-else :is="rootTag" v-bind="rootBind">
-    <div v-bind="titleBind">
+  <template v-if="!isHidden">
+    <div v-bind="titleBind" v-if="rootTag === 'div'">
       <slot v-if="hasNamedSlot(slots, 'default')" />
 
       <template v-else-if="isPropPresent(merged.title)">
         {{ merged.title }}
       </template>
     </div>
-  </component>
+
+    <component v-else :is="rootTag" v-bind="rootBind">
+      <div v-bind="titleBind">
+        <slot v-if="hasNamedSlot(slots, 'default')" />
+
+        <template v-else-if="isPropPresent(merged.title)">
+          {{ merged.title }}
+        </template>
+      </div>
+    </component>
+  </template>
 </template>
diff --git a/packages/vue/src/Components/ListSection/__tests__/useListSection.test.ts b/packages/vue/src/Components/ListSection/__tests__/useListSection.test.ts
index f471ca69..11abbe13 100644
--- a/packages/vue/src/Components/ListSection/__tests__/useListSection.test.ts
+++ b/packages/vue/src/Components/ListSection/__tests__/useListSection.test.ts
@@ -30,6 +30,7 @@ test("it should apply section title classes", () => {
   const { titleBind } = mountUseListSection({ title: "Settings" });
 
   expect(titleBind.value.role).toBe("presentation");
+  expect(titleBind.value.class).toContain("px-2");
   expect(titleBind.value.class).toContain("text-xs");
   expect(titleBind.value.class).toContain("uppercase");
 });
diff --git a/packages/vue/src/Components/ListSection/composables/useListSection.ts b/packages/vue/src/Components/ListSection/composables/useListSection.ts
index 2ab1fb18..b805656c 100644
--- a/packages/vue/src/Components/ListSection/composables/useListSection.ts
+++ b/packages/vue/src/Components/ListSection/composables/useListSection.ts
@@ -11,6 +11,7 @@ import type {
   ListSectionOwnProps,
   ListSectionProps,
 } from "@/Components/ListSection/listSection.types";
+import { LIST_SECTION_INJECTION_KEY } from "@/Components/ListSection/listSectionInjectionKey";
 import {
   mergePartBind,
   useBridgeUIComponent,
@@ -30,6 +31,7 @@ export function useListSection(props: ListSectionOwnProps) {
   const attrs = useAttrs();
 
   const listContext = inject(LIST_INJECTION_KEY, null);
+  const listSection = inject(LIST_SECTION_INJECTION_KEY, null);
 
   const split = computed(() => {
     return splitComponentProps<ListSectionProps, typeof listSectionBridgeKeys>({
@@ -59,6 +61,10 @@ export function useListSection(props: ListSectionOwnProps) {
     return listContext ? toValue(listContext).dense : false;
   });
 
+  const isHidden = computed(() => {
+    return listSection ? toValue(listSection).hidden : false;
+  });
+
   const rootInheritedAttrs = computed(() => {
     return omit(split.value.inheritedAttrs, []);
   });
@@ -87,7 +93,7 @@ export function useListSection(props: ListSectionOwnProps) {
       {
         role: "presentation",
         class: cn({
-          "bg-white px-4 text-xs font-semibold tracking-wide text-dark-500 uppercase dark:bg-dark-800 dark:text-dark-300": true,
+          "bg-white px-2 text-xs font-semibold tracking-wide text-dark-500 uppercase dark:bg-dark-800 dark:text-dark-300": true,
           "sticky top-0 z-10": merged.value.sticky && isDivRoot.value,
           "py-2": !isDense.value,
           "py-1.5": isDense.value,
@@ -101,6 +107,7 @@ export function useListSection(props: ListSectionOwnProps) {
   return {
     merged,
     rootBind,
+    isHidden,
     titleBind,
   };
 }
diff --git a/packages/vue/src/Components/ListSection/listSectionInjectionKey.ts b/packages/vue/src/Components/ListSection/listSectionInjectionKey.ts
new file mode 100644
index 00000000..00d43ee4
--- /dev/null
+++ b/packages/vue/src/Components/ListSection/listSectionInjectionKey.ts
@@ -0,0 +1,10 @@
+// ** External Imports
+import type { ComputedRef, InjectionKey } from "vue";
+
+export type ListSectionContextValue = {
+  hidden: boolean;
+};
+
+export const LIST_SECTION_INJECTION_KEY = Symbol(
+  "bridge-list-section",
+) as InjectionKey<ComputedRef<ListSectionContextValue>>;
diff --git a/packages/vue/src/Components/Sidebar/Sidebar.vue b/packages/vue/src/Components/Sidebar/Sidebar.vue
new file mode 100644
index 00000000..de7945d1
--- /dev/null
+++ b/packages/vue/src/Components/Sidebar/Sidebar.vue
@@ -0,0 +1,98 @@
+<script setup lang="ts">
+// ** Local Imports
+import { Drawer } from "@/Components/Drawer";
+import { useSidebarShell } from "@/Components/Sidebar/composables/useSidebarShell";
+import type {
+  SidebarOwnProps,
+  SidebarSlots,
+} from "@/Components/Sidebar/sidebar.types";
+import { hasNamedSlot } from "@/Utils";
+
+defineSlots<SidebarSlots>();
+
+defineOptions({ name: "Sidebar", inheritAttrs: false });
+
+const props = withDefaults(defineProps<SidebarOwnProps>(), {
+  side: "left",
+  variant: "sidebar",
+  ariaLabel: "Sidebar",
+  collapsible: "offcanvas",
+});
+
+const {
+  slots,
+  merged,
+  panelId,
+  gapBind,
+  rootBind,
+  isMobile,
+  asideBind,
+  panelBind,
+  headerBind,
+  footerBind,
+  openMobile,
+  contentBind,
+  showAsDrawer,
+  setOpenMobile,
+  drawerPanelStyle,
+} = useSidebarShell(props, {
+  side: "left",
+  variant: "sidebar",
+  ariaLabel: "Sidebar",
+  collapsible: "offcanvas",
+});
+</script>
+
+<template>
+  <div v-bind="rootBind">
+    <div v-bind="gapBind" />
+
+    <aside v-bind="asideBind">
+      <div v-bind="panelBind">
+        <template v-if="!showAsDrawer">
+          <div v-bind="headerBind" v-if="hasNamedSlot(slots, 'header')">
+            <slot name="header" />
+          </div>
+
+          <div v-bind="contentBind">
+            <slot />
+          </div>
+
+          <div v-bind="footerBind" v-if="hasNamedSlot(slots, 'footer')">
+            <slot name="footer" />
+          </div>
+        </template>
+      </div>
+    </aside>
+  </div>
+
+  <Drawer
+    v-if="isMobile"
+    :placement="merged.side"
+    :model-value="openMobile"
+    @show-change="setOpenMobile"
+    :aria-label="merged.ariaLabel"
+    @update:model-value="setOpenMobile"
+    :custom-props="{
+      panel: {
+        class: 'p-0',
+        style: drawerPanelStyle,
+        id: showAsDrawer ? panelId : undefined,
+      },
+    }"
+  >
+    <div v-bind="panelBind" v-if="showAsDrawer">
+      <div v-bind="headerBind" v-if="hasNamedSlot(slots, 'header')">
+        <slot name="header" />
+      </div>
+
+      <div v-bind="contentBind">
+        <slot />
+      </div>
+
+      <div v-bind="footerBind" v-if="hasNamedSlot(slots, 'footer')">
+        <slot name="footer" />
+      </div>
+    </div>
+  </Drawer>
+</template>
diff --git a/packages/vue/src/Components/Sidebar/SidebarInset.vue b/packages/vue/src/Components/Sidebar/SidebarInset.vue
new file mode 100644
index 00000000..cf955bee
--- /dev/null
+++ b/packages/vue/src/Components/Sidebar/SidebarInset.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+// ** Local Imports
+import { useSidebarInset } from "@/Components/Sidebar/composables/useSidebarInset";
+import type {
+  SidebarInsetOwnProps,
+  SidebarInsetSlots,
+} from "@/Components/Sidebar/sidebar.types";
+
+defineSlots<SidebarInsetSlots>();
+
+defineOptions({ inheritAttrs: false, name: "SidebarInset" });
+
+const props = defineProps<SidebarInsetOwnProps>();
+
+const { rootBind } = useSidebarInset(props);
+</script>
+
+<template>
+  <main v-bind="rootBind">
+    <slot />
+  </main>
+</template>
diff --git a/packages/vue/src/Components/Sidebar/SidebarList.vue b/packages/vue/src/Components/Sidebar/SidebarList.vue
new file mode 100644
index 00000000..7f9324d0
--- /dev/null
+++ b/packages/vue/src/Components/Sidebar/SidebarList.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+// ** External Imports
+import { computed, provide, useAttrs } from "vue";
+
+// ** Core Imports
+import { cn } from "@bridge-ui/core/Utils";
+
+// ** Local Imports
+import List from "@/Components/List/List.vue";
+import type { ListOwnProps } from "@/Components/List/list.types";
+import { LIST_SECTION_INJECTION_KEY } from "@/Components/ListSection/listSectionInjectionKey";
+import { useSidebarList } from "@/Components/Sidebar/composables/useSidebarList";
+import type { SidebarListOwnProps } from "@/Components/Sidebar/sidebar.types";
+
+defineOptions({ inheritAttrs: false });
+
+const props = defineProps<ListOwnProps & SidebarListOwnProps>();
+
+const attrs = useAttrs();
+
+const { rootClassName, iconOnly: resolvedIconOnly } = useSidebarList(props);
+
+provide(
+  LIST_SECTION_INJECTION_KEY,
+  computed(() => {
+    return { hidden: resolvedIconOnly.value };
+  }),
+);
+
+const listBind = computed(() => {
+  const { classes, iconOnly: _iconOnly, ...listProps } = props;
+
+  return {
+    ...attrs,
+    ...listProps,
+    ...(props.nested === true && resolvedIconOnly.value
+      ? { hidden: true as const }
+      : {}),
+    classes: {
+      ...classes,
+      root: cn(rootClassName.value, classes?.root),
+    },
+  };
+});
+</script>
+
+<template>
+  <List v-bind="listBind">
+    <slot />
+  </List>
+</template>
diff --git a/packages/vue/src/Components/Sidebar/SidebarListItem.vue b/packages/vue/src/Components/Sidebar/SidebarListItem.vue
new file mode 100644
index 00000000..591e59d6
--- /dev/null
+++ b/packages/vue/src/Components/Sidebar/SidebarListItem.vue
@@ -0,0 +1,120 @@
+<script setup lang="ts">
+// ** External Imports
+import { computed, useAttrs, useSlots } from "vue";
+
+// ** Core Imports
+import { cn } from "@bridge-ui/core/Utils";
+
+// ** Local Imports
+import ListItem from "@/Components/ListItem/ListItem.vue";
+import type {
+  ListItemOwnProps,
+  ListItemSlots,
+} from "@/Components/ListItem/listItem.types";
+import { useSidebarListItem } from "@/Components/Sidebar/composables/useSidebarListItem";
+import type { SidebarListItemOwnProps } from "@/Components/Sidebar/sidebar.types";
+import Tooltip from "@/Components/Tooltip/Tooltip.vue";
+import { hasNamedSlot } from "@/Utils";
+
+defineSlots<ListItemSlots>();
+
+defineOptions({ inheritAttrs: false });
+
+const props = defineProps<ListItemOwnProps & SidebarListItemOwnProps>();
+
+const attrs = useAttrs();
+const slots = useSlots();
+
+const {
+  itemClasses,
+  accessibleName,
+  tooltip: resolvedTooltip,
+  tooltipPlacement: resolvedTooltipPlacement,
+} = useSidebarListItem(props);
+
+const listItemBind = computed(() => {
+  const {
+    classes,
+    customProps,
+    tooltip: _tooltip,
+    tooltipPlacement: _placement,
+    ...itemProps
+  } = props;
+
+  return {
+    ...attrs,
+    ...itemProps,
+    ...(resolvedTooltip.value ? { as: "div" as const } : {}),
+    customProps: {
+      ...customProps,
+      interactive: {
+        ...(accessibleName.value ? { "aria-label": accessibleName.value } : {}),
+        ...customProps?.interactive,
+      },
+    },
+    classes: {
+      ...classes,
+      end: cn(itemClasses.value.end, classes?.end),
+      start: cn(itemClasses.value.start, classes?.start),
+      content: cn(itemClasses.value.content, classes?.content),
+      interactive: cn(itemClasses.value.interactive, classes?.interactive),
+    },
+  };
+});
+</script>
+
+<template>
+  <li class="list-none" v-if="resolvedTooltip">
+    <Tooltip
+      :content="resolvedTooltip"
+      :placement="resolvedTooltipPlacement"
+      :classes="{ root: 'flex w-full min-w-0', trigger: 'flex w-full min-w-0' }"
+    >
+      <template #trigger>
+        <ListItem v-bind="listItemBind">
+          <template #default v-if="hasNamedSlot(slots, 'default')">
+            <slot />
+          </template>
+
+          <template #start v-if="hasNamedSlot(slots, 'start')">
+            <slot name="start" />
+          </template>
+
+          <template #end v-if="hasNamedSlot(slots, 'end')">
+            <slot name="end" />
+          </template>
+
+          <template #primary v-if="hasNamedSlot(slots, 'primary')">
+            <slot name="primary" />
+          </template>
+
+          <template #secondary v-if="hasNamedSlot(slots, 'secondary')">
+            <slot name="secondary" />
+          </template>
+        </ListItem>
+      </template>
+    </Tooltip>
+  </li>
+
+  <ListItem v-else v-bind="listItemBind">
+    <template #default v-if="hasNamedSlot(slots, 'default')">
+      <slot />
+    </template>
+
+    <template #start v-if="hasNamedSlot(slots, 'start')">
+      <slot name="start" />
+    </template>
+
+    <template #end v-if="hasNamedSlot(slots, 'end')">
+      <slot name="end" />
+    </template>
+
+    <template #primary v-if="hasNamedSlot(slots, 'primary')">
+      <slot name="primary" />
+    </template>
+
+    <template #secondary v-if="hasNamedSlot(slots, 'secondary')">
+      <slot name="secondary" />
+    </template>
+  </ListItem>
+</template>
diff --git a/packages/vue/src/Components/Sidebar/SidebarProvider.vue b/packages/vue/src/Components/Sidebar/SidebarProvider.vue
new file mode 100644
index 00000000..6f25f05e
--- /dev/null
+++ b/packages/vue/src/Components/Sidebar/SidebarProvider.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+// ** Local Imports
+import { useSidebarProvider } from "@/Components/Sidebar/composables/useSidebarProvider";
+import type {
+  SidebarProviderEmits,
+  SidebarProviderOwnProps,
+  SidebarProviderSlots,
+} from "@/Components/Sidebar/sidebar.types";
+
+defineSlots<SidebarProviderSlots>();
+
+const emit = defineEmits<SidebarProviderEmits>();
+
+defineOptions({ inheritAttrs: false, name: "SidebarProvider" });
+
+const props = withDefaults(defineProps<SidebarProviderOwnProps>(), {
+  defaultOpen: true,
+});
+
+const open = defineModel<boolean | undefined>({ default: undefined });
+
+const { rootBind } = useSidebarProvider(
+  props,
+  {
+    defaultOpen: true,
+  },
+  open,
+  emit,
+);
+</script>
+
+<template>
+  <div v-bind="rootBind">
+    <slot />
+  </div>
+</template>
diff --git a/packages/vue/src/Components/Sidebar/SidebarTrigger.vue b/packages/vue/src/Components/Sidebar/SidebarTrigger.vue
new file mode 100644
index 00000000..ccb434d4
--- /dev/null
+++ b/packages/vue/src/Components/Sidebar/SidebarTrigger.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+// ** External Imports
+import { useSlots } from "vue";
+
+// ** Local Imports
+import { Button } from "@/Components/Button";
+import { useSidebarTrigger } from "@/Components/Sidebar/composables/useSidebarTrigger";
+import type {
+  SidebarTriggerOwnProps,
+  SidebarTriggerSlots,
+} from "@/Components/Sidebar/sidebar.types";
+
+defineSlots<SidebarTriggerSlots>();
+
+defineOptions({ inheritAttrs: false });
+
+defineProps<SidebarTriggerOwnProps>();
+
+const slots = useSlots();
+
+const {
+  attrs,
+  panelId,
+  expanded,
+  iconClass,
+  ariaLabel,
+  handleClick,
+  hasDefaultSlot,
+} = useSidebarTrigger(slots);
+</script>
+
+<template>
+  <Button
+    v-bind="attrs"
+    color="dark"
+    type="button"
+    density="mini"
+    variant="light"
+    :aria-label="ariaLabel"
+    v-on:click="handleClick"
+    :aria-expanded="expanded"
+    :classes="{ icon: iconClass }"
+    :aria-controls="panelId || undefined"
+    :icon="hasDefaultSlot ? undefined : 'panelLeft'"
+  >
+    <slot v-if="hasDefaultSlot" />
+  </Button>
+</template>
diff --git a/packages/vue/src/Components/Sidebar/__tests__/Sidebar.cy.ts b/packages/vue/src/Components/Sidebar/__tests__/Sidebar.cy.ts
new file mode 100644
index 00000000..b0f3dc94
--- /dev/null
+++ b/packages/vue/src/Components/Sidebar/__tests__/Sidebar.cy.ts
@@ -0,0 +1,82 @@
+// ** External Imports
+import { h } from "vue";
+
+// ** Local Imports
+import {
+  Sidebar,
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/Components/Sidebar";
+
+test("it should render the sidebar and inset", () => {
+  cy.mount(SidebarProvider, {
+    slots: {
+      default: () => [
+        h(Sidebar, null, { default: () => "Home" }),
+        h(SidebarInset, null, {
+          default: () => [h(SidebarTrigger), "Main"],
+        }),
+      ],
+    },
+  });
+
+  cy.contains("Home").should("exist");
+  cy.contains("Main").should("be.visible");
+  cy.get("button[aria-label='Toggle sidebar']").should("be.visible");
+});
+
+test("it should collapse when the trigger is clicked", () => {
+  cy.mount(SidebarProvider, {
+    slots: {
+      default: () => [
+        h(Sidebar, null, { default: () => "Home" }),
+        h(SidebarInset, null, {
+          default: () => [h(SidebarTrigger), "Main"],
+        }),
+      ],
+    },
+  });
+
+  cy.get("[data-state='expanded']").should("exist");
+  cy.get("button[aria-label='Toggle sidebar']").click();
+  cy.get("[data-state='collapsed']").should("exist");
+});
+
+test("it should render header and footer slot content", () => {
+  cy.mount(SidebarProvider, {
+    slots: {
+      default: () => [
+        h(
+          Sidebar,
+          {},
+          {
+            default: () => "Nav",
+            header: () => h("div", "Brand"),
+            footer: () => h("div", "Account"),
+          },
+        ),
+        h(SidebarInset, null, { default: () => h(SidebarTrigger) }),
+      ],
+    },
+  });
+
+  cy.contains("Brand").should("exist");
+  cy.contains("Account").should("exist");
+});
+
+test("it should inert the aside when offcanvas is collapsed", () => {
+  cy.mount(SidebarProvider, {
+    slots: {
+      default: () => [
+        h(Sidebar, null, { default: () => "Home" }),
+        h(SidebarInset, null, {
+          default: () => [h(SidebarTrigger), "Main"],
+        }),
+      ],
+    },
+  });
+
+  cy.get("button[aria-label='Toggle sidebar']").click();
+  cy.get("aside").should("have.attr", "inert");
+});
diff --git a/packages/vue/src/Components/Sidebar/__tests__/Sidebar.test.ts b/packages/vue/src/Components/Sidebar/__tests__/Sidebar.test.ts
new file mode 100644
index 00000000..634e6110
--- /dev/null
+++ b/packages/vue/src/Components/Sidebar/__tests__/Sidebar.test.ts
@@ -0,0 +1,353 @@
+// ** External Imports
+import { mount } from "@vue/test-utils";
+import { expect, test } from "vitest";
+import { defineComponent, h, nextTick } from "vue";
+
+// ** Local Imports
+import { ListSection } from "@/Components/ListSection";
+import {
+  Sidebar,
+  SidebarInset,
+  SidebarList,
+  SidebarListItem,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/Components/Sidebar";
+
+const AppShell = defineComponent({
+  props: {
+    side: {
+      type: String,
+      default: "left",
+    },
+    collapsible: {
+      type: String,
+      default: "offcanvas",
+    },
+  },
+  setup(props) {
+    return () =>
+      h(SidebarProvider, null, {
+        default: () => [
+          h(
+            Sidebar,
+            {
+              side: props.side as "left" | "right",
+              collapsible: props.collapsible as "icon" | "none" | "offcanvas",
+            },
+            { default: () => h("nav", "Home") },
+          ),
+          h(SidebarInset, null, {
+            default: () => [h(SidebarTrigger), h("p", "Main")],
+          }),
+        ],
+      });
+  },
+});
+
+test("it should render the sidebar aside and main inset", () => {
+  const wrapper = mount(AppShell);
+
+  expect(wrapper.find("aside").exists()).toBe(true);
+  expect(wrapper.text()).toContain("Home");
+  expect(wrapper.text()).toContain("Main");
+});
+
+test("it should default to expanded desktop state", () => {
+  const wrapper = mount(AppShell);
+
+  expect(wrapper.find("[data-state='expanded']").exists()).toBe(true);
+});
+
+test("it should toggle desktop open when the trigger is clicked", async () => {
+  const wrapper = mount(AppShell);
+
+  await wrapper.get("button[aria-label='Toggle sidebar']").trigger("click");
+
+  expect(wrapper.find("[data-state='collapsed']").exists()).toBe(true);
+});
+
+test("it should keep expanded state when collapsible is none", async () => {
+  const wrapper = mount(AppShell, { props: { collapsible: "none" } });
+
+  await wrapper.get("button[aria-label='Toggle sidebar']").trigger("click");
+
+  expect(wrapper.find("[data-state='expanded']").exists()).toBe(true);
+  expect(wrapper.find("[data-state='collapsed']").exists()).toBe(false);
+});
+
+test("it should render header and footer slots", () => {
+  const wrapper = mount(SidebarProvider, {
+    slots: {
+      default: () => [
+        h(
+          Sidebar,
+          {},
+          {
+            default: () => "Nav",
+            footer: () => h("div", "User"),
+            header: () => h("div", "Brand"),
+          },
+        ),
+        h(SidebarInset, null, {
+          default: () => h(SidebarTrigger),
+        }),
+      ],
+    },
+  });
+
+  expect(wrapper.text()).toContain("Brand");
+  expect(wrapper.text()).toContain("User");
+});
+
+test("it should mark the trigger as expanded by default", async () => {
+  const wrapper = mount(AppShell);
+
+  await nextTick();
+
+  expect(
+    wrapper
+      .get("button[aria-label='Toggle sidebar']")
+      .attributes("aria-expanded"),
+  ).toBe("true");
+});
+
+test("it should emit openChange when the trigger is clicked", async () => {
+  const wrapper = mount(SidebarProvider, {
+    props: { modelValue: true },
+    slots: {
+      default: () => [
+        h(Sidebar, null, { default: () => h("nav", "Home") }),
+        h(SidebarInset, null, {
+          default: () => [h(SidebarTrigger), h("p", "Main")],
+        }),
+      ],
+    },
+  });
+
+  await wrapper.get("button[aria-label='Toggle sidebar']").trigger("click");
+
+  expect(wrapper.emitted("openChange")).toEqual([[false]]);
+  expect(wrapper.emitted("update:modelValue")).toEqual([[false]]);
+});
+
+test("it should dock the left aside and slide it off-canvas by offsetting left", () => {
+  const wrapper = mount(AppShell);
+  const asideClass = wrapper.find("aside").classes().join(" ");
+
+  expect(asideClass).toContain("left-0");
+  expect(asideClass).toContain("overflow-hidden");
+  expect(asideClass).toContain("left-[calc(var(--bridge-sidebar-width)*-1)]");
+});
+
+test("it should apply data-side from the side prop", () => {
+  const wrapper = mount(AppShell, { props: { side: "right" } });
+
+  expect(wrapper.find("[data-side='right']").exists()).toBe(true);
+});
+
+test("it should inert the aside when offcanvas is collapsed", async () => {
+  const wrapper = mount(AppShell);
+
+  await wrapper.get("button[aria-label='Toggle sidebar']").trigger("click");
+
+  expect(wrapper.find("aside").attributes("inert")).toBeDefined();
+});
+
+test("it should not inert the aside when icon mode is collapsed", async () => {
+  const wrapper = mount(AppShell, { props: { collapsible: "icon" } });
+
+  await wrapper.get("button[aria-label='Toggle sidebar']").trigger("click");
+
+  expect(wrapper.find("aside").attributes("inert")).toBeUndefined();
+});
+
+test("it should collapse SidebarList items when the icon rail is collapsed", async () => {
+  const wrapper = mount(SidebarProvider, {
+    props: { defaultOpen: false },
+    slots: {
+      default: () => [
+        h(
+          Sidebar,
+          { collapsible: "icon" },
+          {
+            default: () =>
+              h(SidebarList, null, {
+                default: () =>
+                  h(SidebarListItem, {
+                    primary: "Home",
+                    interactive: true,
+                  }),
+              }),
+          },
+        ),
+        h(SidebarInset, null, {
+          default: () => h(SidebarTrigger),
+        }),
+      ],
+    },
+  });
+
+  await nextTick();
+
+  expect(wrapper.get('[aria-label="Home"]').attributes("aria-label")).toBe(
+    "Home",
+  );
+});
+
+test("it should collapse header rows with secondary to a square hit", async () => {
+  const wrapper = mount(SidebarProvider, {
+    props: { defaultOpen: false },
+    slots: {
+      default: () => [
+        h(
+          Sidebar,
+          { collapsible: "icon" },
+          {
+            default: () =>
+              h(SidebarList, null, {
+                default: () =>
+                  h(SidebarListItem, {
+                    primary: "Home",
+                    interactive: true,
+                  }),
+              }),
+            header: () =>
+              h(
+                SidebarList,
+                { classes: { root: "p-0" } },
+                {
+                  default: () =>
+                    h(SidebarListItem, {
+                      interactive: true,
+                      primary: "Acme Inc",
+                      secondary: "Enterprise",
+                    }),
+                },
+              ),
+          },
+        ),
+        h(SidebarInset, null, {
+          default: () => h(SidebarTrigger),
+        }),
+      ],
+    },
+  });
+
+  await nextTick();
+
+  const item = wrapper.get('[aria-label="Acme Inc"]');
+
+  expect(item.classes()).toContain("size-8");
+  expect(item.classes()).toContain("p-0");
+  expect(item.classes()).not.toContain("px-4");
+});
+
+test("it should apply nav chrome on SidebarList and SidebarListItem", async () => {
+  const wrapper = mount(SidebarProvider, {
+    slots: {
+      default: () => [
+        h(Sidebar, null, {
+          default: () =>
+            h(SidebarList, null, {
+              default: () =>
+                h(SidebarListItem, {
+                  primary: "Home",
+                  interactive: true,
+                }),
+            }),
+        }),
+        h(SidebarInset, null, {
+          default: () => h(SidebarTrigger),
+        }),
+      ],
+    },
+  });
+
+  await nextTick();
+
+  const home = wrapper.get('ul [role="button"]');
+
+  expect(wrapper.find("ul").classes()).toContain("gap-1");
+  expect(home.classes()).toContain("min-h-8");
+  expect(home.classes()).toContain("rounded-lg");
+});
+
+test("it should hide nested SidebarList when the icon rail is collapsed", async () => {
+  const wrapper = mount(SidebarProvider, {
+    props: { defaultOpen: false },
+    slots: {
+      default: () => [
+        h(
+          Sidebar,
+          { collapsible: "icon" },
+          {
+            default: () =>
+              h(SidebarList, null, {
+                default: () => [
+                  h(SidebarListItem, {
+                    primary: "Home",
+                    interactive: true,
+                  }),
+                  h(
+                    SidebarList,
+                    { nested: true },
+                    {
+                      default: () =>
+                        h(SidebarListItem, {
+                          primary: "Nested",
+                          interactive: true,
+                        }),
+                    },
+                  ),
+                ],
+              }),
+          },
+        ),
+        h(SidebarInset, null, {
+          default: () => h(SidebarTrigger),
+        }),
+      ],
+    },
+  });
+
+  await nextTick();
+
+  const lists = wrapper.findAll("ul");
+
+  expect(lists[1]?.classes()).toContain("hidden");
+  expect(lists[1]?.attributes("hidden")).toBeDefined();
+});
+
+test("it should hide ListSection when the icon rail is collapsed", async () => {
+  const wrapper = mount(SidebarProvider, {
+    props: { defaultOpen: false },
+    slots: {
+      default: () => [
+        h(
+          Sidebar,
+          { collapsible: "icon" },
+          {
+            default: () =>
+              h(SidebarList, null, {
+                default: () => [
+                  h(ListSection, { title: "Application" }),
+                  h(SidebarListItem, {
+                    primary: "Home",
+                    interactive: true,
+                  }),
+                ],
+              }),
+          },
+        ),
+        h(SidebarInset, null, {
+          default: () => h(SidebarTrigger),
+        }),
+      ],
+    },
+  });
+
+  await nextTick();
+
+  expect(wrapper.text()).not.toContain("Application");
+});
diff --git a/packages/vue/src/Components/Sidebar/__tests__/useSidebar.test.ts b/packages/vue/src/Components/Sidebar/__tests__/useSidebar.test.ts
new file mode 100644
index 00000000..9b92dd06
--- /dev/null
+++ b/packages/vue/src/Components/Sidebar/__tests__/useSidebar.test.ts
@@ -0,0 +1,95 @@
+// ** External Imports
+import { mount } from "@vue/test-utils";
+import { expect, test } from "vitest";
+import { defineComponent, h, nextTick } from "vue";
+
+// ** Local Imports
+import { Sidebar, SidebarProvider, useSidebar } from "@/Components/Sidebar";
+
+test("it should throw when used outside SidebarProvider", () => {
+  const Orphan = defineComponent({
+    setup() {
+      useSidebar();
+
+      return () => h("div");
+    },
+  });
+
+  expect(() => {
+    mount(Orphan);
+  }).toThrow("useSidebar must be used within a SidebarProvider");
+});
+
+test("it should default to open expanded state", () => {
+  let sidebar!: ReturnType<typeof useSidebar>;
+
+  const Probe = defineComponent({
+    setup() {
+      sidebar = useSidebar();
+
+      return () => h("div");
+    },
+  });
+
+  mount(SidebarProvider, {
+    slots: {
+      default: () => h(Sidebar, null, { default: () => h(Probe) }),
+    },
+  });
+
+  expect(sidebar.value.open).toBe(true);
+  expect(sidebar.value.state).toBe("expanded");
+  expect(sidebar.value.openMobile).toBe(false);
+});
+
+test("it should toggle desktop open", async () => {
+  let sidebar!: ReturnType<typeof useSidebar>;
+
+  const Probe = defineComponent({
+    setup() {
+      sidebar = useSidebar();
+
+      return () => h("div");
+    },
+  });
+
+  mount(SidebarProvider, {
+    slots: {
+      default: () => h(Sidebar, null, { default: () => h(Probe) }),
+    },
+  });
+
+  sidebar.value.toggleSidebar();
+  await nextTick();
+
+  expect(sidebar.value.open).toBe(false);
+  expect(sidebar.value.state).toBe("collapsed");
+});
+
+test("it should expose side and collapsible from Sidebar", async () => {
+  let sidebar!: ReturnType<typeof useSidebar>;
+
+  const Probe = defineComponent({
+    setup() {
+      sidebar = useSidebar();
+
+      return () => h("div");
+    },
+  });
+
+  mount(SidebarProvider, {
+    slots: {
+      default: () =>
+        h(
+          Sidebar,
+          { side: "right", collapsible: "icon" },
+          { default: () => h(Probe) },
+        ),
+    },
+  });
+
+  await nextTick();
+
+  expect(sidebar.value.side).toBe("right");
+  expect(sidebar.value.collapsible).toBe("icon");
+});
diff --git a/packages/vue/src/Components/Sidebar/__tests__/useSidebarList.test.ts b/packages/vue/src/Components/Sidebar/__tests__/useSidebarList.test.ts
new file mode 100644
index 00000000..04988cd3
--- /dev/null
+++ b/packages/vue/src/Components/Sidebar/__tests__/useSidebarList.test.ts
@@ -0,0 +1,130 @@
+// ** External Imports
+import { mount } from "@vue/test-utils";
+import { expect, test } from "vitest";
+import { defineComponent, h, nextTick } from "vue";
+
+// ** Local Imports
+import { Sidebar, SidebarProvider, useSidebarList } from "@/Components/Sidebar";
+
+function mountUseSidebarList(
+  props: { iconOnly?: boolean } = {},
+  sidebarProps: { collapsible?: "icon" | "none" | "offcanvas" } = {},
+  providerProps: { defaultOpen?: boolean } = {},
+) {
+  let result!: ReturnType<typeof useSidebarList>;
+
+  const Probe = defineComponent({
+    props: {
+      iconOnly: {
+        type: Boolean,
+        default: undefined,
+      },
+    },
+    setup(probeProps) {
+      result = useSidebarList(probeProps);
+
+      return () => h("div");
+    },
+  });
+
+  mount(SidebarProvider, {
+    props: providerProps,
+    slots: {
+      default: () =>
+        h(Sidebar, sidebarProps, {
+          default: () => h(Probe, props),
+        }),
+    },
+  });
+
+  return result;
+}
+
+test("it should set iconOnly when the icon rail is collapsed", async () => {
+  const { iconOnly } = mountUseSidebarList(
+    {},
+    { collapsible: "icon" },
+    { defaultOpen: false },
+  );
+
+  await nextTick();
+
+  expect(iconOnly.value).toBe(true);
+});
+
+test("it should not set iconOnly when the icon rail is expanded", async () => {
+  const { iconOnly } = mountUseSidebarList({}, { collapsible: "icon" });
+
+  await nextTick();
+
+  expect(iconOnly.value).toBe(false);
+});
+
+test("it should allow iconOnly to be overridden", async () => {
+  const { iconOnly } = mountUseSidebarList(
+    { iconOnly: false },
+    { collapsible: "icon" },
+    { defaultOpen: false },
+  );
+
+  await nextTick();
+
+  expect(iconOnly.value).toBe(false);
+});
+
+test("it should apply stacked nav chrome on the list root", async () => {
+  const { rootClassName } = mountUseSidebarList({}, { collapsible: "icon" });
+
+  await nextTick();
+
+  expect(rootClassName.value).toContain("px-2");
+  expect(rootClassName.value).toContain("gap-1");
+});
+
+test("it should apply a nested start-edge guide line", async () => {
+  let result!: ReturnType<typeof useSidebarList>;
+
+  const Probe = defineComponent({
+    setup() {
+      result = useSidebarList({ nested: true });
+
+      return () => h("div");
+    },
+  });
+
+  mount(SidebarProvider, {
+    slots: {
+      default: () =>
+        h(Sidebar, { collapsible: "icon" }, { default: () => h(Probe) }),
+    },
+  });
+
+  await nextTick();
+
+  expect(result.rootClassName.value).toContain("ml-3.5");
+  expect(result.rootClassName.value).toContain("border-l");
+});
+
+test("it should hide nested lists when the icon rail is collapsed", async () => {
+  let result!: ReturnType<typeof useSidebarList>;
+
+  const Probe = defineComponent({
+    setup() {
+      result = useSidebarList({ nested: true });
+
+      return () => h("div");
+    },
+  });
+
+  mount(SidebarProvider, {
+    props: { defaultOpen: false },
+    slots: {
+      default: () =>
+        h(Sidebar, { collapsible: "icon" }, { default: () => h(Probe) }),
+    },
+  });
+
+  await nextTick();
+
+  expect(result.rootClassName.value).toContain("hidden");
+});
diff --git a/packages/vue/src/Components/Sidebar/__tests__/useSidebarListItem.test.ts b/packages/vue/src/Components/Sidebar/__tests__/useSidebarListItem.test.ts
new file mode 100644
index 00000000..7f8613c9
--- /dev/null
+++ b/packages/vue/src/Components/Sidebar/__tests__/useSidebarListItem.test.ts
@@ -0,0 +1,150 @@
+// ** External Imports
+import { mount } from "@vue/test-utils";
+import { expect, test } from "vitest";
+import { defineComponent, h, nextTick } from "vue";
+
+// ** Local Imports
+import {
+  Sidebar,
+  SidebarProvider,
+  useSidebarListItem,
+} from "@/Components/Sidebar";
+
+function mountUseSidebarListItem(
+  itemProps: { primary?: string; secondary?: string; tooltip?: string } = {},
+  sidebarProps: {
+    collapsible?: "icon" | "none" | "offcanvas";
+    side?: "left" | "right";
+  } = {},
+  providerProps: { defaultOpen?: boolean } = {},
+) {
+  let result!: ReturnType<typeof useSidebarListItem>;
+
+  const Probe = defineComponent({
+    setup() {
+      result = useSidebarListItem(itemProps);
+
+      return () => h("div");
+    },
+  });
+
+  mount(SidebarProvider, {
+    props: providerProps,
+    slots: {
+      default: () => h(Sidebar, sidebarProps, { default: () => h(Probe) }),
+    },
+  });
+
+  return result;
+}
+
+test("it should use primary as tooltip when the icon rail is collapsed", async () => {
+  const { tooltip, tooltipPlacement } = mountUseSidebarListItem(
+    { primary: "Home" },
+    { collapsible: "icon" },
+    { defaultOpen: false },
+  );
+
+  await nextTick();
+
+  expect(tooltip.value).toBe("Home");
+  expect(tooltipPlacement.value).toBe("right");
+});
+
+test("it should place the tooltip opposite a right rail", async () => {
+  const { tooltipPlacement } = mountUseSidebarListItem(
+    { primary: "Home" },
+    { side: "right", collapsible: "icon" },
+    { defaultOpen: false },
+  );
+
+  await nextTick();
+
+  expect(tooltipPlacement.value).toBe("left");
+});
+
+test("it should omit the tooltip when the rail is expanded", async () => {
+  const { tooltip } = mountUseSidebarListItem(
+    { primary: "Home" },
+    { collapsible: "icon" },
+  );
+
+  await nextTick();
+
+  expect(tooltip.value).toBeUndefined();
+});
+
+test("it should omit an explicit tooltip when the rail is expanded", async () => {
+  const { tooltip } = mountUseSidebarListItem(
+    { primary: "Home", tooltip: "Go home" },
+    { collapsible: "icon" },
+  );
+
+  await nextTick();
+
+  expect(tooltip.value).toBeUndefined();
+});
+
+test("it should use an explicit tooltip when the icon rail is collapsed", async () => {
+  const { tooltip } = mountUseSidebarListItem(
+    { primary: "Home", tooltip: "Go home" },
+    { collapsible: "icon" },
+    { defaultOpen: false },
+  );
+
+  await nextTick();
+
+  expect(tooltip.value).toBe("Go home");
+});
+
+test("it should apply compact nav chrome when the rail is expanded", async () => {
+  const { itemClasses } = mountUseSidebarListItem(
+    { primary: "Home" },
+    { collapsible: "icon" },
+  );
+
+  await nextTick();
+
+  expect(itemClasses.value.interactive).toContain("min-h-8");
+  expect(itemClasses.value.interactive).toContain("rounded-lg");
+});
+
+test("it should apply a taller hit when secondary is set", async () => {
+  const { itemClasses } = mountUseSidebarListItem(
+    { primary: "Acme Inc", secondary: "Enterprise" },
+    { collapsible: "icon" },
+  );
+
+  await nextTick();
+
+  expect(itemClasses.value.interactive).toContain("py-2");
+  expect(itemClasses.value.interactive).toContain("min-h-12");
+});
+
+test("it should apply a compact hit when the icon rail is collapsed", async () => {
+  const { itemClasses } = mountUseSidebarListItem(
+    { primary: "Home" },
+    { collapsible: "icon" },
+    { defaultOpen: false },
+  );
+
+  await nextTick();
+
+  expect(itemClasses.value.interactive).toContain("h-8");
+  expect(itemClasses.value.content).toContain("hidden");
+});
+
+test("it should square the hit when secondary is set on the icon rail", async () => {
+  const { itemClasses } = mountUseSidebarListItem(
+    { primary: "Acme Inc", secondary: "Enterprise" },
+    { collapsible: "icon" },
+    { defaultOpen: false },
+  );
+
+  await nextTick();
+
+  expect(itemClasses.value.interactive).toContain("size-8");
+  expect(itemClasses.value.interactive).toContain("p-0");
+  expect(itemClasses.value.content).toContain("hidden");
+  expect(itemClasses.value.end).toContain("hidden");
+});
diff --git a/packages/vue/src/Components/Sidebar/composables/useSidebar.ts b/packages/vue/src/Components/Sidebar/composables/useSidebar.ts
new file mode 100644
index 00000000..29bbae08
--- /dev/null
+++ b/packages/vue/src/Components/Sidebar/composables/useSidebar.ts
@@ -0,0 +1,23 @@
+// ** External Imports
+import { inject } from "vue";
+
+// ** Local Imports
+import {
+  SIDEBAR_INJECTION_KEY,
+  type SidebarContextValue,
+} from "@/Components/Sidebar/sidebarInjectionKey";
+
+/**
+ * Reads the nearest `SidebarProvider` context. Throws when used outside it.
+ */
+export function useSidebar() {
+  const context = inject(SIDEBAR_INJECTION_KEY);
+
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider");
+  }
+
+  return context;
+}
+
+export type { SidebarContextValue };
diff --git a/packages/vue/src/Components/Sidebar/composables/useSidebarInset.ts b/packages/vue/src/Components/Sidebar/composables/useSidebarInset.ts
new file mode 100644
index 00000000..25397ce6
--- /dev/null
+++ b/packages/vue/src/Components/Sidebar/composables/useSidebarInset.ts
@@ -0,0 +1,78 @@
+// ** External Imports
+import { get, omit } from "es-toolkit/compat";
+import { computed, useAttrs } from "vue";
+
+// ** Core Imports
+import { sidebarVariantProps as variantProps } from "@bridge-ui/core/Tokens";
+import {
+  cn,
+  mergeBridgeUILayeredClasses,
+  splitComponentProps,
+} from "@bridge-ui/core/Utils";
+
+// ** Local Imports
+import { useSidebar } from "@/Components/Sidebar/composables/useSidebar";
+import type {
+  SidebarInsetOwnProps,
+  SidebarInsetProps,
+} from "@/Components/Sidebar/sidebar.types";
+import { mergePartBind, useBridgeUIComponent } from "@/Utils";
+
+const sidebarInsetBridgeKeys = [
+  "classes",
+  "customProps",
+] as const satisfies readonly (keyof SidebarInsetOwnProps)[];
+
+export function useSidebarInset(props: SidebarInsetOwnProps) {
+  const sidebar = useSidebar();
+  const attrs = useAttrs();
+
+  const split = computed(() => {
+    return splitComponentProps<
+      SidebarInsetProps,
+      typeof sidebarInsetBridgeKeys
+    >({
+      props: { ...attrs, ...props },
+      bridgeKeys: sidebarInsetBridgeKeys,
+    });
+  });
+
+  const { merged, entry: bridgeSidebar } = useBridgeUIComponent<
+    SidebarInsetOwnProps,
+    "Sidebar"
+  >({
+    componentName: "Sidebar",
+    props: () => split.value.componentProps,
+  });
+
+  const customProps = computed(() => {
+    return merged.value.customProps as SidebarInsetOwnProps["customProps"];
+  });
+
+  const variantItem = computed(() => {
+    const classes = mergeBridgeUILayeredClasses(
+      variantProps,
+      bridgeSidebar.value?.tokens?.variant,
+    );
+
+    return get(classes, sidebar.value.variant);
+  });
+
+  const rootInheritedAttrs = computed(() => {
+    return omit(split.value.inheritedAttrs, []);
+  });
+
+  const rootBind = computed(() => {
+    return mergePartBind(customProps.value?.root, rootInheritedAttrs.value, {
+      class: cn({
+        [get(variantItem.value, "inset") ?? ""]: true,
+        [get(merged.value.classes, "root") ?? ""]: true,
+      }),
+    });
+  });
+
+  return {
+    merged,
+    rootBind,
+  };
+}
diff --git a/packages/vue/src/Components/Sidebar/composables/useSidebarList.ts b/packages/vue/src/Components/Sidebar/composables/useSidebarList.ts
new file mode 100644
index 00000000..b1739d6c
--- /dev/null
+++ b/packages/vue/src/Components/Sidebar/composables/useSidebarList.ts
@@ -0,0 +1,59 @@
+// ** External Imports
+import { computed, getCurrentInstance, inject, provide } from "vue";
+
+// ** Core Imports
+import { isSidebarIconOnly } from "@bridge-ui/core/Domain";
+import { cn } from "@bridge-ui/core/Utils";
+
+// ** Local Imports
+import { useSidebar } from "@/Components/Sidebar/composables/useSidebar";
+import type { SidebarListProps } from "@/Components/Sidebar/sidebar.types";
+import { SIDEBAR_LIST_INJECTION_KEY } from "@/Components/Sidebar/sidebarListInjectionKey";
+
+/**
+ * Binds icon-rail mode and applies nav chrome.
+ */
+export function useSidebarList(
+  props: Pick<SidebarListProps, "nested" | "iconOnly">,
+) {
+  const sidebar = useSidebar();
+  const instance = getCurrentInstance();
+  const parent = inject(SIDEBAR_LIST_INJECTION_KEY, null);
+
+  const iconOnly = computed(() => {
+    const vnodeProps = instance?.vnode.props ?? {};
+
+    if ("iconOnly" in vnodeProps || "icon-only" in vnodeProps) {
+      return props.iconOnly === true;
+    }
+
+    if (parent) {
+      return parent.value.iconOnly;
+    }
+
+    return isSidebarIconOnly({
+      state: sidebar.value.state,
+      isMobile: sidebar.value.isMobile,
+      collapsible: sidebar.value.collapsible,
+    });
+  });
+
+  provide(
+    SIDEBAR_LIST_INJECTION_KEY,
+    computed(() => {
+      return { iconOnly: iconOnly.value };
+    }),
+  );
+
+  const rootClassName = computed(() => {
+    return cn({
+      "flex flex-col gap-1": true,
+      "px-2": props.nested !== true,
+      "ml-3.5 translate-x-px border-l border-dark-200 py-0.5 pl-2.5 dark:border-dark-700":
+        props.nested === true,
+      hidden: props.nested === true && iconOnly.value,
+    });
+  });
+
+  return { iconOnly, rootClassName };
+}
diff --git a/packages/vue/src/Components/Sidebar/composables/useSidebarListItem.ts b/packages/vue/src/Components/Sidebar/composables/useSidebarListItem.ts
new file mode 100644
index 00000000..d01c938c
--- /dev/null
+++ b/packages/vue/src/Components/Sidebar/composables/useSidebarListItem.ts
@@ -0,0 +1,99 @@
+// ** External Imports
+import { computed, inject } from "vue";
+
+// ** Core Imports
+import {
+  isSidebarIconOnly,
+  resolveSidebarListTooltipPlacement,
+} from "@bridge-ui/core/Domain";
+import { cn } from "@bridge-ui/core/Utils";
+
+// ** Local Imports
+import { useSidebar } from "@/Components/Sidebar/composables/useSidebar";
+import type { SidebarListItemProps } from "@/Components/Sidebar/sidebar.types";
+import { SIDEBAR_LIST_INJECTION_KEY } from "@/Components/Sidebar/sidebarListInjectionKey";
+import { isPropPresent } from "@/Utils";
+
+/**
+ * Tooltip and nav chrome for a rail item.
+ */
+export function useSidebarListItem(
+  props: Pick<
+    SidebarListItemProps,
+    "primary" | "tooltip" | "secondary" | "tooltipPlacement"
+  >,
+) {
+  const sidebar = useSidebar();
+  const list = inject(SIDEBAR_LIST_INJECTION_KEY, null);
+
+  const iconOnly = computed(() => {
+    if (list) {
+      return list.value.iconOnly;
+    }
+
+    return isSidebarIconOnly({
+      state: sidebar.value.state,
+      isMobile: sidebar.value.isMobile,
+      collapsible: sidebar.value.collapsible,
+    });
+  });
+
+  const tooltip = computed(() => {
+    if (!iconOnly.value) {
+      return undefined;
+    }
+
+    if (props.tooltip !== undefined) {
+      return props.tooltip || undefined;
+    }
+
+    if (typeof props.primary !== "string") {
+      return undefined;
+    }
+
+    return props.primary;
+  });
+
+  const tooltipPlacement = computed(() => {
+    if (props.tooltipPlacement !== undefined) {
+      return props.tooltipPlacement;
+    }
+
+    return resolveSidebarListTooltipPlacement(sidebar.value.side);
+  });
+
+  const accessibleName = computed(() => {
+    if (!iconOnly.value || typeof props.primary !== "string") {
+      return undefined;
+    }
+
+    return props.primary;
+  });
+
+  const itemClasses = computed(() => {
+    const hasSecondary = isPropPresent(props.secondary);
+
+    return {
+      end: cn({
+        hidden: iconOnly.value,
+      }),
+      content: cn({
+        hidden: iconOnly.value,
+      }),
+      start: cn({
+        "items-center justify-center": true,
+      }),
+      interactive: cn({
+        "gap-x-2 overflow-hidden rounded-lg px-2 transition-[width,height,padding] duration-200 ease-linear":
+          !iconOnly.value,
+        "min-h-12 py-2": !iconOnly.value && hasSecondary,
+        "min-h-8 py-0": !iconOnly.value && !hasSecondary,
+        "gap-0 overflow-hidden rounded-lg p-0": iconOnly.value,
+        "size-8 justify-center": iconOnly.value && hasSecondary,
+        "h-8 w-full px-2": iconOnly.value && !hasSecondary,
+      }),
+    };
+  });
+
+  return { tooltip, itemClasses, accessibleName, tooltipPlacement };
+}
diff --git a/packages/vue/src/Components/Sidebar/composables/useSidebarProvider.ts b/packages/vue/src/Components/Sidebar/composables/useSidebarProvider.ts
new file mode 100644
index 00000000..39b84854
--- /dev/null
+++ b/packages/vue/src/Components/Sidebar/composables/useSidebarProvider.ts
@@ -0,0 +1,223 @@
+// ** External Imports
+import { get, omit } from "es-toolkit/compat";
+import { toMerged } from "es-toolkit/object";
+import {
+  computed,
+  provide,
+  ref,
+  useAttrs,
+  type Ref,
+  type SetupContext,
+} from "vue";
+
+// ** Core Imports
+import {
+  resolveSidebarState,
+  shouldToggleDesktopSidebar,
+  SIDEBAR_DESKTOP_BREAKPOINT,
+  SIDEBAR_WIDTH_ICON_VAR,
+  SIDEBAR_WIDTH_MOBILE_VAR,
+  SIDEBAR_WIDTH_VAR,
+  toggleSidebarOpen,
+} from "@bridge-ui/core/Domain";
+import {
+  sidebarWidthProps as widthProps,
+  type SidebarWidth,
+} from "@bridge-ui/core/Tokens";
+import {
+  cn,
+  splitComponentProps,
+  type LibDefaultsShape,
+  type MergeLibDefaults,
+} from "@bridge-ui/core/Utils";
+
+// ** Local Imports
+import type {
+  SidebarProviderEmits,
+  SidebarProviderOwnProps,
+  SidebarProviderProps,
+} from "@/Components/Sidebar/sidebar.types";
+import {
+  SIDEBAR_INJECTION_KEY,
+  type SidebarContextValue,
+  type SidebarLayout,
+} from "@/Components/Sidebar/sidebarInjectionKey";
+import {
+  mergePartBind,
+  useBreakpoint,
+  useBridgeUIComponent,
+  useBridgeUIMergedRegistryClasses,
+} from "@/Utils";
+
+const sidebarProviderBridgeKeys = [
+  "classes",
+  "customProps",
+  "defaultOpen",
+] as const satisfies readonly (keyof SidebarProviderOwnProps)[];
+
+type SidebarProviderLibDefaults = LibDefaultsShape<
+  SidebarProviderOwnProps,
+  "defaultOpen"
+>;
+
+type SidebarProviderMerged = MergeLibDefaults<
+  SidebarProviderOwnProps,
+  SidebarProviderLibDefaults
+>;
+
+const defaultLayout: SidebarLayout = {
+  panelId: "",
+  side: "left",
+  variant: "sidebar",
+  collapsible: "offcanvas",
+};
+
+export function useSidebarProvider(
+  props: SidebarProviderOwnProps,
+  libDefaults: SidebarProviderLibDefaults,
+  openModel: Ref<boolean | undefined>,
+  emit: SetupContext<SidebarProviderEmits>["emit"],
+) {
+  const attrs = useAttrs();
+  const breakpoint = useBreakpoint();
+
+  const split = computed(() => {
+    return splitComponentProps<
+      SidebarProviderProps,
+      typeof sidebarProviderBridgeKeys
+    >({
+      props: { ...attrs, ...props },
+      bridgeKeys: sidebarProviderBridgeKeys,
+    });
+  });
+
+  const { merged, entry: bridgeSidebar } = useBridgeUIComponent<
+    SidebarProviderMerged,
+    "Sidebar"
+  >({
+    libDefaults,
+    componentName: "Sidebar",
+    props: () => split.value.componentProps,
+  });
+
+  const customProps = computed(() => {
+    return merged.value.customProps;
+  });
+
+  const mergedClasses = useBridgeUIMergedRegistryClasses({
+    entry: bridgeSidebar,
+    props: () => split.value.componentProps,
+  });
+
+  const isMobile = computed(() => {
+    return breakpoint.lessThan(SIDEBAR_DESKTOP_BREAKPOINT);
+  });
+
+  const internalOpen = ref(merged.value.defaultOpen);
+  const openMobile = ref(false);
+  const layout = ref<SidebarLayout>({ ...defaultLayout });
+
+  const open = computed(() => {
+    return openModel.value ?? internalOpen.value;
+  });
+
+  const setOpen = (next: boolean) => {
+    if (openModel.value === undefined) {
+      internalOpen.value = next;
+    }
+
+    openModel.value = next;
+    emit("openChange", next);
+  };
+
+  const setOpenMobile = (next: boolean) => {
+    openMobile.value = next;
+  };
+
+  const setLayout = (next: Partial<SidebarLayout>) => {
+    const mergedLayout = { ...layout.value, ...next };
+
+    if (
+      layout.value.side === mergedLayout.side &&
+      layout.value.panelId === mergedLayout.panelId &&
+      layout.value.variant === mergedLayout.variant &&
+      layout.value.collapsible === mergedLayout.collapsible
+    ) {
+      return;
+    }
+
+    layout.value = mergedLayout;
+  };
+
+  const toggleSidebar = () => {
+    if (isMobile.value) {
+      setOpenMobile(toggleSidebarOpen(openMobile.value));
+      return;
+    }
+
+    if (!shouldToggleDesktopSidebar(layout.value.collapsible)) {
+      return;
+    }
+
+    setOpen(toggleSidebarOpen(open.value));
+  };
+
+  const state = computed(() => {
+    return resolveSidebarState(open.value, layout.value.collapsible);
+  });
+
+  const widthItem = computed((): SidebarWidth => {
+    return toMerged(widthProps, bridgeSidebar.value?.tokens?.width ?? {});
+  });
+
+  const contextValue = computed((): SidebarContextValue => {
+    return {
+      setOpen,
+      setLayout,
+      toggleSidebar,
+      setOpenMobile,
+      open: open.value,
+      state: state.value,
+      side: layout.value.side,
+      isMobile: isMobile.value,
+      openMobile: openMobile.value,
+      panelId: layout.value.panelId,
+      variant: layout.value.variant,
+      collapsible: layout.value.collapsible,
+    };
+  });
+
+  provide(SIDEBAR_INJECTION_KEY, contextValue);
+
+  const rootInheritedAttrs = computed(() => {
+    return omit(split.value.inheritedAttrs, [
+      "modelValue",
+      "onUpdate:modelValue",
+    ]);
+  });
+
+  const rootBind = computed(() => {
+    const inheritedStyle = (
+      rootInheritedAttrs.value as { style?: Record<string, string> }
+    ).style;
+
+    return mergePartBind(customProps.value?.root, rootInheritedAttrs.value, {
+      "data-side": layout.value.side,
+      class: cn({
+        "flex min-h-svh w-full data-[side=right]:flex-row-reverse": true,
+        [get(mergedClasses.value, "root") ?? ""]: true,
+      }),
+      style: {
+        ...inheritedStyle,
+        [SIDEBAR_WIDTH_VAR]: widthItem.value.default,
+        [SIDEBAR_WIDTH_ICON_VAR]: widthItem.value.icon,
+        [SIDEBAR_WIDTH_MOBILE_VAR]: widthItem.value.mobile,
+      },
+    });
+  });
+
+  return {
+    merged,
+    rootBind,
+  };
+}
diff --git a/packages/vue/src/Components/Sidebar/composables/useSidebarShell.ts b/packages/vue/src/Components/Sidebar/composables/useSidebarShell.ts
new file mode 100644
index 00000000..11cd7387
--- /dev/null
+++ b/packages/vue/src/Components/Sidebar/composables/useSidebarShell.ts
@@ -0,0 +1,279 @@
+// ** External Imports
+import { get, omit } from "es-toolkit/compat";
+import { toMerged } from "es-toolkit/object";
+import { computed, useAttrs, useId, useSlots, watch } from "vue";
+
+// ** Core Imports
+import {
+  getSidebarPanelId,
+  resolveSidebarCollapsibleData,
+  shouldRenderSidebarAsDrawer,
+} from "@bridge-ui/core/Domain";
+import {
+  sidebarCollapsibleProps as collapsibleProps,
+  sidebarSideProps as sideProps,
+  sidebarVariantProps as variantProps,
+  sidebarWidthProps as widthProps,
+  type SidebarWidth,
+} from "@bridge-ui/core/Tokens";
+import {
+  cn,
+  mergeBridgeUILayeredClasses,
+  splitComponentProps,
+  type LibDefaultsShape,
+  type MergeLibDefaults,
+} from "@bridge-ui/core/Utils";
+
+// ** Local Imports
+import { useSidebar } from "@/Components/Sidebar/composables/useSidebar";
+import type {
+  SidebarOwnProps,
+  SidebarProps,
+} from "@/Components/Sidebar/sidebar.types";
+import {
+  mergePartBind,
+  useBridgeUIComponent,
+  useBridgeUIMergedRegistryClasses,
+} from "@/Utils";
+
+const sidebarBridgeKeys = [
+  "side",
+  "classes",
+  "variant",
+  "ariaLabel",
+  "collapsible",
+  "customProps",
+] as const satisfies readonly (keyof SidebarOwnProps)[];
+
+type SidebarLibDefaults = LibDefaultsShape<
+  SidebarOwnProps,
+  "side" | "variant" | "ariaLabel" | "collapsible"
+>;
+
+type SidebarMerged = MergeLibDefaults<SidebarOwnProps, SidebarLibDefaults>;
+
+export function useSidebarShell(
+  props: SidebarOwnProps,
+  libDefaults: SidebarLibDefaults,
+) {
+  const vueId = useId();
+  const panelId = getSidebarPanelId(`bridge-sidebar${vueId}`);
+  const attrs = useAttrs();
+  const slots = useSlots();
+  const sidebar = useSidebar();
+
+  const split = computed(() => {
+    return splitComponentProps<SidebarProps, typeof sidebarBridgeKeys>({
+      props: { ...attrs, ...props },
+      bridgeKeys: sidebarBridgeKeys,
+    });
+  });
+
+  const { merged, entry: bridgeSidebar } = useBridgeUIComponent<
+    SidebarMerged,
+    "Sidebar"
+  >({
+    libDefaults,
+    componentName: "Sidebar",
+    props: () => split.value.componentProps,
+  });
+
+  const customProps = computed(() => {
+    return merged.value.customProps;
+  });
+
+  const mergedClasses = useBridgeUIMergedRegistryClasses({
+    entry: bridgeSidebar,
+    props: () => split.value.componentProps,
+  });
+
+  watch(
+    () => ({
+      panelId,
+      side: merged.value.side,
+      variant: merged.value.variant,
+      collapsible: merged.value.collapsible,
+    }),
+    (layout) => {
+      sidebar.value.setLayout(layout);
+    },
+    { immediate: true },
+  );
+
+  const variantItem = computed(() => {
+    const classes = mergeBridgeUILayeredClasses(
+      variantProps,
+      bridgeSidebar.value?.tokens?.variant,
+    );
+
+    return get(classes, merged.value.variant);
+  });
+
+  const collapsibleItem = computed(() => {
+    const classes = mergeBridgeUILayeredClasses(
+      collapsibleProps,
+      bridgeSidebar.value?.tokens?.collapsible,
+    );
+
+    return get(classes, merged.value.collapsible);
+  });
+
+  const sideClass = computed(() => {
+    const classes = mergeBridgeUILayeredClasses(
+      sideProps,
+      bridgeSidebar.value?.tokens?.side,
+    );
+
+    return get(classes, merged.value.side);
+  });
+
+  const collapsibleData = computed(() => {
+    return resolveSidebarCollapsibleData(
+      sidebar.value.state,
+      merged.value.collapsible,
+    );
+  });
+
+  const showAsDrawer = computed(() => {
+    return (
+      shouldRenderSidebarAsDrawer(sidebar.value.isMobile) &&
+      sidebar.value.openMobile
+    );
+  });
+
+  const rootInheritedAttrs = computed(() => {
+    return omit(split.value.inheritedAttrs, []);
+  });
+
+  const rootBind = computed(() => {
+    return mergePartBind(customProps.value?.root, rootInheritedAttrs.value, {
+      "data-side": merged.value.side,
+      "data-state": sidebar.value.state,
+      "data-variant": merged.value.variant,
+      "data-collapsible": collapsibleData.value,
+      "data-mobile": sidebar.value.isMobile ? "true" : "false",
+      class: cn({
+        "group peer hidden text-dark-900 md:block dark:text-dark-100": true,
+        [get(mergedClasses.value, "root") ?? ""]: true,
+      }),
+    });
+  });
+
+  const gapBind = computed(() => {
+    return mergePartBind(
+      customProps.value?.gap,
+      {},
+      cn({
+        [get(variantItem.value, "gap") ?? ""]: true,
+        [get(collapsibleItem.value, "gap") ?? ""]: true,
+        [get(mergedClasses.value, "gap") ?? ""]: true,
+      }),
+    );
+  });
+
+  const asideBind = computed(() => {
+    const offcanvasCollapsed = collapsibleData.value === "offcanvas";
+
+    return mergePartBind(
+      {},
+      {},
+      {
+        "data-side": merged.value.side,
+        "aria-label": merged.value.ariaLabel,
+        inert: offcanvasCollapsed ? true : undefined,
+        id: showAsDrawer.value ? undefined : panelId,
+        class: cn({
+          "fixed inset-y-0 z-10 hidden h-full w-[var(--bridge-sidebar-width)] overflow-hidden transition-[left,right,width] duration-200 ease-linear md:flex": true,
+          [sideClass.value ?? ""]: true,
+          [get(collapsibleItem.value, "panel") ?? ""]: true,
+        }),
+      },
+    );
+  });
+
+  const panelBind = computed(() => {
+    return mergePartBind(
+      customProps.value?.panel,
+      {},
+      cn({
+        "flex h-full w-full flex-col overflow-hidden": true,
+        [get(variantItem.value, "panel") ?? ""]: true,
+        [get(mergedClasses.value, "panel") ?? ""]: true,
+      }),
+    );
+  });
+
+  const headerBind = computed(() => {
+    return mergePartBind(
+      customProps.value?.header,
+      {},
+      cn({
+        "flex shrink-0 flex-col gap-2 px-2 py-2.5": true,
+        [get(mergedClasses.value, "header") ?? ""]: true,
+      }),
+    );
+  });
+
+  const contentBind = computed(() => {
+    return mergePartBind(
+      customProps.value?.content,
+      {},
+      cn({
+        "bridge-scroll-fade-y flex min-h-0 flex-1 flex-col overflow-y-auto": true,
+        [get(mergedClasses.value, "content") ?? ""]: true,
+      }),
+    );
+  });
+
+  const footerBind = computed(() => {
+    return mergePartBind(
+      customProps.value?.footer,
+      {},
+      cn({
+        "flex shrink-0 flex-col gap-2 px-2 py-2.5": true,
+        [get(mergedClasses.value, "footer") ?? ""]: true,
+      }),
+    );
+  });
+
+  const mobileWidth = computed(() => {
+    const widthItem = toMerged(
+      widthProps,
+      bridgeSidebar.value?.tokens?.width ?? {},
+    ) as SidebarWidth;
+
+    return widthItem.mobile;
+  });
+
+  const drawerPanelStyle = computed(() => {
+    return {
+      width: mobileWidth.value,
+      maxWidth: `min(${mobileWidth.value}, 88vw)`,
+    };
+  });
+
+  return {
+    slots,
+    merged,
+    panelId,
+    gapBind,
+    rootBind,
+    asideBind,
+    panelBind,
+    headerBind,
+    footerBind,
+    contentBind,
+    mobileWidth,
+    showAsDrawer,
+    drawerPanelStyle,
+    isMobile: computed(() => {
+      return sidebar.value.isMobile;
+    }),
+    openMobile: computed(() => {
+      return sidebar.value.openMobile;
+    }),
+    setOpenMobile: (next: boolean) => {
+      sidebar.value.setOpenMobile(next);
+    },
+  };
+}
diff --git a/packages/vue/src/Components/Sidebar/composables/useSidebarTrigger.ts b/packages/vue/src/Components/Sidebar/composables/useSidebarTrigger.ts
new file mode 100644
index 00000000..a4732a84
--- /dev/null
+++ b/packages/vue/src/Components/Sidebar/composables/useSidebarTrigger.ts
@@ -0,0 +1,64 @@
+// ** External Imports
+import { omit } from "es-toolkit/compat";
+import { computed, useAttrs, type useSlots } from "vue";
+
+// ** Local Imports
+import { useSidebar } from "@/Components/Sidebar/composables/useSidebar";
+import { hasNamedSlot } from "@/Utils";
+
+export function useSidebarTrigger(slots: ReturnType<typeof useSlots>) {
+  const sidebar = useSidebar();
+  const attrs = useAttrs();
+
+  const hasDefaultSlot = computed(() => {
+    return hasNamedSlot(slots, "default");
+  });
+
+  const expanded = computed(() => {
+    return sidebar.value.isMobile
+      ? sidebar.value.openMobile
+      : sidebar.value.open;
+  });
+
+  const iconClass = computed(() => {
+    return sidebar.value.side === "right"
+      ? "rotate-180 rtl:rotate-0"
+      : "rtl:rotate-180";
+  });
+
+  const ariaLabel = computed(() => {
+    const label = attrs["aria-label"];
+
+    return typeof label === "string" ? label : "Toggle sidebar";
+  });
+
+  const rootAttrs = computed(() => {
+    return omit(attrs, ["onClick", "aria-label"]);
+  });
+
+  const handleClick = (event: MouseEvent) => {
+    const onClick = attrs.onClick;
+
+    if (typeof onClick === "function") {
+      onClick(event);
+    }
+
+    if (event.defaultPrevented) {
+      return;
+    }
+
+    sidebar.value.toggleSidebar();
+  };
+
+  return {
+    expanded,
+    iconClass,
+    ariaLabel,
+    handleClick,
+    hasDefaultSlot,
+    attrs: rootAttrs,
+    panelId: computed(() => {
+      return sidebar.value.panelId;
+    }),
+  };
+}
diff --git a/packages/vue/src/Components/Sidebar/index.ts b/packages/vue/src/Components/Sidebar/index.ts
new file mode 100644
index 00000000..355ee899
--- /dev/null
+++ b/packages/vue/src/Components/Sidebar/index.ts
@@ -0,0 +1,47 @@
+// ** Exports
+export { useSidebar } from "@/Components/Sidebar/composables/useSidebar";
+export { useSidebarInset } from "@/Components/Sidebar/composables/useSidebarInset";
+export { useSidebarList } from "@/Components/Sidebar/composables/useSidebarList";
+export { useSidebarListItem } from "@/Components/Sidebar/composables/useSidebarListItem";
+export { useSidebarProvider } from "@/Components/Sidebar/composables/useSidebarProvider";
+export { useSidebarShell } from "@/Components/Sidebar/composables/useSidebarShell";
+export { useSidebarTrigger } from "@/Components/Sidebar/composables/useSidebarTrigger";
+export type {
+  SidebarClasses,
+  SidebarCollapsibleOverrides,
+  SidebarCustomProps,
+  SidebarInsetClasses,
+  SidebarInsetCustomProps,
+  SidebarInsetOwnProps,
+  SidebarInsetProps,
+  SidebarInsetSlots,
+  SidebarListItemOwnProps,
+  SidebarListItemProps,
+  SidebarListOwnProps,
+  SidebarListProps,
+  SidebarOwnProps,
+  SidebarProps,
+  SidebarProviderClasses,
+  SidebarProviderCustomProps,
+  SidebarProviderEmits,
+  SidebarProviderOwnProps,
+  SidebarProviderProps,
+  SidebarProviderSlots,
+  SidebarSideOverrides,
+  SidebarSlots,
+  SidebarTriggerOwnProps,
+  SidebarTriggerProps,
+  SidebarTriggerSlots,
+  SidebarVariantOverrides,
+} from "@/Components/Sidebar/sidebar.types";
+export { default as Sidebar } from "@/Components/Sidebar/Sidebar.vue";
+export {
+  SIDEBAR_INJECTION_KEY,
+  type SidebarContextValue,
+  type SidebarLayout,
+} from "@/Components/Sidebar/sidebarInjectionKey";
+export { default as SidebarInset } from "@/Components/Sidebar/SidebarInset.vue";
+export { default as SidebarList } from "@/Components/Sidebar/SidebarList.vue";
+export { default as SidebarListItem } from "@/Components/Sidebar/SidebarListItem.vue";
+export { default as SidebarProvider } from "@/Components/Sidebar/SidebarProvider.vue";
+export { default as SidebarTrigger } from "@/Components/Sidebar/SidebarTrigger.vue";
diff --git a/packages/vue/src/Components/Sidebar/sidebar.types.ts b/packages/vue/src/Components/Sidebar/sidebar.types.ts
new file mode 100644
index 00000000..ea8139c4
--- /dev/null
+++ b/packages/vue/src/Components/Sidebar/sidebar.types.ts
@@ -0,0 +1,308 @@
+// ** External Imports
+import type { ButtonHTMLAttributes, HTMLAttributes, Slot } from "vue";
+
+// ** Core Imports
+import type { PositionPlacement } from "@bridge-ui/core/Runtime";
+import type {
+  SidebarCollapsible,
+  SidebarSide,
+  SidebarVariant,
+} from "@bridge-ui/core/Tokens";
+import type { MergeHtmlProps, MergeProps } from "@bridge-ui/core/Utils";
+
+// ** Local Imports
+import type { ListProps } from "@/Components/List/list.types";
+import type { ListItemProps } from "@/Components/ListItem/listItem.types";
+
+export interface SidebarSideOverrides {}
+export interface SidebarVariantOverrides {}
+export interface SidebarCollapsibleOverrides {}
+
+export interface SidebarClasses {
+  /**
+   * The classes to apply to the scrollable content region.
+   */
+  content?: string;
+
+  /**
+   * The classes to apply to the footer.
+   */
+  footer?: string;
+
+  /**
+   * The classes to apply to the in-flow gap spacer.
+   */
+  gap?: string;
+
+  /**
+   * The classes to apply to the header.
+   */
+  header?: string;
+
+  /**
+   * The classes to apply to the inner panel surface.
+   */
+  panel?: string;
+
+  /**
+   * The classes to apply to the desktop rail chrome (gap + fixed panel).
+   */
+  root?: string;
+}
+
+export interface SidebarCustomProps {
+  /**
+   * Props forwarded to the scrollable content region.
+   */
+  content?: HTMLAttributes;
+
+  /**
+   * Props forwarded to the footer.
+   */
+  footer?: HTMLAttributes;
+
+  /**
+   * Props forwarded to the in-flow gap spacer.
+   */
+  gap?: HTMLAttributes;
+
+  /**
+   * Props forwarded to the header.
+   */
+  header?: HTMLAttributes;
+
+  /**
+   * Props forwarded to the inner panel surface.
+   */
+  panel?: HTMLAttributes;
+
+  /**
+   * Props forwarded to the desktop rail chrome.
+   */
+  root?: HTMLAttributes;
+}
+
+export interface SidebarInsetClasses {
+  /**
+   * The classes to apply to the inset root.
+   */
+  root?: string;
+}
+
+export interface SidebarInsetCustomProps {
+  /**
+   * Props forwarded to the inset root.
+   */
+  root?: HTMLAttributes;
+}
+
+export interface SidebarInsetOwnProps {
+  /**
+   * The classes to apply to the inset.
+   *
+   * @default undefined
+   */
+  classes?: SidebarInsetClasses;
+
+  /**
+   * Extra props for internal parts.
+   *
+   * @default undefined
+   */
+  customProps?: SidebarInsetCustomProps;
+}
+
+export interface SidebarInsetSlots {
+  /**
+   * Main content.
+   */
+  default?: Slot;
+}
+
+export interface SidebarListItemOwnProps {
+  /**
+   * Tooltip label while the icon rail is collapsed. When omitted, string
+   * `primary` is used. Has no effect on the mobile drawer or an expanded rail.
+   *
+   * @default undefined
+   */
+  tooltip?: string;
+
+  /**
+   * Placement of {@link SidebarListItemOwnProps.tooltip}. Defaults to the
+   * side opposite the rail.
+   *
+   * @default undefined
+   */
+  tooltipPlacement?: PositionPlacement;
+}
+
+export interface SidebarListOwnProps {
+  /**
+   * Collapse items to leading icons. Defaults to the collapsed icon rail.
+   * Nested `SidebarList` is hidden. `ListSection` labels are hidden.
+   *
+   * @default undefined
+   */
+  iconOnly?: boolean;
+}
+
+/**
+ * Persistent app-shell sidebar panel. Mount under `SidebarProvider` with
+ * `SidebarInset`. Put `SidebarList` / `Accordion` in the default slot.
+ */
+export interface SidebarOwnProps {
+  /**
+   * Accessible name for the desktop `aside` and the mobile drawer.
+   *
+   * @default "Sidebar"
+   */
+  ariaLabel?: string;
+
+  /**
+   * The classes to apply to the sidebar.
+   *
+   * @default undefined
+   */
+  classes?: SidebarClasses;
+
+  /**
+   * How the desktop rail hides.
+   *
+   * @default "offcanvas"
+   */
+  collapsible?: MergeProps<SidebarCollapsible, SidebarCollapsibleOverrides>;
+
+  /**
+   * Extra props for internal parts (`header`, `content`, `footer`, etc.).
+   * Root HTML attributes stay on the component top level.
+   *
+   * @default undefined
+   */
+  customProps?: SidebarCustomProps;
+
+  /**
+   * Which edge the rail docks to.
+   *
+   * @default "left"
+   */
+  side?: MergeProps<SidebarSide, SidebarSideOverrides>;
+
+  /**
+   * Visual layout of the rail and inset.
+   *
+   * @default "sidebar"
+   */
+  variant?: MergeProps<SidebarVariant, SidebarVariantOverrides>;
+}
+
+export interface SidebarProviderClasses {
+  /**
+   * The classes to apply to the layout wrapper.
+   */
+  root?: string;
+}
+
+export interface SidebarProviderCustomProps {
+  /**
+   * Props forwarded to the layout wrapper.
+   */
+  root?: HTMLAttributes;
+}
+
+export interface SidebarProviderEmits {
+  /**
+   * Emitted when the desktop `open` state should change.
+   */
+  openChange: [open: boolean];
+
+  /**
+   * Emitted when `v-model` should update.
+   */
+  "update:modelValue": [open: boolean];
+}
+
+export interface SidebarProviderOwnProps {
+  /**
+   * The classes to apply to the provider wrapper.
+   *
+   * @default undefined
+   */
+  classes?: SidebarProviderClasses;
+
+  /**
+   * Extra props for the layout wrapper.
+   *
+   * @default undefined
+   */
+  customProps?: SidebarProviderCustomProps;
+
+  /**
+   * Initial desktop expanded state when `v-model` is omitted.
+   *
+   * @default true
+   */
+  defaultOpen?: boolean;
+}
+
+export interface SidebarProviderSlots {
+  /**
+   * App shell (`Sidebar`, `SidebarInset`, …).
+   */
+  default?: Slot;
+}
+
+export interface SidebarSlots {
+  /**
+   * Scrollable rail (`List`, `Accordion`, …).
+   */
+  default?: Slot;
+
+  /**
+   * Sticky footer (user menu, settings).
+   */
+  footer?: Slot;
+
+  /**
+   * Sticky header (branding, workspace switcher).
+   */
+  header?: Slot;
+}
+
+export interface SidebarTriggerOwnProps {}
+
+export interface SidebarTriggerSlots {
+  /**
+   * Replaces the default toggle icon.
+   */
+  default?: Slot;
+}
+
+export type SidebarInsetProps = MergeHtmlProps<
+  SidebarInsetOwnProps,
+  HTMLAttributes
+>;
+
+export type SidebarProps = MergeHtmlProps<SidebarOwnProps, HTMLAttributes>;
+
+export type SidebarProviderProps = MergeHtmlProps<
+  SidebarProviderOwnProps,
+  HTMLAttributes
+>;
+
+export type SidebarTriggerProps = MergeHtmlProps<
+  SidebarTriggerOwnProps,
+  ButtonHTMLAttributes
+>;
+
+/**
+ * `List` bound to the nearest `Sidebar`. Sets `iconOnly` when the icon rail
+ * is collapsed on desktop.
+ */
+export type SidebarListProps = ListProps & SidebarListOwnProps;
+
+/**
+ * `ListItem` bound to the nearest `Sidebar`. Shows `primary` in a tooltip
+ * when the icon rail is collapsed.
+ */
+export type SidebarListItemProps = ListItemProps & SidebarListItemOwnProps;
diff --git a/packages/vue/src/Components/Sidebar/sidebarInjectionKey.ts b/packages/vue/src/Components/Sidebar/sidebarInjectionKey.ts
new file mode 100644
index 00000000..9e1d3fc2
--- /dev/null
+++ b/packages/vue/src/Components/Sidebar/sidebarInjectionKey.ts
@@ -0,0 +1,106 @@
+// ** External Imports
+import type { ComputedRef, InjectionKey } from "vue";
+
+// ** Core Imports
+import type { SidebarState } from "@bridge-ui/core/Domain";
+import type {
+  SidebarCollapsible,
+  SidebarSide,
+  SidebarVariant,
+} from "@bridge-ui/core/Tokens";
+
+/**
+ * Layout fields registered by `Sidebar` for inset / trigger consumers.
+ */
+export type SidebarLayout = {
+  /**
+   * Desktop collapse mode.
+   */
+  collapsible: keyof SidebarCollapsible;
+
+  /**
+   * Id of the visible panel (`aria-controls`).
+   */
+  panelId: string;
+
+  /**
+   * Dock edge.
+   */
+  side: keyof SidebarSide;
+
+  /**
+   * Visual variant.
+   */
+  variant: keyof SidebarVariant;
+};
+
+/**
+ * Shared sidebar state for `Sidebar`, `SidebarInset`, and `SidebarTrigger`.
+ */
+export type SidebarContextValue = {
+  /**
+   * Desktop collapse mode from the nearest `Sidebar`.
+   */
+  collapsible: keyof SidebarCollapsible;
+
+  /**
+   * Whether the viewport is below the mobile breakpoint.
+   */
+  isMobile: boolean;
+
+  /**
+   * Desktop expanded state.
+   */
+  open: boolean;
+
+  /**
+   * Mobile drawer visibility.
+   */
+  openMobile: boolean;
+
+  /**
+   * Id of the visible panel for `aria-controls`.
+   */
+  panelId: string;
+
+  /**
+   * Sets layout fields from the `Sidebar` panel.
+   *
+   * @internal
+   */
+  setLayout: (layout: Partial<SidebarLayout>) => void;
+
+  /**
+   * Sets the desktop expanded state.
+   */
+  setOpen: (open: boolean) => void;
+
+  /**
+   * Sets the mobile drawer visibility.
+   */
+  setOpenMobile: (open: boolean) => void;
+
+  /**
+   * Dock edge from the nearest `Sidebar`.
+   */
+  side: keyof SidebarSide;
+
+  /**
+   * Desktop visual state (`expanded` / `collapsed`).
+   */
+  state: SidebarState;
+
+  /**
+   * Toggles desktop `open` or mobile `openMobile` based on viewport.
+   */
+  toggleSidebar: () => void;
+
+  /**
+   * Visual variant from the nearest `Sidebar`.
+   */
+  variant: keyof SidebarVariant;
+};
+
+export const SIDEBAR_INJECTION_KEY = Symbol("bridge-sidebar") as InjectionKey<
+  ComputedRef<SidebarContextValue>
+>;
diff --git a/packages/vue/src/Components/Sidebar/sidebarListInjectionKey.ts b/packages/vue/src/Components/Sidebar/sidebarListInjectionKey.ts
new file mode 100644
index 00000000..a7ca8a74
--- /dev/null
+++ b/packages/vue/src/Components/Sidebar/sidebarListInjectionKey.ts
@@ -0,0 +1,10 @@
+// ** External Imports
+import type { ComputedRef, InjectionKey } from "vue";
+
+export type SidebarListContextValue = {
+  iconOnly: boolean;
+};
+
+export const SIDEBAR_LIST_INJECTION_KEY = Symbol(
+  "bridge-sidebar-list",
+) as InjectionKey<ComputedRef<SidebarListContextValue>>;
diff --git a/packages/vue/src/augments.ts b/packages/vue/src/augments.ts
index d6a743c5..f03743c9 100644
--- a/packages/vue/src/augments.ts
+++ b/packages/vue/src/augments.ts
@@ -35,6 +35,13 @@ import type {
 import type { ProgressClasses, ProgressProps } from "@/Components/Progress";
 import type { RadioClasses, RadioProps } from "@/Components/Radio";
 import type { SelectClasses, SelectProps } from "@/Components/Select";
+import type {
+  SidebarClasses,
+  SidebarInsetClasses,
+  SidebarProps,
+  SidebarProviderClasses,
+  SidebarProviderProps,
+} from "@/Components/Sidebar";
 import type { SkeletonClasses, SkeletonProps } from "@/Components/Skeleton";
 import type { SliderClasses, SliderProps } from "@/Components/Slider";
 import type { SnackbarClasses, SnackbarProps } from "@/Components/Snackbar";
@@ -251,6 +258,14 @@ declare module "@bridge-ui/core/Config" {
     >;
   }
 
+  interface SidebarConfigOverrides {
+    classes: SidebarClasses & SidebarInsetClasses & SidebarProviderClasses;
+    defaultProps: Partial<
+      Pick<SidebarProps, "side" | "variant" | "ariaLabel" | "collapsible"> &
+        Pick<SidebarProviderProps, "defaultOpen">
+    >;
+  }
+
   interface SkeletonConfigOverrides {
     classes: SkeletonClasses;
     defaultProps: Partial<Pick<SkeletonProps, "rounded">>;
diff --git a/packages/vue/src/index.ts b/packages/vue/src/index.ts
index 45ef2797..48c28588 100644
--- a/packages/vue/src/index.ts
+++ b/packages/vue/src/index.ts
@@ -552,6 +552,50 @@ export type {
   SelectSlots,
   SelectValue,
 } from "@/Components/Select";
+export {
+  Sidebar,
+  SidebarInset,
+  SidebarList,
+  SidebarListItem,
+  SidebarProvider,
+  SidebarTrigger,
+  useSidebar,
+  useSidebarInset,
+  useSidebarList,
+  useSidebarListItem,
+  useSidebarProvider,
+  useSidebarShell,
+  useSidebarTrigger,
+} from "@/Components/Sidebar";
+export type {
+  SidebarClasses,
+  SidebarCollapsibleOverrides,
+  SidebarContextValue,
+  SidebarCustomProps,
+  SidebarInsetClasses,
+  SidebarInsetCustomProps,
+  SidebarInsetOwnProps,
+  SidebarInsetProps,
+  SidebarInsetSlots,
+  SidebarListItemOwnProps,
+  SidebarListItemProps,
+  SidebarListOwnProps,
+  SidebarListProps,
+  SidebarOwnProps,
+  SidebarProps,
+  SidebarProviderClasses,
+  SidebarProviderCustomProps,
+  SidebarProviderEmits,
+  SidebarProviderOwnProps,
+  SidebarProviderProps,
+  SidebarProviderSlots,
+  SidebarSideOverrides,
+  SidebarSlots,
+  SidebarTriggerOwnProps,
+  SidebarTriggerProps,
+  SidebarTriggerSlots,
+  SidebarVariantOverrides,
+} from "@/Components/Sidebar";
 export { Skeleton, useSkeleton } from "@/Components/Skeleton";
 export type {
   SkeletonClasses,