diff --git a/app/client/packages/design-system/widgets/package.json b/app/client/packages/design-system/widgets/package.json
index 799d1e31679e..126c104ff3d7 100644
--- a/app/client/packages/design-system/widgets/package.json
+++ b/app/client/packages/design-system/widgets/package.json
@@ -29,11 +29,13 @@
     "react-aria-components": "^1.2.1",
     "react-markdown": "^9.0.1",
     "react-syntax-highlighter": "^15.5.0",
+    "react-transition-group": "^4.4.5",
     "remark-gfm": "^4.0.0"
   },
   "devDependencies": {
     "@types/fs-extra": "^11.0.4",
     "@types/react-syntax-highlighter": "^15.5.13",
+    "@types/react-transition-group": "^4.4.11",
     "eslint-plugin-storybook": "^0.6.10"
   },
   "peerDependencies": {
diff --git a/app/client/packages/design-system/widgets/src/components/Sheet/index.ts b/app/client/packages/design-system/widgets/src/components/Sheet/index.ts
new file mode 100644
index 000000000000..3bd16e178a03
--- /dev/null
+++ b/app/client/packages/design-system/widgets/src/components/Sheet/index.ts
@@ -0,0 +1 @@
+export * from "./src";
diff --git a/app/client/packages/design-system/widgets/src/components/Sheet/src/Sheet.tsx b/app/client/packages/design-system/widgets/src/components/Sheet/src/Sheet.tsx
new file mode 100644
index 000000000000..3b5261f223a8
--- /dev/null
+++ b/app/client/packages/design-system/widgets/src/components/Sheet/src/Sheet.tsx
@@ -0,0 +1,62 @@
+import clsx from "clsx";
+import React, { forwardRef, type Ref, useRef } from "react";
+import {
+  Modal as HeadlessModal,
+  Dialog as HeadlessDialog,
+  ModalOverlay as HeadlessModalOverlay,
+} from "react-aria-components";
+import { CSSTransition } from "react-transition-group";
+
+import styles from "./styles.module.css";
+import type { SheetProps } from "./types";
+
+export function _Sheet(props: SheetProps, ref: Ref<HTMLDivElement>) {
+  const {
+    children,
+    className,
+    isOpen,
+    onEntered,
+    onExited,
+    onOpenChange,
+    position = "start",
+    ...rest
+  } = props;
+  const root = document.body.querySelector(
+    "[data-theme-provider]",
+  ) as HTMLButtonElement;
+
+  const overlayRef = useRef<HTMLDivElement>();
+
+  return (
+    <CSSTransition
+      in={isOpen}
+      nodeRef={overlayRef}
+      onEntered={onEntered}
+      onExited={onExited}
+      timeout={300}
+      unmountOnExit
+    >
+      <HeadlessModalOverlay
+        UNSTABLE_portalContainer={root}
+        className={clsx(styles.overlay, className)}
+        isDismissable
+        isOpen={isOpen}
+        onOpenChange={onOpenChange}
+        // @ts-expect-error TS is unable to infer the correct type for the render prop
+        ref={overlayRef}
+      >
+        <HeadlessModal
+          className={clsx(styles.sheet, styles[position])}
+          ref={ref}
+          {...rest}
+        >
+          <HeadlessDialog aria-label="Sheet" className={styles.dialog}>
+            {children}
+          </HeadlessDialog>
+        </HeadlessModal>
+      </HeadlessModalOverlay>
+    </CSSTransition>
+  );
+}
+
+export const Sheet = forwardRef(_Sheet);
diff --git a/app/client/packages/design-system/widgets/src/components/Sheet/src/index.ts b/app/client/packages/design-system/widgets/src/components/Sheet/src/index.ts
new file mode 100644
index 000000000000..c415d8b0d501
--- /dev/null
+++ b/app/client/packages/design-system/widgets/src/components/Sheet/src/index.ts
@@ -0,0 +1,2 @@
+export { Sheet } from "./Sheet";
+export { DialogTrigger as SheetTrigger } from "react-aria-components";
diff --git a/app/client/packages/design-system/widgets/src/components/Sheet/src/styles.module.css b/app/client/packages/design-system/widgets/src/components/Sheet/src/styles.module.css
new file mode 100644
index 000000000000..27dfe571139d
--- /dev/null
+++ b/app/client/packages/design-system/widgets/src/components/Sheet/src/styles.module.css
@@ -0,0 +1,117 @@
+.sheet {
+  position: fixed;
+  background: var(--color-bg-elevation-3);
+  width: 80%;
+}
+
+.overlay {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--color-bg-neutral-opacity);
+  z-index: var(--z-index-99);
+  contain: strict;
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+}
+
+.dialog {
+  height: 100%;
+}
+
+.overlay[data-entering] {
+  animation: fade-in 0.3s ease-in-out;
+}
+
+.overlay[data-exiting] {
+  animation: fade-out 0.3s ease-in-out;
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+.start {
+  top: 0;
+  left: 0;
+  bottom: 0;
+  max-width: 90%;
+  height: 100%;
+}
+
+.start[data-entering] {
+  animation: slide-in-start 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.start[data-exiting] {
+  animation: slide-out-start 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.end {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  max-width: 90%;
+  height: 100%;
+}
+
+.end[data-entering] {
+  animation: slide-in-end 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.end[data-exiting] {
+  animation: slide-out-end 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+@keyframes slide-in-start {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes slide-out-start {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-100%);
+  }
+}
+
+@keyframes slide-in-end {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes slide-out-end {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
diff --git a/app/client/packages/design-system/widgets/src/components/Sheet/src/types.ts b/app/client/packages/design-system/widgets/src/components/Sheet/src/types.ts
new file mode 100644
index 000000000000..d66e9d5a8906
--- /dev/null
+++ b/app/client/packages/design-system/widgets/src/components/Sheet/src/types.ts
@@ -0,0 +1,12 @@
+import type { ModalOverlayProps as HeadlessModalOverlayProps } from "react-aria-components";
+
+export interface SheetProps
+  extends Omit<HeadlessModalOverlayProps, "position"> {
+  /**
+   * The position from which the sheet slides in
+   * @default 'start'
+   */
+  position?: "start" | "end";
+  onEntered?: () => void;
+  onExited?: () => void;
+}
diff --git a/app/client/packages/design-system/widgets/src/components/Sheet/stories/Sheet.stories.tsx b/app/client/packages/design-system/widgets/src/components/Sheet/stories/Sheet.stories.tsx
new file mode 100644
index 000000000000..ab336257e155
--- /dev/null
+++ b/app/client/packages/design-system/widgets/src/components/Sheet/stories/Sheet.stories.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Sheet } from "../index";
+import { SimpleSheet } from "./SimpleSheet";
+
+const meta: Meta<typeof Sheet> = {
+  title: "WDS/Widgets/Sheet",
+  component: Sheet,
+  render: (args) => <SimpleSheet {...args} />,
+};
+
+export default meta;
+type Story = StoryObj<typeof Sheet>;
+
+// Default story with left position (start)
+export const Default: Story = {
+  args: {
+    position: "start",
+  },
+};
+
+// Right position (end)
+export const RightPositioned: Story = {
+  args: {
+    position: "end",
+  },
+};
diff --git a/app/client/packages/design-system/widgets/src/components/Sheet/stories/SimpleSheet.tsx b/app/client/packages/design-system/widgets/src/components/Sheet/stories/SimpleSheet.tsx
new file mode 100644
index 000000000000..200e37d00841
--- /dev/null
+++ b/app/client/packages/design-system/widgets/src/components/Sheet/stories/SimpleSheet.tsx
@@ -0,0 +1,20 @@
+import React, { useState } from "react";
+import { Button } from "../../Button";
+import { Sheet } from "../index";
+import type { SheetProps } from "../src/types";
+
+export const SimpleSheet = (props: Omit<SheetProps, "children">) => {
+  const [isOpen, setIsOpen] = useState(props.isOpen);
+
+  return (
+    <>
+      <Button onPress={() => setIsOpen(!Boolean(isOpen))}>Sheet trigger</Button>
+      <Sheet {...props} isOpen={isOpen} onOpenChange={setIsOpen}>
+        <div style={{ padding: "1rem" } as React.CSSProperties}>
+          <h3>Sheet Content</h3>
+          <p>This is an example of sheet content.</p>
+        </div>
+      </Sheet>
+    </>
+  );
+};
diff --git a/app/client/packages/design-system/widgets/src/components/Sidebar/index.ts b/app/client/packages/design-system/widgets/src/components/Sidebar/index.ts
new file mode 100644
index 000000000000..3bd16e178a03
--- /dev/null
+++ b/app/client/packages/design-system/widgets/src/components/Sidebar/index.ts
@@ -0,0 +1 @@
+export * from "./src";
diff --git a/app/client/packages/design-system/widgets/src/components/Sidebar/src/Sidebar.tsx b/app/client/packages/design-system/widgets/src/components/Sidebar/src/Sidebar.tsx
new file mode 100644
index 000000000000..c8b231cef3cb
--- /dev/null
+++ b/app/client/packages/design-system/widgets/src/components/Sidebar/src/Sidebar.tsx
@@ -0,0 +1,72 @@
+import clsx from "clsx";
+import * as React from "react";
+import { type Ref, useRef } from "react";
+import { Sheet } from "../../Sheet";
+import { useSidebar } from "./use-sidebar";
+import styles from "./styles.module.css";
+import type { SidebarProps } from "./types";
+import { CSSTransition } from "react-transition-group";
+
+const _Sidebar = (props: SidebarProps, ref: Ref<HTMLDivElement>) => {
+  const {
+    children,
+    className,
+    collapsible = "offcanvas",
+    onEntered,
+    onExited,
+    side = "start",
+    variant = "sidebar",
+    ...rest
+  } = props;
+  const { isMobile, setOpen, state } = useSidebar();
+  const sidebarRef = useRef<HTMLDivElement>();
+
+  if (collapsible === "none") {
+    return (
+      <div className={clsx(className)} ref={ref} {...props}>
+        {children}
+      </div>
+    );
+  }
+
+  if (Boolean(isMobile)) {
+    return (
+      <Sheet
+        isOpen={state === "expanded"}
+        onEntered={onEntered}
+        onExited={onExited}
+        onOpenChange={setOpen}
+        position={side}
+      >
+        {children}
+      </Sheet>
+    );
+  }
+
+  return (
+    <CSSTransition
+      in={state === "expanded"}
+      nodeRef={sidebarRef}
+      onEntered={onEntered}
+      onExited={onExited}
+      timeout={300}
+    >
+      <div
+        className={clsx(styles.mainSidebar)}
+        data-collapsible={state === "collapsed" ? collapsible : ""}
+        data-side={side}
+        data-state={state}
+        data-variant={variant}
+        // @ts-expect-error TS is unable to infer the correct type for the render prop
+        ref={sidebarRef}
+      >
+        <div className={styles.fakeSidebar} />
+        <div className={clsx(styles.sidebar, className)} ref={ref} {...rest}>
+          <div className={styles.sidebarContainer}>{children}</div>
+        </div>
+      </div>
+    </CSSTransition>
+  );
+};
+
+export const Sidebar = React.forwardRef(_Sidebar);
diff --git a/app/client/packages/design-system/widgets/src/components/Sidebar/src/SidebarContent.tsx b/app/client/packages/design-system/widgets/src/components/Sidebar/src/SidebarContent.tsx
new file mode 100644
index 000000000000..bb90417a91b1
--- /dev/null
+++ b/app/client/packages/design-system/widgets/src/components/Sidebar/src/SidebarContent.tsx
@@ -0,0 +1,22 @@
+import clsx from "clsx";
+import React, { type ComponentProps, type Ref } from "react";
+
+import styles from "./styles.module.css";
+
+const _SidebarContent = (
+  props: ComponentProps<"div">,
+  ref: Ref<HTMLDivElement>,
+) => {
+  const { className, ...rest } = props;
+
+  return (
+    <div
+      className={clsx(styles.sidebarContent, className)}
+      data-sidebar="content"
+      ref={ref}
+      {...rest}
+    />
+  );
+};
+
+export const SidebarContent = React.forwardRef(_SidebarContent);
diff --git a/app/client/packages/design-system/widgets/src/components/Sidebar/src/SidebarInset.tsx b/app/client/packages/design-system/widgets/src/components/Sidebar/src/SidebarInset.tsx
new file mode 100644
index 000000000000..f6c3a1d0bc57
--- /dev/null
+++ b/app/client/packages/design-system/widgets/src/components/Sidebar/src/SidebarInset.tsx
@@ -0,0 +1,22 @@
+import clsx from "clsx";
+import * as React from "react";
+import type { ComponentProps, Ref } from "react";
+
+import styles from "./styles.module.css";
+
+export const _SidebarInset = (
+  props: ComponentProps<"main">,
+  ref: Ref<HTMLDivElement>,
+) => {
+  const { className, ...rest } = props;
+
+  return (
+    <main
+      className={clsx(styles.sidebarInset, className)}
+      ref={ref}
+      {...rest}
+    />
+  );
+};
+
+export const SidebarInset = React.forwardRef(_SidebarInset);
diff --git a/app/client/packages/design-system/widgets/src/components/Sidebar/src/SidebarProvider.tsx b/app/client/packages/design-system/widgets/src/components/Sidebar/src/SidebarProvider.tsx
new file mode 100644
index 000000000000..35d688f23837
--- /dev/null
+++ b/app/client/packages/design-system/widgets/src/components/Sidebar/src/SidebarProvider.tsx
@@ -0,0 +1,96 @@
+import clsx from "clsx";
+import React, { type Ref, useCallback, useState } from "react";
+
+import styles from "./styles.module.css";
+import { SidebarContext } from "./context";
+import { useIsMobile } from "./use-mobile";
+import { SIDEBAR_CONSTANTS } from "./constants";
+import type { SidebarContextType, SidebarProviderProps } from "./types";
+
+export const _SidebarProvider = (
+  props: SidebarProviderProps,
+  ref: Ref<HTMLDivElement>,
+) => {
+  const {
+    children,
+    className,
+    defaultOpen = true,
+    isOpen: openProp,
+    onOpen: setOpenProp,
+    style,
+    ...rest
+  } = props;
+  const isMobile = useIsMobile();
+
+  const [_open, _setOpen] = useState(defaultOpen);
+  const open = openProp ?? _open;
+  const setOpen = useCallback(
+    (value: boolean | ((value: boolean) => boolean)) => {
+      const openState = typeof value === "function" ? value(open) : value;
+
+      if (setOpenProp) {
+        setOpenProp(openState);
+      } else {
+        _setOpen(openState);
+      }
+    },
+    [setOpenProp, open],
+  );
+
+  const toggleSidebar = React.useCallback(() => {
+    return isMobile ? setOpen((open) => !open) : setOpen((open) => !open);
+  }, [isMobile, setOpen]);
+
+  React.useEffect(
+    function handleKeyboardShortcuts() {
+      const handleKeyDown = (event: KeyboardEvent) => {
+        if (
+          event.key === SIDEBAR_CONSTANTS.KEYBOARD_SHORTCUT &&
+          (event.metaKey || event.ctrlKey)
+        ) {
+          event.preventDefault();
+          toggleSidebar();
+        }
+      };
+
+      window.addEventListener("keydown", handleKeyDown);
+
+      return () => window.removeEventListener("keydown", handleKeyDown);
+    },
+    [toggleSidebar, isMobile],
+  );
+
+  const state = open ? "expanded" : "collapsed";
+
+  const contextValue = React.useMemo<SidebarContextType>(
+    () => ({
+      state,
+      open,
+      setOpen,
+      isMobile,
+      toggleSidebar,
+    }),
+    [state, open, setOpen, isMobile, toggleSidebar],
+  );
+
+  return (
+    <SidebarContext.Provider value={contextValue}>
+      <div
+        className={clsx(styles.sidebarWrapper, className)}
+        ref={ref}
+        style={
+          {
+            "--sidebar-width": SIDEBAR_CONSTANTS.WIDTH.DESKTOP,
+            "--sidebar-width-icon": SIDEBAR_CONSTANTS.WIDTH.ICON,
+            ...style,
+          } as React.CSSProperties
+        }
+        {...rest}
+      >
+        {children}
+      </div>
+    </SidebarContext.Provider>
+  );
+};
+
+export const SidebarProvider = React.forwardRef(_SidebarProvider);
diff --git a/app/client/packages/design-system/widgets/src/components/Sidebar/src/SidebarTrigger.tsx b/app/client/packages/design-system/widgets/src/components/Sidebar/src/SidebarTrigger.tsx
new file mode 100644
index 000000000000..4649d3ae877c
--- /dev/null
+++ b/app/client/packages/design-system/widgets/src/components/Sidebar/src/SidebarTrigger.tsx
@@ -0,0 +1,29 @@
+import * as React from "react";
+import { Button } from "@appsmith/wds";
+
+import { useSidebar } from "./use-sidebar";
+
+interface SidebarTriggerProps {
+  onPress?: () => void;
+}
+
+export const SidebarTrigger = (props: SidebarTriggerProps) => {
+  const { onPress } = props;
+  const { state, toggleSidebar } = useSidebar();
+
+  return (
+    <Button
+      color="neutral"
+      icon={
+        state === "expanded"
+          ? "layout-sidebar-right-collapse"
+          : "layout-sidebar-left-collapse"
+      }
+      onPress={() => {
+        onPress?.();
+        toggleSidebar();
+      }}
+      variant="ghost"
+    />
+  );
+};
diff --git a/app/client/packages/design-system/widgets/src/components/Sidebar/src/constants.ts b/app/client/packages/design-system/widgets/src/components/Sidebar/src/constants.ts
new file mode 100644
index 000000000000..9633b7ebf41a
--- /dev/null
+++ b/app/client/packages/design-system/widgets/src/components/Sidebar/src/constants.ts
@@ -0,0 +1,8 @@
+export const SIDEBAR_CONSTANTS = {
+  WIDTH: {
+    DESKTOP: "16rem",
+    ICON: "var(--sizing-14)",
+  },
+  KEYBOARD_SHORTCUT: "b",
+  MOBILE_BREAKPOINT: 768,
+} as const;
diff --git a/app/client/packages/design-system/widgets/src/components/Sidebar/src/context.tsx b/app/client/packages/design-system/widgets/src/components/Sidebar/src/context.tsx
new file mode 100644
index 000000000000..aba1700f141e
--- /dev/null
+++ b/app/client/packages/design-system/widgets/src/components/Sidebar/src/context.tsx
@@ -0,0 +1,6 @@
+import * as React from "react";
+import type { SidebarContextType } from "./types";
+
+export const SidebarContext = React.createContext<SidebarContextType | null>(
+  null,
+);
diff --git a/app/client/packages/design-system/widgets/src/components/Sidebar/src/index.ts b/app/client/packages/design-system/widgets/src/components/Sidebar/src/index.ts
new file mode 100644
index 000000000000..7a7b66a4ebe1
--- /dev/null
+++ b/app/client/packages/design-system/widgets/src/components/Sidebar/src/index.ts
@@ -0,0 +1,9 @@
+export { Sidebar } from "./Sidebar";
+export { SidebarProvider } from "./SidebarProvider";
+export { SidebarInset } from "./SidebarInset";
+export { SidebarTrigger } from "./SidebarTrigger";
+export { SidebarContent } from "./SidebarContent";
+export { useSidebar } from "./use-sidebar";
+export { useIsMobile } from "./use-mobile";
+
+export type * from "./types";
diff --git a/app/client/packages/design-system/widgets/src/components/Sidebar/src/styles.module.css b/app/client/packages/design-system/widgets/src/components/Sidebar/src/styles.module.css
new file mode 100644
index 000000000000..e3fe71fce134
--- /dev/null
+++ b/app/client/packages/design-system/widgets/src/components/Sidebar/src/styles.module.css
@@ -0,0 +1,203 @@
+.sidebarWrapper {
+  display: flex;
+  min-height: 100%;
+  width: 100%;
+  position: relative;
+  contain: strict;
+  container-type: inline-size;
+}
+
+/**
+ *-----------------------------------------------------
+ * MAIN SIDEBAR
+ *-----------------------------------------------------
+ */
+.mainSidebar {
+  display: none;
+  color: var(--color-fg);
+}
+
+@container (min-width: 768px) {
+  .mainSidebar {
+    display: block;
+  }
+}
+
+.mainSidebar[data-collapsible="icon"] {
+  overflow: hidden;
+}
+
+/**
+ *-----------------------------------------------------
+ * FAKE SIDEBAR
+ *-----------------------------------------------------
+ */
+.fakeSidebar {
+  position: relative;
+  height: 100%;
+  width: var(--sidebar-width);
+  background-color: transparent;
+  transition: width 300ms linear;
+}
+
+.mainSidebar[data-side="right"] .fakeSidebar {
+  transform: rotate(180deg);
+}
+
+/* Handle collapsible states for fakeSidebar */
+[data-collapsible="offcanvas"] .fakeSidebar {
+  width: 0;
+}
+
+[data-side="right"] .fakeSidebar {
+  transform: rotate(180deg);
+}
+
+[data-collapsible="icon"] .fakeSidebar {
+  width: var(--sidebar-width-icon);
+}
+
+.mainSidebar[data-variant="floating"][data-collapsible="icon"] .fakeSidebar,
+.mainSidebar[data-variant="inset"][data-collapsible="icon"] .fakeSidebar {
+  width: calc(var(--sidebar-width-icon) + var(--inner-spacing-2));
+}
+
+/**
+ *-----------------------------------------------------
+ * SIDEBAR
+ *-----------------------------------------------------
+ */
+.sidebar {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  z-index: 10;
+  display: none;
+  height: 100%;
+  width: var(--sidebar-width);
+  transition:
+    left 300ms linear,
+    right 300ms linear,
+    width 300ms linear;
+}
+
+@container (min-width: 768px) {
+  .sidebar {
+    display: flex;
+  }
+}
+
+.mainSidebar[data-side="start"] .sidebar {
+  left: 0;
+}
+
+.mainSidebar[data-side="end"] .sidebar {
+  right: 0;
+}
+
+.mainSidebar[data-collapsible="offcanvas"][data-side="start"] .sidebar {
+  left: calc(var(--sidebar-width) * -1);
+}
+
+.mainSidebar[data-collapsible="offcanvas"][data-side="end"] .sidebar {
+  right: calc(var(--sidebar-width) * -1);
+}
+
+.mainSidebar[data-variant="floating"] .sidebar,
+.mainSidebar[data-variant="inset"] .sidebar {
+  padding: var(--inner-spacing-2);
+}
+
+.mainSidebar[data-collapsible="icon"] .sidebar {
+  width: calc(var(--sidebar-width-icon));
+}
+
+.mainSidebar[data-variant="floating"][data-collapsible="icon"] .sidebar,
+.mainSidebar[data-variant="inset"][data-collapsible="icon"] .sidebar {
+  width: calc(var(--sidebar-width-icon) + var(--inner-spacing-2) + 2px);
+}
+
+.mainSidebar[data-side="start"]:not([data-variant="floating"]):not(
+    [data-variant="inset"]
+  )
+  .sidebar {
+  border-inline-end: var(--border-width-1) solid var(--color-bd-elevation-1);
+}
+
+.mainSidebar[data-side="end"]:not([data-variant="floating"]):not(
+    [data-variant="inset"]
+  )
+  .sidebar {
+  border-inline-start: var(--border-width-1) solid var(--color-bd-elevation-1);
+}
+
+/**
+ *-----------------------------------------------------
+ * SIDEBAR CONTAINER
+ *-----------------------------------------------------
+ */
+.sidebarContainer {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  flex-direction: column;
+}
+
+[data-side="end"] .sidebarContainer {
+  border-inline-start: var(--border-width-1) solid var(--color-bd-subtle);
+}
+
+[data-side="start"] .sidebarContainer {
+  border-inline-end: var(--border-width-1) solid var(--color-bd-subtle);
+}
+
+.mainSidebar[data-variant="floating"] .sidebarContainer {
+  border-radius: var(--border-radius-elevation-3);
+  border: var(--border-width-1) solid var(--color-bd);
+  box-shadow: var(--box-shadow-1);
+}
+
+/**
+ *-----------------------------------------------------
+ * SIDEBAR CONTENT
+ *-----------------------------------------------------
+ */
+.sidebarContent {
+  height: 100%;
+}
+
+/**
+ *-----------------------------------------------------
+ * SIDEBAR INSET
+ *-----------------------------------------------------
+ */
+.sidebarInset {
+  position: relative;
+  display: flex;
+  min-height: 100%;
+  flex: 1;
+  flex-direction: column;
+  background-color: var(--background);
+}
+
+[data-variant="inset"] ~ .sidebarInset {
+  min-height: calc(100% - var(--inner-spacing-2) * 2);
+}
+
+@container (min-width: 768px) {
+  [data-variant="inset"] ~ .sidebarInset {
+    margin: var(--inner-spacing-2);
+    border-radius: var(--border-radius-elevation-3);
+    box-shadow: var(--box-shadow-1);
+    border: var(--border-width-1) solid var(--color-bd);
+  }
+
+  /* Handle margin when sidebar is collapsed */
+  [data-state="collapsed"][data-variant="inset"] ~ .sidebarInset {
+    margin-left: var(--inner-spacing-2);
+  }
+
+  [data-variant="inset"] ~ .sidebarInset {
+    margin-left: 0;
+  }
+}
diff --git a/app/client/packages/design-system/widgets/src/components/Sidebar/src/types.ts b/app/client/packages/design-system/widgets/src/components/Sidebar/src/types.ts
new file mode 100644
index 000000000000..1d4e130126e5
--- /dev/null
+++ b/app/client/packages/design-system/widgets/src/components/Sidebar/src/types.ts
@@ -0,0 +1,28 @@
+import type { ReactNode } from "react";
+
+export interface SidebarContextType {
+  state: "expanded" | "collapsed";
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  isMobile: boolean;
+  toggleSidebar: () => void;
+}
+
+export interface SidebarProviderProps {
+  defaultOpen?: boolean;
+  isOpen?: boolean;
+  onOpen?: (open: boolean) => void;
+  children: ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export interface SidebarProps {
+  side?: "start" | "end";
+  variant?: "sidebar" | "floating" | "inset";
+  collapsible?: "offcanvas" | "icon" | "none";
+  onEntered?: () => void;
+  onExited?: () => void;
+  children: ReactNode;
+  className?: string;
+}
diff --git a/app/client/packages/design-system/widgets/src/components/Sidebar/src/use-mobile.tsx b/app/client/packages/design-system/widgets/src/components/Sidebar/src/use-mobile.tsx
new file mode 100644
index 000000000000..067e22a5cd49
--- /dev/null
+++ b/app/client/packages/design-system/widgets/src/components/Sidebar/src/use-mobile.tsx
@@ -0,0 +1,27 @@
+import { useEffect, useState } from "react";
+
+import { SIDEBAR_CONSTANTS } from "./constants";
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = useState<boolean | undefined>(undefined);
+
+  useEffect(() => {
+    const root = document.body.querySelector(
+      "[data-theme-provider]",
+    ) as HTMLButtonElement;
+
+    if (!Boolean(root)) return;
+
+    const resizeObserver = new ResizeObserver(([entry]) => {
+      setIsMobile(
+        entry.contentRect.width < SIDEBAR_CONSTANTS.MOBILE_BREAKPOINT,
+      );
+    });
+
+    resizeObserver.observe(root);
+
+    return () => resizeObserver.disconnect();
+  }, [isMobile]);
+
+  return Boolean(isMobile);
+}
diff --git a/app/client/packages/design-system/widgets/src/components/Sidebar/src/use-sidebar.ts b/app/client/packages/design-system/widgets/src/components/Sidebar/src/use-sidebar.ts
new file mode 100644
index 000000000000..6cb583ef3ef8
--- /dev/null
+++ b/app/client/packages/design-system/widgets/src/components/Sidebar/src/use-sidebar.ts
@@ -0,0 +1,12 @@
+import * as React from "react";
+import { SidebarContext } from "./context";
+
+export function useSidebar() {
+  const context = React.useContext(SidebarContext);
+
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider.");
+  }
+
+  return context;
+}
diff --git a/app/client/packages/design-system/widgets/src/components/Sidebar/stories/Sidebar.stories.tsx b/app/client/packages/design-system/widgets/src/components/Sidebar/stories/Sidebar.stories.tsx
new file mode 100644
index 000000000000..0aa33cfc529e
--- /dev/null
+++ b/app/client/packages/design-system/widgets/src/components/Sidebar/stories/Sidebar.stories.tsx
@@ -0,0 +1,125 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarTrigger,
+  SidebarProvider,
+  SidebarInset,
+} from "../src/index";
+import { Flex } from "../../Flex";
+import { Text, Icon } from "@appsmith/wds";
+
+const meta: Meta<typeof Sidebar> = {
+  component: Sidebar,
+  title: "WDS/Widgets/Sidebar",
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component:
+          "A responsive sidebar component that supports different positions, variants, and collapse behaviors.",
+      },
+    },
+  },
+  args: {
+    side: "start",
+    variant: "sidebar",
+  },
+  render: (args) => (
+    <SidebarProvider
+      style={{
+        height: "50vh",
+        border: "1px solid var(--color-bd-elevation-1)",
+      }}
+    >
+      <Sidebar {...args}>
+        <SidebarContent>
+          <DemoContent />
+        </SidebarContent>
+      </Sidebar>
+      <Flex alignItems="start" margin="spacing-4" width="100%">
+        <SidebarTrigger />
+      </Flex>
+    </SidebarProvider>
+  ),
+};
+
+export default meta;
+type Story = StoryObj<typeof Sidebar>;
+
+const DemoContent = () => (
+  <Flex direction="column" gap="spacing-2" padding="spacing-4">
+    <Text color="neutral-subtle" size="caption">
+      Applications
+    </Text>
+    <Flex direction="column" gap="spacing-3" marginTop="spacing-2">
+      <Flex alignItems="center" gap="spacing-2">
+        <Icon name="home" />
+        <Text size="body">Home</Text>
+      </Flex>
+      <Flex alignItems="center" gap="spacing-2">
+        <Icon name="inbox" />
+        <Text size="body">Inbox</Text>
+      </Flex>
+      <Flex alignItems="center" gap="spacing-2">
+        <Icon name="calendar" />
+        <Text size="body">Calendar</Text>
+      </Flex>
+    </Flex>
+  </Flex>
+);
+
+export const Default: Story = {
+  args: {},
+};
+
+export const SideRight: Story = {
+  args: {
+    side: "end",
+  },
+  render: (args) => (
+    <SidebarProvider
+      style={{
+        height: "50vh",
+        border: "1px solid var(--color-bd-elevation-1)",
+      }}
+    >
+      <Flex alignItems="start" margin="spacing-4" width="100%">
+        <SidebarTrigger />
+      </Flex>
+      <Sidebar {...args}>
+        <DemoContent />
+      </Sidebar>
+    </SidebarProvider>
+  ),
+};
+
+export const VariantFloating: Story = {
+  args: {
+    variant: "floating",
+  },
+};
+
+export const VariantInset: Story = {
+  args: {
+    variant: "inset",
+  },
+  render: (args) => (
+    <SidebarProvider
+      style={{
+        height: "50vh",
+        border: "1px solid var(--color-bd-elevation-1)",
+      }}
+    >
+      <Sidebar {...args}>
+        <DemoContent />
+      </Sidebar>
+      <SidebarInset>
+        <Flex alignItems="start" margin="spacing-4" width="100%">
+          <SidebarTrigger />
+        </Flex>
+      </SidebarInset>
+    </SidebarProvider>
+  ),
+};
diff --git a/app/client/packages/design-system/widgets/src/index.ts b/app/client/packages/design-system/widgets/src/index.ts
index 277f078a90cb..b0236e3a62dd 100644
--- a/app/client/packages/design-system/widgets/src/index.ts
+++ b/app/client/packages/design-system/widgets/src/index.ts
@@ -30,6 +30,8 @@ export * from "./components/ListBox";
 export * from "./components/ListBoxItem";
 export * from "./components/MenuItem";
 export * from "./components/Markdown";
+export * from "./components/Sidebar";
+export * from "./components/Sheet";
 
 export * from "./utils";
 export * from "./hooks";
diff --git a/app/client/packages/storybook/package.json b/app/client/packages/storybook/package.json
index 7fa338b6eb27..dcc41c52e723 100644
--- a/app/client/packages/storybook/package.json
+++ b/app/client/packages/storybook/package.json
@@ -23,6 +23,7 @@
     "@storybook/addon-viewport": "^8.2.7",
     "@storybook/blocks": "^8.2.7",
     "@storybook/components": "^8.2.7",
+    "@storybook/core-events": "^8.3.2",
     "@storybook/manager-api": "^8.2.7",
     "@storybook/preset-create-react-app": "^8.2.7",
     "@storybook/react-vite": "^8.2.7",
@@ -37,7 +38,6 @@
   "dependencies": {
     "@appsmith/wds": "workspace:^",
     "@appsmith/wds-theming": "workspace:^",
-    "@storybook/core-events": "^8.3.2",
     "glob": "^11.0.0"
   }
 }
diff --git a/app/client/yarn.lock b/app/client/yarn.lock
index b0977ec08747..17dd19532035 100644
--- a/app/client/yarn.lock
+++ b/app/client/yarn.lock
@@ -251,12 +251,14 @@ __metadata:
     "@tabler/icons-react": ^3.10.0
     "@types/fs-extra": ^11.0.4
     "@types/react-syntax-highlighter": ^15.5.13
+    "@types/react-transition-group": ^4.4.11
     clsx: ^2.0.0
     eslint-plugin-storybook: ^0.6.10
     lodash: "*"
     react-aria-components: ^1.2.1
     react-markdown: ^9.0.1
     react-syntax-highlighter: ^15.5.0
+    react-transition-group: ^4.4.5
     remark-gfm: ^4.0.0
   peerDependencies:
     react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
@@ -2628,12 +2630,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.1, @babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.11.1, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.16.0, @babel/runtime@npm:^7.16.3, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.18.0, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.20.0, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.3, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.9.2":
-  version: 7.25.6
-  resolution: "@babel/runtime@npm:7.25.6"
+"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.1, @babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.11.1, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.16.0, @babel/runtime@npm:^7.16.3, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.18.0, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.20.0, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.3, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2":
+  version: 7.26.0
+  resolution: "@babel/runtime@npm:7.26.0"
   dependencies:
     regenerator-runtime: ^0.14.0
-  checksum: ee1a69d3ac7802803f5ee6a96e652b78b8addc28c6a38c725a4ad7d61a059d9e6cb9f6550ed2f63cce67a1bd82e0b1ef66a1079d895be6bfb536a5cfbd9ccc32
+  checksum: c8e2c0504ab271b3467a261a8f119bf2603eb857a0d71e37791f4e3fae00f681365073cc79f141ddaa90c6077c60ba56448004ad5429d07ac73532be9f7cf28a
   languageName: node
   linkType: hard
 
@@ -11165,6 +11167,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/react-transition-group@npm:^4.4.11":
+  version: 4.4.11
+  resolution: "@types/react-transition-group@npm:4.4.11"
+  dependencies:
+    "@types/react": "*"
+  checksum: a6e3b2e4363cb019e256ae4f19dadf9d7eb199da1a5e4109bbbf6a132821884044d332e9c74b520b1e5321a7f545502443fd1ce0b18649c8b510fa4220b0e5c2
+  languageName: node
+  linkType: hard
+
 "@types/react-window@npm:^1.8.2":
   version: 1.8.2
   resolution: "@types/react-window@npm:1.8.2"
@@ -17115,6 +17126,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dom-helpers@npm:^5.0.1":
+  version: 5.2.1
+  resolution: "dom-helpers@npm:5.2.1"
+  dependencies:
+    "@babel/runtime": ^7.8.7
+    csstype: ^3.0.2
+  checksum: 863ba9e086f7093df3376b43e74ce4422571d404fc9828bf2c56140963d5edf0e56160f9b2f3bb61b282c07f8fc8134f023c98fd684bddcb12daf7b0f14d951c
+  languageName: node
+  linkType: hard
+
 "dom-serializer@npm:0":
   version: 0.2.2
   resolution: "dom-serializer@npm:0.2.2"
@@ -29338,6 +29359,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-transition-group@npm:^4.4.5":
+  version: 4.4.5
+  resolution: "react-transition-group@npm:4.4.5"
+  dependencies:
+    "@babel/runtime": ^7.5.5
+    dom-helpers: ^5.0.1
+    loose-envify: ^1.4.0
+    prop-types: ^15.6.2
+  peerDependencies:
+    react: ">=16.6.0"
+    react-dom: ">=16.6.0"
+  checksum: 75602840106aa9c6545149d6d7ae1502fb7b7abadcce70a6954c4b64a438ff1cd16fc77a0a1e5197cdd72da398f39eb929ea06f9005c45b132ed34e056ebdeb1
+  languageName: node
+  linkType: hard
+
 "react-use-gesture@npm:^7.0.4":
   version: 7.0.16
   resolution: "react-use-gesture@npm:7.0.16"