Drawer

Sliding panel with a glass surface and square edges. Ideal for config sidebars and mobile-first interactions.

Drawer component

Quick actions
Drawer content inherits the same zero-radius look with mono title.

Installation

pnpm dlx shadcn@latest add @omni/drawer

Usage

import {
  Drawer,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer"
<Drawer>
  <DrawerTrigger>Open</DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>PROJECT</DrawerTitle>
      <DrawerDescription>Update project settings.</DrawerDescription>
    </DrawerHeader>
    <DrawerFooter>
      <Button variant="muted">Cancel</Button>
      <Button>Save</Button>
    </DrawerFooter>
  </DrawerContent>
</Drawer>