Modal
An accessible dialog component built on Radix UI Dialog. Supports multiple sizes, positions, and animation effects with a structured content layout.
Installation
Install the following dependencies
Run these commands in your terminal to install the required packages
Create or update your Modal component
Copy this code to create your Modal component
Test Your Component
- 1. Add the component to a test page
- 2. Check all props and variants work as expected
- 3. Verify responsive behavior
- 4. Test with different content/data
- 5. Ensure accessibility features work correctly
Sizes
Modal components come in various sizes to accommodate different content needs, from extra small (xs) to full screen.
Positions
Modal components can be positioned at the top, center, or bottom of the screen to best fit your interface design.
Animations
Modal components support different animation styles when opening and closing, including scale, slide, and fade effects.
API Reference
The Modal component is built on top of the Radix UI Dialog primitive and extends its functionality with additional animation options, sizing, and positioning features.
Modal.Root
The container component that provides the main modal functionality.
See Radix UI docs for base props.
| Prop | Type | Default | Description |
|---|---|---|---|
open | "boolean" | "undefined" | The controlled open state of the modal. |
onOpenChange | "function" | "undefined" | Event handler called when the open state of the modal changes. |
defaultOpen | "boolean" | "false" | The open state of the modal when it is initially rendered. |
Modal.Content
The component that contains the modal content and handles animations, positioning, and sizing.
See Radix UI docs for base props.
| Prop | Type | Default | Description |
|---|---|---|---|
open | "boolean" | "false" | The controlled open state of the modal content. |
animation | "scale""slideDown""slideUp""fade" | "scale" | The animation style to use when opening and closing the modal. |
size | "xs""sm""md""lg""full" | "md" | The size of the modal. |
position | "top""center""bottom" | "center" | The position of the modal on the screen. |
showCloseButton | "boolean" | "false" | Whether to show a close button in the top-right corner of the modal. |
className | "string" | "undefined" | Additional CSS classes to apply to the modal content. |
Modal.Header
The header section of the modal, typically containing a title and description.
| Prop | Type | Default | Description |
|---|---|---|---|
className | "string" | "undefined" | Additional CSS classes to apply to the header. |
Modal.Body
The main content area of the modal with automatic overflow handling.
| Prop | Type | Default | Description |
|---|---|---|---|
className | "string" | "undefined" | Additional CSS classes to apply to the body. |
Modal.Footer
The footer section of the modal, typically containing action buttons.
| Prop | Type | Default | Description |
|---|---|---|---|
className | "string" | "undefined" | Additional CSS classes to apply to the footer. |
Modal.Title
The title component for the modal header.
See Radix UI docs for base props.
| Prop | Type | Default | Description |
|---|---|---|---|
className | "string" | "undefined" | Additional CSS classes to apply to the title. |
Modal.Description
The description component for the modal header.
See Radix UI docs for base props.
| Prop | Type | Default | Description |
|---|---|---|---|
className | "string" | "undefined" | Additional CSS classes to apply to the description. |