Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProA card that morphs into a dialog with shared-layout motion, with focus trapping, Escape and focus return from Radix Dialog.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Repeat the media, title and subtitle in both the trigger and the content. Parts with the same role share a Motion layoutId, so they travel from the card into the dialog.
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | - | Open state when controlled. |
defaultOpen | boolean | false | Open state on first render when uncontrolled. |
onOpenChange | (open: boolean) => void | - | Called when the card opens or closes. |
transition | Transition | spring | Motion transition for the morph. |
The collapsed card, rendered as a button. Accepts motion.button props. Because it is a button, put only phrasing content inside (spans); the shared parts render as spans here automatically.
| Prop | Type | Default | Description |
|---|---|---|---|
showCloseButton | boolean | true | Show the close button in the corner. |
closeLabel | string | "Close" | Accessible name of the close button. |
Accepts motion.div props. The content scrolls when it is taller than the viewport.
Shared parts. Inside the dialog the title renders as an h2 and labels the dialog.
Content that exists only in the dialog. It fades in after the morph.
ExpandableCardTitle, so always include one inside the content.MotionConfig reducedMotion="user"), the morph and slide are skipped and only opacity fades remain.