diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index a93bde5..92dccc8 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -244,7 +244,7 @@ When adding a new item, you will create/edit these files:
 | `mc-skeleton`        | ✅           | ✅        |
 | `mc-badge`           | ✅           | ✅        |
 | `mc-avatar`          | ✅           | ✅        |
-| `mc-drawer`          | ✅           |           |
+| `mc-drawer`          | ✅           | ✅        |
 | `mc-hover-card`      | ✅           | ✅        |
 | `mc-slider`          | ✅           |           |
 | `mc-carousel`        | ✅           | ✅        |
diff --git a/packages/web/__registry__/index.tsx b/packages/web/__registry__/index.tsx
index 4392625..b979dcd 100644
--- a/packages/web/__registry__/index.tsx
+++ b/packages/web/__registry__/index.tsx
@@ -2449,6 +2449,19 @@ export const Index: Record<string, any> = {
       },
     ],
   },
+  'mc-drawer': {
+    name: 'mc-drawer',
+    description: 'A drawer component for MicroClub UI',
+    type: 'registry:component',
+    files: [
+      {
+        path: 'registry/ui/mc-drawer.tsx',
+        content:
+          "'use client';\nimport * as React from 'react';\nimport { Drawer as McDrawerPrimitive } from 'vaul';\nimport { cn } from '@/lib/utils';\n\nfunction McDrawer({ ...props }: React.ComponentProps<typeof McDrawerPrimitive.Root>) {\n  return <McDrawerPrimitive.Root data-slot=\"drawer\" {...props} />;\n}\n\nfunction McDrawerTrigger({ ...props }: React.ComponentProps<typeof McDrawerPrimitive.Trigger>) {\n  return <McDrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />;\n}\n\nfunction McDrawerPortal({ ...props }: React.ComponentProps<typeof McDrawerPrimitive.Portal>) {\n  return <McDrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />;\n}\n\nfunction McDrawerClose({ ...props }: React.ComponentProps<typeof McDrawerPrimitive.Close>) {\n  return <McDrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />;\n}\n\nfunction McDrawerOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof McDrawerPrimitive.Overlay>) {\n  return (\n    <McDrawerPrimitive.Overlay\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        'fixed inset-0 z-50 bg-foreground/20',\n        'supports-backdrop-filter:backdrop-blur-xs',\n        'data-open:animate-in data-open:fade-in-0',\n        'data-closed:animate-out data-closed:fade-out-0',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction McDrawerContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof McDrawerPrimitive.Content>) {\n  return (\n    <McDrawerPortal>\n      <McDrawerOverlay />\n      <McDrawerPrimitive.Content\n        data-slot=\"drawer-content\"\n        className={cn(\n          'group/drawer-content fixed z-50 flex flex-col',\n          'bg-popover text-popover-foreground',\n          'shadow-2xl',\n          'data-[vaul-drawer-direction=bottom]:inset-x-0',\n          'data-[vaul-drawer-direction=bottom]:bottom-0',\n          'data-[vaul-drawer-direction=bottom]:max-h-dvh',\n          'data-[vaul-drawer-direction=bottom]:rounded-t-2xl',\n          'data-[vaul-drawer-direction=bottom]:border',\n          'data-[vaul-drawer-direction=bottom]:border-border',\n          'data-[vaul-drawer-direction=top]:inset-x-0',\n          'data-[vaul-drawer-direction=top]:top-0',\n          'data-[vaul-drawer-direction=top]:max-h-dvh',\n          'data-[vaul-drawer-direction=top]:rounded-b-2xl',\n          'data-[vaul-drawer-direction=top]:border',\n          'data-[vaul-drawer-direction=top]:border-border',\n          'data-[vaul-drawer-direction=left]:inset-y-0',\n          'data-[vaul-drawer-direction=left]:left-0',\n          'data-[vaul-drawer-direction=left]:w-drawer',\n          'data-[vaul-drawer-direction=left]:max-w-full',\n          'data-[vaul-drawer-direction=left]:rounded-r-2xl',\n          'data-[vaul-drawer-direction=left]:border',\n          'data-[vaul-drawer-direction=left]:border-border',\n          'data-[vaul-drawer-direction=right]:inset-y-0',\n          'data-[vaul-drawer-direction=right]:right-0',\n          'data-[vaul-drawer-direction=right]:w-drawer',\n          'data-[vaul-drawer-direction=right]:max-w-full',\n          'data-[vaul-drawer-direction=right]:rounded-l-2xl',\n          'data-[vaul-drawer-direction=right]:border',\n          'data-[vaul-drawer-direction=right]:border-border',\n\n          className\n        )}\n        {...props}\n      >\n        <div className=\"mx-auto mt-4 hidden h-1 w-10 shrink-0 rounded-full bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block group-data-[vaul-drawer-direction=top]/drawer-content:block\" />\n        {children}\n      </McDrawerPrimitive.Content>\n    </McDrawerPortal>\n  );\n}\n\nfunction McDrawerHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn('flex flex-col gap-2 px-4 pt-0 pb-0', className)}\n      {...props}\n    />\n  );\n}\n\nfunction McDrawerFooter({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn('mt-auto flex flex-col gap-2 p-4 pt-0', className)}\n      {...props}\n    />\n  );\n}\n\nfunction McDrawerTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof McDrawerPrimitive.Title>) {\n  return (\n    <McDrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn('text-base font-semibold text-foreground leading-snug', className)}\n      {...props}\n    />\n  );\n}\n\nfunction McDrawerDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof McDrawerPrimitive.Description>) {\n  return (\n    <McDrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn('text-sm text-muted-foreground leading-relaxed', className)}\n      {...props}\n    />\n  );\n}\n\nfunction McDrawerNav({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"drawer-nav\"\n      className={cn('flex h-drawer-nav items-center gap-2 px-6 py-2.5', className)}\n      {...props}\n    >\n      <McDrawerClose\n        className=\"flex h-8 w-8 items-center justify-center rounded-md text-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-ring/50\"\n        aria-label=\"Go back\"\n      >\n        <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\">\n          <path\n            d=\"M12.5 15L7.5 10L12.5 5\"\n            stroke=\"currentColor\"\n            strokeWidth=\"1.5\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          />\n        </svg>\n      </McDrawerClose>\n    </div>\n  );\n}\n\ninterface McDrawerNavItemProps extends React.ComponentProps<'button'> {\n  icon?: React.ReactNode;\n  hasArrow?: boolean;\n  rightElement?: React.ReactNode;\n}\n\nfunction McDrawerNavItem({\n  icon,\n  hasArrow = false,\n  rightElement,\n  children,\n  className,\n  ...props\n}: McDrawerNavItemProps) {\n  return (\n    <button\n      data-slot=\"drawer-nav-item\"\n      className={cn(\n        'flex h-drawer-item w-full items-center justify-between rounded-xl',\n        'px-6 py-5',\n        'text-sm text-foreground',\n        'transition-colors hover:bg-accent hover:text-accent-foreground',\n        'focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-ring/50',\n        className\n      )}\n      {...props}\n    >\n      <span className=\"flex items-center gap-3\">\n        {icon && (\n          <span className=\"shrink-0 text-foreground\" aria-hidden=\"true\">\n            {icon}\n          </span>\n        )}\n        {children}\n      </span>\n\n      {rightElement ??\n        (hasArrow && (\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n            <path\n              d=\"M6 4L10 8L6 12\"\n              stroke=\"currentColor\"\n              strokeWidth=\"1.5\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n            />\n          </svg>\n        ))}\n    </button>\n  );\n}\nexport {\n  McDrawer,\n  McDrawerPortal,\n  McDrawerOverlay,\n  McDrawerTrigger,\n  McDrawerClose,\n  McDrawerContent,\n  McDrawerHeader,\n  McDrawerFooter,\n  McDrawerTitle,\n  McDrawerDescription,\n  McDrawerNav,\n  McDrawerNavItem,\n};\n",
+        type: 'registry:component',
+      },
+    ],
+  },
   'mc-hover-card': {
     name: 'mc-hover-card',
     description: 'A hover card component for MicroClub UI',
@@ -2955,6 +2968,22 @@ export const Index: Record<string, any> = {
     source:
       'import {\n  McAvatar,\n  McAvatarBadge,\n  McAvatarFallback,\n  McAvatarGroup,\n  McAvatarGroupCount,\n  McAvatarImage,\n} from \'@/registry/ui/mc-avatar\';\n\nexport default function AvatarDemo() {\n  return (\n    <div className="flex flex-row flex-wrap gap-6 md:gap-12">\n      <McAvatar>\n        <McAvatarImage src="https://github.com/Adel2411.png" alt="@Adel2411" />\n        <McAvatarFallback>CN</McAvatarFallback>\n      </McAvatar>\n      <McAvatar>\n        <McAvatarImage src="https://github.com/evilrabbit.png" alt="@evilrabbit" />\n        <McAvatarFallback>ER</McAvatarFallback>\n        <McAvatarBadge className="bg-green-600 dark:bg-green-800" />\n      </McAvatar>\n      <McAvatarGroup className="grayscale">\n        <McAvatar>\n          <McAvatarImage src="https://github.com/Adel2411.png" alt="@Adel2411" />\n          <McAvatarFallback>CN</McAvatarFallback>\n        </McAvatar>\n        <McAvatar>\n          <McAvatarImage src="https://github.com/maxleiter.png" alt="@maxleiter" />\n          <McAvatarFallback>LR</McAvatarFallback>\n        </McAvatar>\n        <McAvatar>\n          <McAvatarImage src="https://github.com/evilrabbit.png" alt="@evilrabbit" />\n          <McAvatarFallback>ER</McAvatarFallback>\n        </McAvatar>\n        <McAvatarGroupCount>+3</McAvatarGroupCount>\n      </McAvatarGroup>\n    </div>\n  );\n}\n',
   },
+  'mc-drawer-demo': {
+    name: 'mc-drawer-demo',
+    description: 'Demo for MicroClub drawer',
+    type: 'registry:example',
+    files: [
+      {
+        path: 'registry/examples/mc-drawer-demo.tsx',
+        content:
+          '\'use client\';\n\nimport { Moon } from \'lucide-react\';\nimport {\n  McDrawer,\n  McDrawerClose,\n  McDrawerContent,\n  McDrawerDescription,\n  McDrawerHeader,\n  McDrawerNav,\n  McDrawerNavItem,\n  McDrawerTitle,\n  McDrawerTrigger,\n} from \'../ui/mc-drawer\';\n\nconst navItems = [\n  { label: \'Account\', hasArrow: true },\n  { label: \'Socials\', hasArrow: false },\n  { label: \'Settings\', hasArrow: true },\n  { label: \'Help\', hasArrow: true },\n  { label: \'Info\', hasArrow: true },\n];\n\nfunction DesktopWithIcons() {\n  return (\n    <McDrawer direction="right">\n      <McDrawerTrigger className="inline-flex items-center justify-center rounded-full bg-primary px-5 py-3.5 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-ring/50">\n        Drawer — icons\n      </McDrawerTrigger>\n\n      <McDrawerContent>\n        <McDrawerTitle className="sr-only">Navigation — icons</McDrawerTitle>\n        <McDrawerNav />\n\n        <div className="flex flex-1 flex-col gap-0 overflow-y-auto px-0 pt-9">\n          <McDrawerNavItem icon={<Moon size={16} />} rightElement={<ToggleSwitch />}>\n            Dark mode\n          </McDrawerNavItem>\n\n          {navItems.map(({ label, hasArrow }) => (\n            <McDrawerNavItem key={label} icon={<Moon size={16} />} hasArrow={hasArrow}>\n              {label}\n            </McDrawerNavItem>\n          ))}\n        </div>\n      </McDrawerContent>\n    </McDrawer>\n  );\n}\n\nfunction DesktopNoIcons() {\n  return (\n    <McDrawer direction="right">\n      <McDrawerTrigger className="inline-flex items-center justify-center rounded-full bg-primary px-5 py-3.5 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-ring/50">\n        Drawer — no icons\n      </McDrawerTrigger>\n\n      <McDrawerContent>\n        <McDrawerTitle className="sr-only">Navigation — no icons</McDrawerTitle>\n        <McDrawerNav />\n\n        <div className="flex flex-1 flex-col gap-0 overflow-y-auto px-0 pt-9">\n          <McDrawerNavItem rightElement={<ToggleSwitch />}>Dark mode</McDrawerNavItem>\n\n          {navItems.map(({ label, hasArrow }) => (\n            <McDrawerNavItem key={label} hasArrow={hasArrow}>\n              {label}\n            </McDrawerNavItem>\n          ))}\n        </div>\n      </McDrawerContent>\n    </McDrawer>\n  );\n}\n\nfunction MobileSheet() {\n  return (\n    <McDrawer direction="bottom">\n      <McDrawerTrigger className="inline-flex items-center justify-center rounded-full bg-primary px-5 py-3.5 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-ring/50">\n        Drawer — mobile\n      </McDrawerTrigger>\n\n      <McDrawerContent>\n        <div className="flex flex-col gap-6 px-4 py-6">\n          <McDrawerHeader className="gap-2 p-0">\n            <McDrawerTitle>Edit profile</McDrawerTitle>\n            <McDrawerDescription>\n              Make changes to your profile here. Click save when you&apos;re done.\n            </McDrawerDescription>\n          </McDrawerHeader>\n\n          <div className="flex flex-col gap-4">\n            <div className="flex flex-col gap-1.5">\n              <label htmlFor="drawer-email" className="text-sm font-medium text-foreground">\n                Email\n              </label>\n              <input\n                id="drawer-email"\n                type="email"\n                defaultValue="m@example.com"\n                className="w-full rounded-lg border border-border bg-input px-4 py-3 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring"\n              />\n            </div>\n\n            <div className="flex flex-col gap-1.5">\n              <label htmlFor="drawer-username" className="text-sm font-medium text-foreground">\n                Username\n              </label>\n              <input\n                id="drawer-username"\n                type="text"\n                defaultValue="m@example.com"\n                className="w-full rounded-lg border border-border bg-input px-4 py-3 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring"\n              />\n            </div>\n          </div>\n\n          <McDrawerClose className="w-full rounded-lg bg-primary py-4 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-ring/50">\n            Save changes\n          </McDrawerClose>\n        </div>\n      </McDrawerContent>\n    </McDrawer>\n  );\n}\n\nexport default function DrawerDemo() {\n  return (\n    <div className="flex flex-wrap gap-4">\n      <DesktopWithIcons />\n      <DesktopNoIcons />\n      <MobileSheet />\n    </div>\n  );\n}\n\nfunction ToggleSwitch() {\n  return (\n    <div\n      role="switch"\n      aria-checked="false"\n      tabIndex={0}\n      className="relative h-6 w-10 shrink-0 cursor-pointer rounded-full bg-muted focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-ring/50"\n    >\n      <span className="absolute left-1 top-1 h-4 w-4 rounded-full bg-background shadow-sm transition-transform" />\n    </div>\n  );\n}\n',
+        type: 'registry:example',
+      },
+    ],
+    component: React.lazy(() => import('@/registry/examples/mc-drawer-demo.tsx')),
+    source:
+      '\'use client\';\n\nimport { Moon } from \'lucide-react\';\nimport {\n  McDrawer,\n  McDrawerClose,\n  McDrawerContent,\n  McDrawerDescription,\n  McDrawerHeader,\n  McDrawerNav,\n  McDrawerNavItem,\n  McDrawerTitle,\n  McDrawerTrigger,\n} from \'../ui/mc-drawer\';\n\nconst navItems = [\n  { label: \'Account\', hasArrow: true },\n  { label: \'Socials\', hasArrow: false },\n  { label: \'Settings\', hasArrow: true },\n  { label: \'Help\', hasArrow: true },\n  { label: \'Info\', hasArrow: true },\n];\n\nfunction DesktopWithIcons() {\n  return (\n    <McDrawer direction="right">\n      <McDrawerTrigger className="inline-flex items-center justify-center rounded-full bg-primary px-5 py-3.5 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-ring/50">\n        Drawer — icons\n      </McDrawerTrigger>\n\n      <McDrawerContent>\n        <McDrawerTitle className="sr-only">Navigation — icons</McDrawerTitle>\n        <McDrawerNav />\n\n        <div className="flex flex-1 flex-col gap-0 overflow-y-auto px-0 pt-9">\n          <McDrawerNavItem icon={<Moon size={16} />} rightElement={<ToggleSwitch />}>\n            Dark mode\n          </McDrawerNavItem>\n\n          {navItems.map(({ label, hasArrow }) => (\n            <McDrawerNavItem key={label} icon={<Moon size={16} />} hasArrow={hasArrow}>\n              {label}\n            </McDrawerNavItem>\n          ))}\n        </div>\n      </McDrawerContent>\n    </McDrawer>\n  );\n}\n\nfunction DesktopNoIcons() {\n  return (\n    <McDrawer direction="right">\n      <McDrawerTrigger className="inline-flex items-center justify-center rounded-full bg-primary px-5 py-3.5 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-ring/50">\n        Drawer — no icons\n      </McDrawerTrigger>\n\n      <McDrawerContent>\n        <McDrawerTitle className="sr-only">Navigation — no icons</McDrawerTitle>\n        <McDrawerNav />\n\n        <div className="flex flex-1 flex-col gap-0 overflow-y-auto px-0 pt-9">\n          <McDrawerNavItem rightElement={<ToggleSwitch />}>Dark mode</McDrawerNavItem>\n\n          {navItems.map(({ label, hasArrow }) => (\n            <McDrawerNavItem key={label} hasArrow={hasArrow}>\n              {label}\n            </McDrawerNavItem>\n          ))}\n        </div>\n      </McDrawerContent>\n    </McDrawer>\n  );\n}\n\nfunction MobileSheet() {\n  return (\n    <McDrawer direction="bottom">\n      <McDrawerTrigger className="inline-flex items-center justify-center rounded-full bg-primary px-5 py-3.5 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-ring/50">\n        Drawer — mobile\n      </McDrawerTrigger>\n\n      <McDrawerContent>\n        <div className="flex flex-col gap-6 px-4 py-6">\n          <McDrawerHeader className="gap-2 p-0">\n            <McDrawerTitle>Edit profile</McDrawerTitle>\n            <McDrawerDescription>\n              Make changes to your profile here. Click save when you&apos;re done.\n            </McDrawerDescription>\n          </McDrawerHeader>\n\n          <div className="flex flex-col gap-4">\n            <div className="flex flex-col gap-1.5">\n              <label htmlFor="drawer-email" className="text-sm font-medium text-foreground">\n                Email\n              </label>\n              <input\n                id="drawer-email"\n                type="email"\n                defaultValue="m@example.com"\n                className="w-full rounded-lg border border-border bg-input px-4 py-3 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring"\n              />\n            </div>\n\n            <div className="flex flex-col gap-1.5">\n              <label htmlFor="drawer-username" className="text-sm font-medium text-foreground">\n                Username\n              </label>\n              <input\n                id="drawer-username"\n                type="text"\n                defaultValue="m@example.com"\n                className="w-full rounded-lg border border-border bg-input px-4 py-3 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring"\n              />\n            </div>\n          </div>\n\n          <McDrawerClose className="w-full rounded-lg bg-primary py-4 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-ring/50">\n            Save changes\n          </McDrawerClose>\n        </div>\n      </McDrawerContent>\n    </McDrawer>\n  );\n}\n\nexport default function DrawerDemo() {\n  return (\n    <div className="flex flex-wrap gap-4">\n      <DesktopWithIcons />\n      <DesktopNoIcons />\n      <MobileSheet />\n    </div>\n  );\n}\n\nfunction ToggleSwitch() {\n  return (\n    <div\n      role="switch"\n      aria-checked="false"\n      tabIndex={0}\n      className="relative h-6 w-10 shrink-0 cursor-pointer rounded-full bg-muted focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-ring/50"\n    >\n      <span className="absolute left-1 top-1 h-4 w-4 rounded-full bg-background shadow-sm transition-transform" />\n    </div>\n  );\n}\n',
+  },
   'mc-hover-card-demo': {
     name: 'mc-hover-card-demo',
     description: 'Demo for MicroClub Hover Card',
diff --git a/packages/web/__registry__/registry.autogenerated.json b/packages/web/__registry__/registry.autogenerated.json
index 0f967a2..9617e84 100644
--- a/packages/web/__registry__/registry.autogenerated.json
+++ b/packages/web/__registry__/registry.autogenerated.json
@@ -2545,6 +2545,19 @@
       ],
       "type": "registry:component"
     },
+    {
+      "name": "mc-drawer",
+      "title": "MicroClub Drawer",
+      "description": "A drawer component for MicroClub UI",
+      "dependencies": ["vaul"],
+      "files": [
+        {
+          "path": "registry/ui/mc-drawer.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "type": "registry:component"
+    },
     {
       "name": "mc-hover-card",
       "title": "MicroClub Hover Card",
diff --git a/packages/web/app/globals.css b/packages/web/app/globals.css
index 87c2edd..8d158d8 100644
--- a/packages/web/app/globals.css
+++ b/packages/web/app/globals.css
@@ -200,6 +200,10 @@
   --blur-lg: 7px;
   --blur-xl: 9px;
 
+  --spacing-drawer: 26.6875rem;
+  --spacing-drawer-nav: 4.5rem;
+  --spacing-drawer-item: 4.125rem;
+
   --font-dm-sans: var(--font-dm-sans);
   --font-plus-jakarta-sans: var(--font-plus-jakarta-sans);
   --font-heading: var(--font-sans);
diff --git a/packages/web/content/docs/components/index.mdx b/packages/web/content/docs/components/index.mdx
index a144b18..f251abf 100644
--- a/packages/web/content/docs/components/index.mdx
+++ b/packages/web/content/docs/components/index.mdx
@@ -96,6 +96,9 @@ description: Explore all available UI components in the MicroClub UI library.
   <Card title="MC Avatar" href="/docs/components/mc-avatar">
     A component for displaying user profile images.
   </Card>
+  <Card title="MC Drawer" href="/docs/components/mc-drawer">
+    A slide-out panel for navigation or content.
+  </Card>
   <Card title="MC Hover Card" href="/docs/components/mc-hover-card">
     A card that appears on hover with additional information.
   </Card>
@@ -116,9 +119,6 @@ description: Explore all available UI components in the MicroClub UI library.
   <Card title="MC Progress" href="/docs/components/mc-progress">
     A component that displays progress of an operation.
   </Card>
-  <Card title="MC Drawer" href="/docs/components/mc-drawer">
-    A slide-out panel for navigation or content.
-  </Card>
   <Card title="MC Slider" href="/docs/components/mc-slider">
     A component for selecting a value from a range.
   </Card>
diff --git a/packages/web/content/docs/components/mc-drawer.mdx b/packages/web/content/docs/components/mc-drawer.mdx
index eb31665..7563d9b 100644
--- a/packages/web/content/docs/components/mc-drawer.mdx
+++ b/packages/web/content/docs/components/mc-drawer.mdx
@@ -3,7 +3,213 @@ title: MC Drawer
 description: A slide-out panel for navigation or content.
 ---
 
-<Callout type="warn">
-  This component is coming soon. Check our [contributing guide](/docs/introduction#contributing) for
-  more information.
-</Callout>
+## Overview
+
+The `mc-drawer` component is a responsive slide-out panel for navigation, settings, forms, and
+secondary workflows. It is built on top of **vaul**, with MicroClub styling for overlays, side
+panels, bottom sheets, nav rows, headers, footers, and accessible close controls.
+
+Use it when content should stay close to the current page without taking the user into a full
+route change.
+
+## Preview
+
+<Tabs items={['preview', 'code']}>
+  <Tab>
+    <ComponentPreview name="mc-drawer-demo" />
+  </Tab>
+  <Tab>
+    <ComponentSource name="mc-drawer-demo" />
+  </Tab>
+</Tabs>
+
+## Add to Your Project
+
+Deploy `mc-drawer` directly to your `components/ui` directory:
+
+<Tabs items={['npm', 'pnpm', 'yarn', 'bun']}>
+  <Tab value="npm">npx mcoli-ui@latest add mc-drawer</Tab>
+  <Tab value="pnpm">pnpm dlx mcoli-ui@latest add mc-drawer</Tab>
+  <Tab value="yarn">yarn dlx mcoli-ui@latest add mc-drawer</Tab>
+  <Tab value="bun">bunx mcoli-ui@latest add mc-drawer</Tab>
+</Tabs>
+
+### Manual Setup
+
+If you prefer manual control:
+
+<Steps>
+
+<Step>Install the core dependencies</Step>
+
+<Tabs items={['npm', 'pnpm', 'yarn', 'bun']}>
+  <Tab value="npm">npm install vaul</Tab>
+  <Tab value="pnpm">pnpm add vaul</Tab>
+  <Tab value="yarn">yarn add vaul</Tab>
+  <Tab value="bun">bun add vaul</Tab>
+</Tabs>
+
+<Step>Copy the source code</Step>
+
+<ComponentSource name="mc-drawer" />
+
+<Step>Adjust import paths</Step>
+
+Ensure your `@/lib/utils` or equivalent classname helper is correctly imported.
+
+</Steps>
+
+## Usage
+
+```tsx
+import {
+  McDrawer,
+  McDrawerContent,
+  McDrawerDescription,
+  McDrawerHeader,
+  McDrawerTitle,
+  McDrawerTrigger,
+} from '@/components/ui/mc-drawer';
+
+export default function Example() {
+  return (
+    <McDrawer direction="right">
+      <McDrawerTrigger>Open drawer</McDrawerTrigger>
+      <McDrawerContent>
+        <McDrawerHeader>
+          <McDrawerTitle>Settings</McDrawerTitle>
+          <McDrawerDescription>Update your workspace preferences.</McDrawerDescription>
+        </McDrawerHeader>
+      </McDrawerContent>
+    </McDrawer>
+  );
+}
+```
+
+## Examples
+
+### Navigation Drawer
+
+```tsx
+import { Moon } from 'lucide-react';
+import {
+  McDrawer,
+  McDrawerContent,
+  McDrawerNav,
+  McDrawerNavItem,
+  McDrawerTitle,
+  McDrawerTrigger,
+} from '@/components/ui/mc-drawer';
+
+export function NavigationDrawer() {
+  return (
+    <McDrawer direction="right">
+      <McDrawerTrigger>Open navigation</McDrawerTrigger>
+      <McDrawerContent>
+        <McDrawerTitle className="sr-only">Navigation</McDrawerTitle>
+        <McDrawerNav />
+        <div className="flex flex-1 flex-col overflow-y-auto pt-9">
+          <McDrawerNavItem icon={<Moon size={16} />} hasArrow>
+            Account
+          </McDrawerNavItem>
+          <McDrawerNavItem icon={<Moon size={16} />} hasArrow>
+            Settings
+          </McDrawerNavItem>
+        </div>
+      </McDrawerContent>
+    </McDrawer>
+  );
+}
+```
+
+### Bottom Sheet
+
+```tsx
+import {
+  McDrawer,
+  McDrawerClose,
+  McDrawerContent,
+  McDrawerDescription,
+  McDrawerHeader,
+  McDrawerTitle,
+  McDrawerTrigger,
+} from '@/components/ui/mc-drawer';
+
+export function ProfileDrawer() {
+  return (
+    <McDrawer direction="bottom">
+      <McDrawerTrigger>Edit profile</McDrawerTrigger>
+      <McDrawerContent>
+        <div className="flex flex-col gap-6 px-4 py-6">
+          <McDrawerHeader className="gap-2 p-0">
+            <McDrawerTitle>Edit profile</McDrawerTitle>
+            <McDrawerDescription>Save your changes before closing the drawer.</McDrawerDescription>
+          </McDrawerHeader>
+
+          <input
+            type="email"
+            defaultValue="m@example.com"
+            className="w-full rounded-lg border border-border bg-input px-4 py-3 text-sm"
+          />
+
+          <McDrawerClose className="w-full rounded-lg bg-primary py-4 text-sm font-medium text-primary-foreground">
+            Save changes
+          </McDrawerClose>
+        </div>
+      </McDrawerContent>
+    </McDrawer>
+  );
+}
+```
+
+## API Reference
+
+### Root Components
+
+| Component         | Description                                            |
+| ----------------- | ------------------------------------------------------ |
+| `McDrawer`        | Root wrapper that manages drawer state and direction   |
+| `McDrawerTrigger` | Element that opens the drawer                          |
+| `McDrawerContent` | Drawer panel rendered in a portal with overlay support |
+| `McDrawerPortal`  | Portal wrapper from the underlying drawer primitive    |
+| `McDrawerOverlay` | Fixed overlay displayed behind the drawer content      |
+| `McDrawerClose`   | Element that closes the drawer                         |
+
+### Layout Components
+
+| Component             | Description                                      |
+| --------------------- | ------------------------------------------------ |
+| `McDrawerHeader`      | Header region for titles and descriptions        |
+| `McDrawerFooter`      | Footer region for actions                        |
+| `McDrawerTitle`       | Accessible drawer title                          |
+| `McDrawerDescription` | Accessible supporting description                |
+| `McDrawerNav`         | Top navigation row with a built-in close control |
+| `McDrawerNavItem`     | Full-width drawer navigation item                |
+
+### Common Props
+
+#### `McDrawer`
+
+| Prop           | Type                                     | Default     | Description                            |
+| -------------- | ---------------------------------------- | ----------- | -------------------------------------- |
+| `direction`    | `"top" \| "right" \| "bottom" \| "left"` | `"bottom"`  | Side where the drawer opens            |
+| `open`         | `boolean`                                | `undefined` | Controlled open state                  |
+| `onOpenChange` | `(open: boolean) => void`                | `undefined` | Callback fired when open state changes |
+
+#### `McDrawerContent`
+
+| Prop        | Type        | Default     | Description                        |
+| ----------- | ----------- | ----------- | ---------------------------------- |
+| `className` | `string`    | `undefined` | Additional classes for the panel   |
+| `children`  | `ReactNode` | `undefined` | Content rendered inside the drawer |
+
+#### `McDrawerNavItem`
+
+| Prop           | Type        | Default     | Description                               |
+| -------------- | ----------- | ----------- | ----------------------------------------- |
+| `icon`         | `ReactNode` | `undefined` | Optional leading icon                     |
+| `hasArrow`     | `boolean`   | `false`     | Shows a trailing chevron                  |
+| `rightElement` | `ReactNode` | `undefined` | Custom trailing element, such as a switch |
+| `className`    | `string`    | `undefined` | Additional classes for the item           |
+
+All other relevant props from `vaul` are supported on their matching wrappers.
diff --git a/packages/web/content/docs/components/meta.json b/packages/web/content/docs/components/meta.json
index e194760..c50ba5a 100644
--- a/packages/web/content/docs/components/meta.json
+++ b/packages/web/content/docs/components/meta.json
@@ -32,13 +32,13 @@
     "mc-skeleton",
     "mc-badge",
     "mc-avatar",
+    "mc-drawer",
     "mc-hover-card",
     "mc-carousel",
     "---Coming Soon---",
     "mc-data-table",
     "mc-collapsible",
     "mc-progress",
-    "mc-drawer",
     "mc-slider"
   ]
 }
diff --git a/packages/web/package.json b/packages/web/package.json
index 616a74e..6cd0ab2 100644
--- a/packages/web/package.json
+++ b/packages/web/package.json
@@ -40,7 +40,8 @@
     "react-day-picker": "^10.0.1",
     "react-dom": "^19.2.4",
     "sonner": "^2.0.7",
-    "tailwind-merge": "^3.5.0"
+    "tailwind-merge": "^3.5.0",
+    "vaul": "^1.1.2"
   },
   "devDependencies": {
     "@storybook/nextjs": "^10.4.1",
diff --git a/packages/web/public/r/mc-drawer-card.json b/packages/web/public/r/mc-drawer-card.json
new file mode 100644
index 0000000..a8cdc7d
--- /dev/null
+++ b/packages/web/public/r/mc-drawer-card.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "mc-drawer-card",
+  "title": "MicroClub Drawer",
+  "description": "A drawer component for MicroClub UI",
+  "dependencies": ["@base-ui/react"],
+  "files": [
+    {
+      "path": "registry/ui/mc-drawer.tsx",
+      "content": "",
+      "type": "registry:component"
+    }
+  ],
+  "type": "registry:component"
+}
diff --git a/packages/web/public/r/mc-drawer.json b/packages/web/public/r/mc-drawer.json
new file mode 100644
index 0000000..8ac1eca
--- /dev/null
+++ b/packages/web/public/r/mc-drawer.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "mc-drawer",
+  "title": "MicroClub Drawer",
+  "description": "A drawer component for MicroClub UI",
+  "dependencies": ["vaul"],
+  "files": [
+    {
+      "path": "registry/ui/mc-drawer.tsx",
+      "content": "'use client';\nimport * as React from 'react';\nimport { Drawer as McDrawerPrimitive } from 'vaul';\nimport { cn } from '@/lib/utils';\n\nfunction McDrawer({ ...props }: React.ComponentProps<typeof McDrawerPrimitive.Root>) {\n  return <McDrawerPrimitive.Root data-slot=\"drawer\" {...props} />;\n}\n\nfunction McDrawerTrigger({ ...props }: React.ComponentProps<typeof McDrawerPrimitive.Trigger>) {\n  return <McDrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />;\n}\n\nfunction McDrawerPortal({ ...props }: React.ComponentProps<typeof McDrawerPrimitive.Portal>) {\n  return <McDrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />;\n}\n\nfunction McDrawerClose({ ...props }: React.ComponentProps<typeof McDrawerPrimitive.Close>) {\n  return <McDrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />;\n}\n\nfunction McDrawerOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof McDrawerPrimitive.Overlay>) {\n  return (\n    <McDrawerPrimitive.Overlay\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        'fixed inset-0 z-50 bg-foreground/20',\n        'supports-backdrop-filter:backdrop-blur-xs',\n        'data-open:animate-in data-open:fade-in-0',\n        'data-closed:animate-out data-closed:fade-out-0',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction McDrawerContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof McDrawerPrimitive.Content>) {\n  return (\n    <McDrawerPortal>\n      <McDrawerOverlay />\n      <McDrawerPrimitive.Content\n        data-slot=\"drawer-content\"\n        className={cn(\n          'group/drawer-content fixed z-50 flex flex-col',\n          'bg-popover text-popover-foreground',\n          'shadow-2xl',\n          'data-[vaul-drawer-direction=bottom]:inset-x-0',\n          'data-[vaul-drawer-direction=bottom]:bottom-0',\n          'data-[vaul-drawer-direction=bottom]:max-h-dvh',\n          'data-[vaul-drawer-direction=bottom]:rounded-t-2xl',\n          'data-[vaul-drawer-direction=bottom]:border',\n          'data-[vaul-drawer-direction=bottom]:border-border',\n          'data-[vaul-drawer-direction=top]:inset-x-0',\n          'data-[vaul-drawer-direction=top]:top-0',\n          'data-[vaul-drawer-direction=top]:max-h-dvh',\n          'data-[vaul-drawer-direction=top]:rounded-b-2xl',\n          'data-[vaul-drawer-direction=top]:border',\n          'data-[vaul-drawer-direction=top]:border-border',\n          'data-[vaul-drawer-direction=left]:inset-y-0',\n          'data-[vaul-drawer-direction=left]:left-0',\n          'data-[vaul-drawer-direction=left]:w-drawer',\n          'data-[vaul-drawer-direction=left]:max-w-full',\n          'data-[vaul-drawer-direction=left]:rounded-r-2xl',\n          'data-[vaul-drawer-direction=left]:border',\n          'data-[vaul-drawer-direction=left]:border-border',\n          'data-[vaul-drawer-direction=right]:inset-y-0',\n          'data-[vaul-drawer-direction=right]:right-0',\n          'data-[vaul-drawer-direction=right]:w-drawer',\n          'data-[vaul-drawer-direction=right]:max-w-full',\n          'data-[vaul-drawer-direction=right]:rounded-l-2xl',\n          'data-[vaul-drawer-direction=right]:border',\n          'data-[vaul-drawer-direction=right]:border-border',\n\n          className\n        )}\n        {...props}\n      >\n        <div className=\"mx-auto mt-4 hidden h-1 w-10 shrink-0 rounded-full bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block group-data-[vaul-drawer-direction=top]/drawer-content:block\" />\n        {children}\n      </McDrawerPrimitive.Content>\n    </McDrawerPortal>\n  );\n}\n\nfunction McDrawerHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn('flex flex-col gap-2 px-4 pt-0 pb-0', className)}\n      {...props}\n    />\n  );\n}\n\nfunction McDrawerFooter({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn('mt-auto flex flex-col gap-2 p-4 pt-0', className)}\n      {...props}\n    />\n  );\n}\n\nfunction McDrawerTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof McDrawerPrimitive.Title>) {\n  return (\n    <McDrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn('text-base font-semibold text-foreground leading-snug', className)}\n      {...props}\n    />\n  );\n}\n\nfunction McDrawerDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof McDrawerPrimitive.Description>) {\n  return (\n    <McDrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn('text-sm text-muted-foreground leading-relaxed', className)}\n      {...props}\n    />\n  );\n}\n\nfunction McDrawerNav({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"drawer-nav\"\n      className={cn('flex h-drawer-nav items-center gap-2 px-6 py-2.5', className)}\n      {...props}\n    >\n      <McDrawerClose\n        className=\"flex h-8 w-8 items-center justify-center rounded-md text-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-ring/50\"\n        aria-label=\"Go back\"\n      >\n        <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\">\n          <path\n            d=\"M12.5 15L7.5 10L12.5 5\"\n            stroke=\"currentColor\"\n            strokeWidth=\"1.5\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          />\n        </svg>\n      </McDrawerClose>\n    </div>\n  );\n}\n\ninterface McDrawerNavItemProps extends React.ComponentProps<'button'> {\n  icon?: React.ReactNode;\n  hasArrow?: boolean;\n  rightElement?: React.ReactNode;\n}\n\nfunction McDrawerNavItem({\n  icon,\n  hasArrow = false,\n  rightElement,\n  children,\n  className,\n  ...props\n}: McDrawerNavItemProps) {\n  return (\n    <button\n      data-slot=\"drawer-nav-item\"\n      className={cn(\n        'flex h-drawer-item w-full items-center justify-between rounded-xl',\n        'px-6 py-5',\n        'text-sm text-foreground',\n        'transition-colors hover:bg-accent hover:text-accent-foreground',\n        'focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-ring/50',\n        className\n      )}\n      {...props}\n    >\n      <span className=\"flex items-center gap-3\">\n        {icon && (\n          <span className=\"shrink-0 text-foreground\" aria-hidden=\"true\">\n            {icon}\n          </span>\n        )}\n        {children}\n      </span>\n\n      {rightElement ??\n        (hasArrow && (\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n            <path\n              d=\"M6 4L10 8L6 12\"\n              stroke=\"currentColor\"\n              strokeWidth=\"1.5\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n            />\n          </svg>\n        ))}\n    </button>\n  );\n}\nexport {\n  McDrawer,\n  McDrawerPortal,\n  McDrawerOverlay,\n  McDrawerTrigger,\n  McDrawerClose,\n  McDrawerContent,\n  McDrawerHeader,\n  McDrawerFooter,\n  McDrawerTitle,\n  McDrawerDescription,\n  McDrawerNav,\n  McDrawerNavItem,\n};\n",
+      "type": "registry:component"
+    }
+  ],
+  "type": "registry:component"
+}
diff --git a/packages/web/public/r/registry.json b/packages/web/public/r/registry.json
index 0f967a2..9617e84 100644
--- a/packages/web/public/r/registry.json
+++ b/packages/web/public/r/registry.json
@@ -2545,6 +2545,19 @@
       ],
       "type": "registry:component"
     },
+    {
+      "name": "mc-drawer",
+      "title": "MicroClub Drawer",
+      "description": "A drawer component for MicroClub UI",
+      "dependencies": ["vaul"],
+      "files": [
+        {
+          "path": "registry/ui/mc-drawer.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "type": "registry:component"
+    },
     {
       "name": "mc-hover-card",
       "title": "MicroClub Hover Card",
diff --git a/packages/web/registry/examples/mc-drawer-demo.tsx b/packages/web/registry/examples/mc-drawer-demo.tsx
new file mode 100644
index 0000000..58d1773
--- /dev/null
+++ b/packages/web/registry/examples/mc-drawer-demo.tsx
@@ -0,0 +1,148 @@
+'use client';
+
+import { Moon } from 'lucide-react';
+import {
+  McDrawer,
+  McDrawerClose,
+  McDrawerContent,
+  McDrawerDescription,
+  McDrawerHeader,
+  McDrawerNav,
+  McDrawerNavItem,
+  McDrawerTitle,
+  McDrawerTrigger,
+} from '../ui/mc-drawer';
+
+const navItems = [
+  { label: 'Account', hasArrow: true },
+  { label: 'Socials', hasArrow: false },
+  { label: 'Settings', hasArrow: true },
+  { label: 'Help', hasArrow: true },
+  { label: 'Info', hasArrow: true },
+];
+
+function DesktopWithIcons() {
+  return (
+    <McDrawer direction="right">
+      <McDrawerTrigger className="inline-flex items-center justify-center rounded-full bg-primary px-5 py-3.5 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-ring/50">
+        Drawer — icons
+      </McDrawerTrigger>
+
+      <McDrawerContent>
+        <McDrawerTitle className="sr-only">Navigation — icons</McDrawerTitle>
+        <McDrawerNav />
+
+        <div className="flex flex-1 flex-col gap-0 overflow-y-auto px-0 pt-9">
+          <McDrawerNavItem icon={<Moon size={16} />} rightElement={<ToggleSwitch />}>
+            Dark mode
+          </McDrawerNavItem>
+
+          {navItems.map(({ label, hasArrow }) => (
+            <McDrawerNavItem key={label} icon={<Moon size={16} />} hasArrow={hasArrow}>
+              {label}
+            </McDrawerNavItem>
+          ))}
+        </div>
+      </McDrawerContent>
+    </McDrawer>
+  );
+}
+
+function DesktopNoIcons() {
+  return (
+    <McDrawer direction="right">
+      <McDrawerTrigger className="inline-flex items-center justify-center rounded-full bg-primary px-5 py-3.5 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-ring/50">
+        Drawer — no icons
+      </McDrawerTrigger>
+
+      <McDrawerContent>
+        <McDrawerTitle className="sr-only">Navigation — no icons</McDrawerTitle>
+        <McDrawerNav />
+
+        <div className="flex flex-1 flex-col gap-0 overflow-y-auto px-0 pt-9">
+          <McDrawerNavItem rightElement={<ToggleSwitch />}>Dark mode</McDrawerNavItem>
+
+          {navItems.map(({ label, hasArrow }) => (
+            <McDrawerNavItem key={label} hasArrow={hasArrow}>
+              {label}
+            </McDrawerNavItem>
+          ))}
+        </div>
+      </McDrawerContent>
+    </McDrawer>
+  );
+}
+
+function MobileSheet() {
+  return (
+    <McDrawer direction="bottom">
+      <McDrawerTrigger className="inline-flex items-center justify-center rounded-full bg-primary px-5 py-3.5 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-ring/50">
+        Drawer — mobile
+      </McDrawerTrigger>
+
+      <McDrawerContent>
+        <div className="flex flex-col gap-6 px-4 py-6">
+          <McDrawerHeader className="gap-2 p-0">
+            <McDrawerTitle>Edit profile</McDrawerTitle>
+            <McDrawerDescription>
+              Make changes to your profile here. Click save when you&apos;re done.
+            </McDrawerDescription>
+          </McDrawerHeader>
+
+          <div className="flex flex-col gap-4">
+            <div className="flex flex-col gap-1.5">
+              <label htmlFor="drawer-email" className="text-sm font-medium text-foreground">
+                Email
+              </label>
+              <input
+                id="drawer-email"
+                type="email"
+                defaultValue="m@example.com"
+                className="w-full rounded-lg border border-border bg-input px-4 py-3 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring"
+              />
+            </div>
+
+            <div className="flex flex-col gap-1.5">
+              <label htmlFor="drawer-username" className="text-sm font-medium text-foreground">
+                Username
+              </label>
+              <input
+                id="drawer-username"
+                type="text"
+                defaultValue="m@example.com"
+                className="w-full rounded-lg border border-border bg-input px-4 py-3 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring"
+              />
+            </div>
+          </div>
+
+          <McDrawerClose className="w-full rounded-lg bg-primary py-4 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-ring/50">
+            Save changes
+          </McDrawerClose>
+        </div>
+      </McDrawerContent>
+    </McDrawer>
+  );
+}
+
+export default function DrawerDemo() {
+  return (
+    <div className="flex flex-wrap gap-4">
+      <DesktopWithIcons />
+      <DesktopNoIcons />
+      <MobileSheet />
+    </div>
+  );
+}
+
+function ToggleSwitch() {
+  return (
+    <div
+      role="switch"
+      aria-checked="false"
+      tabIndex={0}
+      className="relative h-6 w-10 shrink-0 cursor-pointer rounded-full bg-muted focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-ring/50"
+    >
+      <span className="absolute left-1 top-1 h-4 w-4 rounded-full bg-background shadow-sm transition-transform" />
+    </div>
+  );
+}
diff --git a/packages/web/registry/registry-examples.ts b/packages/web/registry/registry-examples.ts
index 963eb51..8541a6e 100644
--- a/packages/web/registry/registry-examples.ts
+++ b/packages/web/registry/registry-examples.ts
@@ -393,6 +393,19 @@ export const examples: Registry['items'] = [
     ],
     registryDependencies: [`${REGISTRY_URL}/r/mc-avatar.json`],
   },
+  {
+    name: 'mc-drawer-demo',
+    type: 'registry:example',
+    title: 'MicroClub Drawer Demo',
+    description: 'Demo for MicroClub drawer',
+    files: [
+      {
+        path: 'examples/mc-drawer-demo.tsx',
+        type: 'registry:example',
+      },
+    ],
+    registryDependencies: [`${REGISTRY_URL}/r/mc-drawer.json`],
+  },
   {
     name: 'mc-hover-card-demo',
     type: 'registry:example',
diff --git a/packages/web/registry/registry-ui.ts b/packages/web/registry/registry-ui.ts
index c185a6c..1978a25 100644
--- a/packages/web/registry/registry-ui.ts
+++ b/packages/web/registry/registry-ui.ts
@@ -391,6 +391,19 @@ export const ui: Registry['items'] = [
     ],
     dependencies: ['@base-ui/react'],
   },
+  {
+    name: 'mc-drawer',
+    type: 'registry:component',
+    title: 'MicroClub Drawer',
+    description: 'A drawer component for MicroClub UI',
+    files: [
+      {
+        path: 'ui/mc-drawer.tsx',
+        type: 'registry:component',
+      },
+    ],
+    dependencies: ['vaul'],
+  },
   {
     name: 'mc-hover-card',
     type: 'registry:component',
@@ -404,7 +417,6 @@ export const ui: Registry['items'] = [
     ],
     dependencies: ['@base-ui/react'],
   },
-
   {
     name: 'mc-carousel',
     type: 'registry:component',
diff --git a/packages/web/registry/ui/mc-drawer.tsx b/packages/web/registry/ui/mc-drawer.tsx
new file mode 100644
index 0000000..5356450
--- /dev/null
+++ b/packages/web/registry/ui/mc-drawer.tsx
@@ -0,0 +1,228 @@
+'use client';
+import * as React from 'react';
+import { Drawer as McDrawerPrimitive } from 'vaul';
+import { cn } from '@/lib/utils';
+
+function McDrawer({ ...props }: React.ComponentProps<typeof McDrawerPrimitive.Root>) {
+  return <McDrawerPrimitive.Root data-slot="drawer" {...props} />;
+}
+
+function McDrawerTrigger({ ...props }: React.ComponentProps<typeof McDrawerPrimitive.Trigger>) {
+  return <McDrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />;
+}
+
+function McDrawerPortal({ ...props }: React.ComponentProps<typeof McDrawerPrimitive.Portal>) {
+  return <McDrawerPrimitive.Portal data-slot="drawer-portal" {...props} />;
+}
+
+function McDrawerClose({ ...props }: React.ComponentProps<typeof McDrawerPrimitive.Close>) {
+  return <McDrawerPrimitive.Close data-slot="drawer-close" {...props} />;
+}
+
+function McDrawerOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof McDrawerPrimitive.Overlay>) {
+  return (
+    <McDrawerPrimitive.Overlay
+      data-slot="drawer-overlay"
+      className={cn(
+        'fixed inset-0 z-50 bg-foreground/20',
+        'supports-backdrop-filter:backdrop-blur-xs',
+        'data-open:animate-in data-open:fade-in-0',
+        'data-closed:animate-out data-closed:fade-out-0',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function McDrawerContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof McDrawerPrimitive.Content>) {
+  return (
+    <McDrawerPortal>
+      <McDrawerOverlay />
+      <McDrawerPrimitive.Content
+        data-slot="drawer-content"
+        className={cn(
+          'group/drawer-content fixed z-50 flex flex-col',
+          'bg-popover text-popover-foreground',
+          'shadow-2xl',
+          'data-[vaul-drawer-direction=bottom]:inset-x-0',
+          'data-[vaul-drawer-direction=bottom]:bottom-0',
+          'data-[vaul-drawer-direction=bottom]:max-h-dvh',
+          'data-[vaul-drawer-direction=bottom]:rounded-t-2xl',
+          'data-[vaul-drawer-direction=bottom]:border',
+          'data-[vaul-drawer-direction=bottom]:border-border',
+          'data-[vaul-drawer-direction=top]:inset-x-0',
+          'data-[vaul-drawer-direction=top]:top-0',
+          'data-[vaul-drawer-direction=top]:max-h-dvh',
+          'data-[vaul-drawer-direction=top]:rounded-b-2xl',
+          'data-[vaul-drawer-direction=top]:border',
+          'data-[vaul-drawer-direction=top]:border-border',
+          'data-[vaul-drawer-direction=left]:inset-y-0',
+          'data-[vaul-drawer-direction=left]:left-0',
+          'data-[vaul-drawer-direction=left]:w-drawer',
+          'data-[vaul-drawer-direction=left]:max-w-full',
+          'data-[vaul-drawer-direction=left]:rounded-r-2xl',
+          'data-[vaul-drawer-direction=left]:border',
+          'data-[vaul-drawer-direction=left]:border-border',
+          'data-[vaul-drawer-direction=right]:inset-y-0',
+          'data-[vaul-drawer-direction=right]:right-0',
+          'data-[vaul-drawer-direction=right]:w-drawer',
+          'data-[vaul-drawer-direction=right]:max-w-full',
+          'data-[vaul-drawer-direction=right]:rounded-l-2xl',
+          'data-[vaul-drawer-direction=right]:border',
+          'data-[vaul-drawer-direction=right]:border-border',
+
+          className
+        )}
+        {...props}
+      >
+        <div className="mx-auto mt-4 hidden h-1 w-10 shrink-0 rounded-full bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block group-data-[vaul-drawer-direction=top]/drawer-content:block" />
+        {children}
+      </McDrawerPrimitive.Content>
+    </McDrawerPortal>
+  );
+}
+
+function McDrawerHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="drawer-header"
+      className={cn('flex flex-col gap-2 px-4 pt-0 pb-0', className)}
+      {...props}
+    />
+  );
+}
+
+function McDrawerFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="drawer-footer"
+      className={cn('mt-auto flex flex-col gap-2 p-4 pt-0', className)}
+      {...props}
+    />
+  );
+}
+
+function McDrawerTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof McDrawerPrimitive.Title>) {
+  return (
+    <McDrawerPrimitive.Title
+      data-slot="drawer-title"
+      className={cn('text-base font-semibold text-foreground leading-snug', className)}
+      {...props}
+    />
+  );
+}
+
+function McDrawerDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof McDrawerPrimitive.Description>) {
+  return (
+    <McDrawerPrimitive.Description
+      data-slot="drawer-description"
+      className={cn('text-sm text-muted-foreground leading-relaxed', className)}
+      {...props}
+    />
+  );
+}
+
+function McDrawerNav({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="drawer-nav"
+      className={cn('flex h-drawer-nav items-center gap-2 px-6 py-2.5', className)}
+      {...props}
+    >
+      <McDrawerClose
+        className="flex h-8 w-8 items-center justify-center rounded-md text-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-ring/50"
+        aria-label="Go back"
+      >
+        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true">
+          <path
+            d="M12.5 15L7.5 10L12.5 5"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      </McDrawerClose>
+    </div>
+  );
+}
+
+interface McDrawerNavItemProps extends React.ComponentProps<'button'> {
+  icon?: React.ReactNode;
+  hasArrow?: boolean;
+  rightElement?: React.ReactNode;
+}
+
+function McDrawerNavItem({
+  icon,
+  hasArrow = false,
+  rightElement,
+  children,
+  className,
+  ...props
+}: McDrawerNavItemProps) {
+  return (
+    <button
+      data-slot="drawer-nav-item"
+      className={cn(
+        'flex h-drawer-item w-full items-center justify-between rounded-xl',
+        'px-6 py-5',
+        'text-sm text-foreground',
+        'transition-colors hover:bg-accent hover:text-accent-foreground',
+        'focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-ring/50',
+        className
+      )}
+      {...props}
+    >
+      <span className="flex items-center gap-3">
+        {icon && (
+          <span className="shrink-0 text-foreground" aria-hidden="true">
+            {icon}
+          </span>
+        )}
+        {children}
+      </span>
+
+      {rightElement ??
+        (hasArrow && (
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+            <path
+              d="M6 4L10 8L6 12"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+        ))}
+    </button>
+  );
+}
+export {
+  McDrawer,
+  McDrawerPortal,
+  McDrawerOverlay,
+  McDrawerTrigger,
+  McDrawerClose,
+  McDrawerContent,
+  McDrawerHeader,
+  McDrawerFooter,
+  McDrawerTitle,
+  McDrawerDescription,
+  McDrawerNav,
+  McDrawerNavItem,
+};
diff --git a/packages/web/stories/McDrawer.stories.tsx b/packages/web/stories/McDrawer.stories.tsx
new file mode 100644
index 0000000..4c011b3
--- /dev/null
+++ b/packages/web/stories/McDrawer.stories.tsx
@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import {
+  McDrawer,
+  McDrawerClose,
+  McDrawerContent,
+  McDrawerDescription,
+  McDrawerHeader,
+  McDrawerTitle,
+  McDrawerTrigger,
+} from '@/registry/ui/mc-drawer';
+
+function DrawerDemo() {
+  return (
+    <div className="flex w-full items-center justify-center">
+      <McDrawer direction="right">
+        <McDrawerTrigger className="inline-flex items-center justify-center rounded-full bg-primary px-5 py-3.5 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90">
+          Open drawer
+        </McDrawerTrigger>
+        <McDrawerContent>
+          <McDrawerHeader>
+            <McDrawerTitle>Settings</McDrawerTitle>
+            <McDrawerDescription>Update your workspace preferences.</McDrawerDescription>
+          </McDrawerHeader>
+          <McDrawerClose className="w-full rounded-lg bg-primary py-4 text-sm font-medium text-primary-foreground">
+            Save
+          </McDrawerClose>
+        </McDrawerContent>
+      </McDrawer>
+    </div>
+  );
+}
+
+const meta: Meta<typeof DrawerDemo> = {
+  title: 'Components/McDrawer',
+  component: DrawerDemo,
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof DrawerDemo>;
+
+export const Default: Story = {};
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c1ca57c..8393b4f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -92,6 +92,9 @@ importers:
       tailwind-merge:
         specifier: ^3.5.0
         version: 3.5.0
+      vaul:
+        specifier: ^1.1.2
+        version: 1.1.2(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
     devDependencies:
       '@storybook/nextjs':
         specifier: ^10.4.1
@@ -6644,6 +6647,7 @@ packages:
   tsconfck@3.1.6:
     resolution: {integrity: sha512-ks6Vjr/jEw0P1gmOVwutM3B7fWxoWBL2KRDb1JfqGVawBmO5UsvmWOQFGHBPl5yxYz4eERr19E6L7NMv+Fej4w==}
     engines: {node: ^18 || >=20}
+    deprecated: unmaintained
     hasBin: true
     peerDependencies:
       typescript: ^5.0.0
@@ -6844,6 +6848,12 @@ packages:
     resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
     engines: {node: '>= 0.8'}
 
+  vaul@1.1.2:
+    resolution: {integrity: sha512-ZFkClGpWyI2WUQjdLJ/BaGuV6AVQiJ3uELGk3OYtP+B6yCO7Cmn9vPFXVJkRaGkOJu3m8bQMgtyzNHixULceQA==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc
+
   vfile-location@5.0.3:
     resolution: {integrity: sha512-5yXvWDEgqeiYiBe1lbxYF7UMAIm/IcopxMHrMQDq3nvKcjPKIhZklUKL+AE7J7uApI4kwe2snsK+eI6UTj9EHg==}
 
@@ -14603,6 +14613,15 @@ snapshots:
 
   vary@1.1.2: {}
 
+  vaul@1.1.2(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5):
+    dependencies:
+      '@radix-ui/react-dialog': 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+      react: 19.2.5
+      react-dom: 19.2.5(react@19.2.5)
+    transitivePeerDependencies:
+      - '@types/react'
+      - '@types/react-dom'
+
   vfile-location@5.0.3:
     dependencies:
       '@types/unist': 3.0.3