Modal
A customizable popup or overlay for displaying important content, forms, or dialogs without leaving the current page—supports sizes, colors, shadows, and animations.
Feature
- Various variants:
popup,drawer, anddialog - Adjustable size, color, and position for different use cases
- Multiple animation options for transitions (e.g., scale, fade, slide)
- Overlay color customization for better visibility and focus
- Configurable border radius and shadow effects
Colors
Sizes
Radius
Shadow
Border
Animation
Overlay Colors
Examples
Overlay Colors
Prop
| Prop | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | — | The content of the modal (can include text, forms, or other components). |
| color | `"base" | "primary" | "secondary" |
| size | `"sm" | "md" | "lg" |
| radius | `"none" | "sm" | "md" |
| shadow | `"none" | "sm" | "md" |
| isOpen | boolean | — | Whether the modal is open or not (controlled externally). |
| onOpenChange | (open: boolean) => void | — | A callback function to handle modal state change when it is opened or closed. |
| variant | `"popup" | "drawer" | "dialog"` |
| position | `"center" | "top" | "right" |
| overlayColor | `"dark" | "light" | "none"` |
| animation | `"scale" | "fade" | "slide" |
Input
A flexible and fully customizable `Input` component for forms and UI fields. Supports different visual **variants**, **colors**, **sizes**, **rounded corners**, labels, and layout customizations.
ToggleSwitch
A customizable switch for toggling between two states (on/off), with options for size, color, and optional labels.