Modal Cards

Expandable cards that open into full-screen modals

modal-cards-tw

Mountain Vista

Ocean Waves

Forest Path

Customize

Close on Backdrop ClickClose on EscapeShow Close Button

Props

Name	Type	Default	Description
`cards`	CardData[]	`defaultCards`	Array of card data to display (id, imageUrl, title, description, gradientColor)
`className`	string	`""`	Additional CSS classes for the container
`gradientColor`	string	`"#6366f1"`	Default gradient color for all cards (can be overridden per card)
`animationSpeed`	"slow" \| "normal" \| "fast" \| "none"	`"normal"`	Animation speed preset controlling all animation timings
`springStiffness`	number	`undefined`	Override spring stiffness for animations (affects bounce/snap)
`springDamping`	number	`undefined`	Override spring damping for animations (affects smoothness)
`animationVariant`	"scale" \| "fade" \| "slide"	`"scale"`	Animation variant for modal entry (scale uses layoutId morphing)
`closeOnBackdropClick`	boolean	`true`	Close modal when clicking the backdrop
`closeOnEscape`	boolean	`true`	Close modal when pressing the Escape key
`showCloseButton`	boolean	`true`	Show close button (×) in the modal
`ariaLabel`	string	`"Card details modal"`	Aria label for modal accessibility
`backdropGradientPosition`	string	`"50% 10%"`	Position of backdrop radial gradient center
`modalClassName`	string	`""`	Custom CSS classes for the modal container
`backdropClassName`	string	`""`	Custom CSS classes for the backdrop

cardsCardData[]

Array of card data to display (id, imageUrl, title, description, gradientColor)

DefaultdefaultCards

classNamestring

Additional CSS classes for the container

Default""

gradientColorstring

Default gradient color for all cards (can be overridden per card)

Default"#6366f1"

animationSpeed"slow" | "normal" | "fast" | "none"

Animation speed preset controlling all animation timings

Default"normal"

springStiffnessnumber

Override spring stiffness for animations (affects bounce/snap)

Defaultundefined

springDampingnumber

Override spring damping for animations (affects smoothness)

Defaultundefined

animationVariant"scale" | "fade" | "slide"

Animation variant for modal entry (scale uses layoutId morphing)

Default"scale"

closeOnBackdropClickboolean

Close modal when clicking the backdrop

Defaulttrue

closeOnEscapeboolean

Close modal when pressing the Escape key

Defaulttrue

showCloseButtonboolean

Show close button (×) in the modal

Defaulttrue

ariaLabelstring

Aria label for modal accessibility

Default"Card details modal"

backdropGradientPositionstring

Position of backdrop radial gradient center

Default"50% 10%"

modalClassNamestring

Custom CSS classes for the modal container

Default""

backdropClassNamestring

Custom CSS classes for the backdrop

Default""