Modal Cards

Expandable cards that open into full-screen modals

modal-cards-tw

Mountain Vista

Ocean Waves

Forest Path

Customize

Tweak the props live

Animation

Animation Speed

Animation Variant

Modal Behavior

Close on Backdrop Click

Close on Escape

Appearance

Show 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)

Default:defaultCards

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)

Default:undefined

springDampingnumber

Override spring damping for animations (affects smoothness)

Default:undefined

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

Animation variant for modal entry (scale uses layoutId morphing)

Default:"scale"

closeOnBackdropClickboolean

Close modal when clicking the backdrop

Default:true

closeOnEscapeboolean

Close modal when pressing the Escape key

Default:true

showCloseButtonboolean

Show close button (×) in the modal

Default:true

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