Drawer

Displays supplementary content in a panel that slides from the edge.

Installation

Install Drawer from Oros with shadcn CLI 4.13.0.

pnpm dlx shadcn@4.13.0 add @oros/drawer

Usage

import {
  Drawer,
  DrawerPortal,
  DrawerOverlay,
  DrawerSwipeHandle,
  DrawerTrigger,
  DrawerClose,
} from "@/components/ui/drawer"

Open the Source tab in the preview for a complete working example.

Anatomy

Export	Responsibility
Drawer	The root component that owns the primary structure and state.
DrawerPortal	Moves overlay content to a stable document layer.
DrawerOverlay	Covers background content while an overlay is active.
DrawerSwipeHandle	A composable part of the component anatomy.
DrawerTrigger	Controls opening, selection, or disclosure behavior.
DrawerClose	Closes the current overlay or disclosure.
DrawerContent	Contains the primary visible content.
DrawerHeader	Groups heading and introductory content.
DrawerFooter	Groups supporting actions or metadata.
DrawerTitle	Provides the visible heading for the current region.
DrawerDescription	Provides supporting context for the current region.

API Reference

Drawer exports 11 named entries. Component exports accept the props of their underlying HTML element or Base UI component, plus an optional className, unless the source defines a more focused type.

Drawer Component
DrawerPortal Component
DrawerOverlay Component
DrawerSwipeHandle Component
DrawerTrigger Component
DrawerClose Component
DrawerContent Component
DrawerHeader Component
DrawerFooter Component
DrawerTitle Component
DrawerDescription Component

Accessibility

Drawer inherits focus management and keyboard support from Base UI; keep the provided trigger and content parts together.
Give icon-only triggers an accessible name, retain visible focus styles, and verify Escape and focus-return behavior in the final composition.

Source

Drawer uses the standard shadcn API and is distributed through Oros. Installing it adds the component source and required dependencies to your app. The Source tab above shows a complete usage example.

Direction Dropdown Menu