Components
Drawer
Drawer overlay.
Use Drawer to slide a panel in from any direction.
import { Drawer, DrawerTrigger, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription } from '@tile-ui/react';
export default function DrawerDemo() {
return (
<Drawer direction="right">
<DrawerTrigger className="component-preview__action">Open drawer</DrawerTrigger>Registry install
pnpm dlx shadcn@latest add @tile-ui/drawerPackage usage
import { Drawer, DrawerTrigger, DrawerContent, DrawerTitle, DrawerDescription } from '@tile-ui/react';
<Drawer direction="right">
<DrawerTrigger>Open</DrawerTrigger>
<DrawerContent>
<DrawerTitle>Title</DrawerTitle>
<DrawerDescription>Description.</DrawerDescription>
</DrawerContent>
</Drawer>Highlights
- Four directions
- Modal and non-modal
- Trigger, overlay, and content
Registry dependencies
| Item | Purpose |
|---|---|
drawer | Component source and module styles |
core | Framework-agnostic logic helpers |
styles | Shared SCSS tokens and globals |
API reference
Drawer
| Prop | Type | Default |
|---|---|---|
direction | 'top' | 'bottom' | 'left' | 'right' | — |
modal | boolean | — |
open | boolean | — |
defaultOpen | boolean | — |
onOpenChange | (open: boolean) => void | — |