Modal Cards

Cards that expand into full-screen modals

modal-cards-tw

Rose balance

Amber loop

Fuchsia wave

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""

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