Wensity

Drawer

Gesture-driven drawers with velocity dismissal, snap points, drag handles, and support for every side of the screen.

drawerbottom sheetdragsnapmobileoverlay
Loading preview

Examples

Practical examples and common states for the same installable component.

Bottom

Default mobile checkout and action drawer.

examples/drawer-bottom.tsx
import { Drawer, DrawerContent, DrawerTrigger } from "@/components/wensity/drawer";


export function BottomDrawer() {
  return (
    <Drawer>
      <DrawerTrigger>Checkout</DrawerTrigger>
      <DrawerContent title="Order summary" />
    </Drawer>
  );
}

Left

Horizontal slide-in from the left with drag dismiss.

examples/drawer-left.tsx
import { Drawer, DrawerContent, DrawerTrigger } from "@/components/wensity/drawer";


export function LeftDrawer() {
  return (
    <Drawer side="left">
      <DrawerTrigger>Locations</DrawerTrigger>
      <DrawerContent title="Nearby" />
    </Drawer>
  );
}

Right

Cart and billing panels from the right edge.

examples/drawer-right.tsx
import { Drawer, DrawerContent, DrawerTrigger } from "@/components/wensity/drawer";


export function RightDrawer() {
  return (
    <Drawer side="right">
      <DrawerTrigger>Billing</DrawerTrigger>
      <DrawerContent title="Payment method" />
    </Drawer>
  );
}

Snap points

Drag between viewport-height snap points (35%, 65%, full).

examples/drawer-snap-points.tsx
import {
  Drawer,
  DrawerContent,
  DrawerSnapPanel,
  DrawerTrigger,
} from "@/components/wensity/drawer";


export function SnapDrawer() {
  return (
    <Drawer snapPoints={[0.35, 0.65, 1]}>
      <DrawerTrigger>Track shipment</DrawerTrigger>
      <DrawerContent title="Delivery status">
        <DrawerSnapPanel>Step 1 content</DrawerSnapPanel>
        <DrawerSnapPanel>Step 2 content</DrawerSnapPanel>
        <DrawerSnapPanel>Step 3 content</DrawerSnapPanel>
      </DrawerContent>
    </Drawer>
  );
}

Fullscreen

Immersive full-viewport drawer for share flows.

examples/drawer-fullscreen.tsx
import { Drawer, DrawerContent, DrawerTrigger } from "@/components/wensity/drawer";


export function FullscreenDrawer() {
  return (
    <Drawer side="fullscreen">
      <DrawerTrigger>Share</DrawerTrigger>
      <DrawerContent title="Share link" />
    </Drawer>
  );
}

Props

PropTypeDefaultDescription
side"bottom" | "top" | "left" | "right" | "fullscreen""bottom"Edge the drawer enters from, and the swipe axis that dismisses it.
openboolean-Controlled open state.
onOpenChange(open: boolean) => void-Called when the drawer opens or closes.
modalbooleantrueTraps focus and blocks interaction with the page behind.