Components

Drawer

A panel that slides in from the edge of the screen.

example.tsx

Import

tsx

import {
  AppDrawer,
  AppDrawerPortal,
  AppDrawerOverlay,
  AppDrawerTrigger,
  AppDrawerClose,
  AppDrawerContent,
  AppDrawerHeader,
  AppDrawerFooter,
  AppDrawerTitle,
  AppDrawerDescription,
} from "@/components/primitives/AppDrawer"

API Reference

AppDrawer extends all native <div> HTML attributes.

Prop	Type	Default	Description
open	boolean	—	Controlled open state of the drawer.
onOpenChange	(open: boolean) => void	—	Callback fired when the open state changes.
className	string	—	Additional Tailwind classes merged via cn(). Applied after variant classes, so it always wins.

Source

src/components/primitives/AppDrawer.tsx

import {
  Drawer,
  DrawerPortal,
  DrawerOverlay,
  DrawerTrigger,
  DrawerClose,
  DrawerContent,
  DrawerHeader,
  DrawerFooter,
  DrawerTitle,
  DrawerDescription,
} from "../ui/drawer"

const AppDrawer = Drawer
const AppDrawerPortal = DrawerPortal
const AppDrawerOverlay = DrawerOverlay
const AppDrawerTrigger = DrawerTrigger
const AppDrawerClose = DrawerClose
const AppDrawerContent = DrawerContent
const AppDrawerHeader = DrawerHeader
const AppDrawerFooter = DrawerFooter
const AppDrawerTitle = DrawerTitle
const AppDrawerDescription = DrawerDescription

export {
  AppDrawer,
  AppDrawerPortal,
  AppDrawerOverlay,
  AppDrawerTrigger,
  AppDrawerClose,
  AppDrawerContent,
  AppDrawerHeader,
  AppDrawerFooter,
  AppDrawerTitle,
  AppDrawerDescription,
}