Left or right modal drawer; Sheet names are exact aliases.
@combric/react · v1.1.1 · Current
import { Drawer, DrawerTrigger, DrawerContent, DrawerTitle, DrawerDescription, DrawerClose, Sheet, SheetTrigger, SheetContent, SheetTitle, SheetDescription, SheetClose } from "@combric/react";Load the native stylesheet with @import "@combric/react/css";. This path does not require Tailwind.
import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerTitle, DrawerTrigger } from "@combric/react";
export function Example() {
return <Drawer><DrawerTrigger>Filters</DrawerTrigger><DrawerContent side="right"><DrawerTitle>Filters</DrawerTitle><DrawerDescription>Limit visible results.</DrawerDescription><DrawerClose>Done</DrawerClose></DrawerContent></Drawer>;
}import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerTitle, DrawerTrigger } from "@combric/react";
export function Example() {
return <Drawer><DrawerTrigger>Project details</DrawerTrigger><DrawerContent side="left"><DrawerTitle>Project details</DrawerTitle><DrawerDescription>Review project metadata.</DrawerDescription><DrawerClose>Close</DrawerClose></DrawerContent></Drawer>;
}| Name |
|---|
Drawer |
DrawerTrigger |
DrawerContent |
DrawerTitle |
DrawerDescription |
DrawerClose |
Sheet |
SheetTrigger |
SheetContent |
SheetTitle |
SheetDescription |
SheetClose |
| Property / capability | Published contract |
|---|---|
| side | left | right |
| Contract | Dialog-compatible open state and portal contract |
| Alias | Canonical export |
|---|---|
Sheet | Drawer |
SheetTrigger | DrawerTrigger |
SheetContent | DrawerContent |
SheetTitle | DrawerTitle |
SheetDescription | DrawerDescription |
SheetClose | DrawerClose |
Reuses Dialog modal isolation, focus trap, dismissal, naming, and restoration behavior.
Tab/Shift+Tab cycle; Escape closes and restores trigger focus.
Combric classes and canonical --combric-* variables provide the package presentation. Consumer className extends the required class; it does not replace the component contract.