DUModal
FeedbackAccessible dialog with size and header tones.
import { DUModal, DUButton } from 'deri-ui';Live preview
typescript
<DUModal open={open} onClose={close} title="Edit" footer={<DUButton>Save</DUButton>}>Body</DUModal>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| open | boolean | — | Visibility |
| onClose | () => void | — | Close handler |
| variant | basic | centered | large | static | success | warning | custom | — | Style |
| radius | DURadius | 'md' | Corner radius |
| footer | ReactNode | — | Footer slot |
Usage
import { DUModal, DUButton } from 'deri-ui';
<DUModal open={open} onClose={close} title="Edit" footer={<DUButton>Save</DUButton>}>Body</DUModal>Customize with className, radius, and Tailwind utilities. Theme tokens come from deri-ui/tailwind.preset.
© 2026 Deri Ui. Developed by Deribew Shimelis. Copy and use the code freely in your projects.