Wensity

Drawer

Mobile drawers with snap points, drag handles, and side layouts.

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

Swipe or use arrow keys between horizontal panels with animated dot indicators.

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>
  );
}