DUDrawer
LayoutSide/top/bottom sheet with slide, fade, or scale transitions, variants, and responsive mobile sheet.
import { DUDrawer, DUSheet } from 'deri-ui';Live preview
Side
Transition
Variant
typescript
<DUDrawer
open={open}
onClose={close}
title="Filters"
side="right"
transition="slide"
variant="elevated"
size="md"
>
Drawer body
</DUDrawer>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| side | 'left' | 'right' | 'top' | 'bottom' | 'right' | Anchor edge |
| transition | 'slide' | 'fade' | 'scale' | 'slide' | Enter/exit motion |
| variant | 'default' | 'elevated' | 'bordered' | 'glass' | 'soft' | 'default' | Chrome style |
| size | 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'md' | Width/height token |
| responsiveSheet | boolean | true | Side drawers become bottom sheets on mobile |
| duration | number | 280 | Animation ms |
| open / onClose / title / footer / children | mixed | — | Core API |
Usage
import { DUDrawer, DUSheet } from 'deri-ui';
<DUDrawer
open={open}
onClose={close}
title="Filters"
side="right"
transition="slide"
variant="elevated"
size="md"
>
Drawer body
</DUDrawer>Customize with className, radius, and Tailwind utilities. Theme tokens come from deri-ui/tailwind.preset.
Related
© 2026 Deri Ui. Developed by Deribew Shimelis. Copy and use the code freely in your projects.