Modal Cards
modal-cards-tw
Mountain Vista
Ocean Waves
Forest Path
Customize
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 |