Loading...
Overlay that appears on top of the main content to display important information or prompt user interaction. It prevents interaction with the rest of the application while active, ensuring user focus on a specific task. Suitable for general-purpose overlays and non-destructive interactions such as forms, previews, or feature walkthroughs.
Supports modal and non-modal modes
Focus is automatically trapped within modal
Can be controlled or uncontrolled
Manages screen reader announcements
Keyboard support
Animated with Motion
Respects reduce motion via system settings and props
Built with:
Each animation comes with predefined transitionPreset
Alternatively, you can choose transition from this list:
defaultanticipatequickOutovershootOutswiftOutsnappyOutinOutinQuadinCubicinQuartinQuintinExpoinCircoutQuadoutCubicoutQuartoutQuintoutExpooutCircinOutQuadinOutCubicinOutQuartinOutQuintinOutExpoinOutCircinOutBaseinoutlinearAdditionaly, you can control the duration of the transition:
Support all Root Radix API
Support all Trigger Radix API
| Prop | Type | Default |
|---|---|---|
showCloseButton | boolean | true |
animation | AnimationProps | ― |
animationPreset | enum | "motion" |
transition | Transition | ― |
transitionPreset | enumTransitionPreset | ― |
reduceMotion | boolean | false |
Support all Title Radix API
Support all Description Radix API
Support all Close Radix API