Offcanvas

Translucent side drawer panels anchored to screen edges, built using Radix UI dialogues.

Preview & Interactive Laboratory

Interactive Drawers

Usage & Implementation

import {
  Offcanvas,
  OffcanvasContent,
  OffcanvasHeader,
  OffcanvasTitle,
  OffcanvasTrigger
} from "@/components/ui/offcanvas"

<Offcanvas>
  <OffcanvasTrigger asChild>
    <Button>Open Drawer</Button>
  </OffcanvasTrigger>
  <OffcanvasContent side="right">
    <OffcanvasHeader>
      <OffcanvasTitle>Drawer Content</OffcanvasTitle>
    </OffcanvasHeader>
  </OffcanvasContent>
</Offcanvas>
React / Tailwind

Granular Customization

1

Offcanvas Frame

Configures parent size limits, animations, or close actions.

className={`className`}
2

Direction side

Configures screen corner attachment edge.

className={`side='left' | 'right' | 'top' | 'bottom'`}

API Reference (Props)

PropTypeDefaultDescription
side'left' | 'right' | 'top' | 'bottom''right'Screen anchoring location side.