Expandable Card

A modern, animated React component that displays a set of cards; clicking a card expands it smoothly into a modal with more details and a nice blur overlay. Perfect for showcasing detailed collections, product features, SaaS integrations, or informational cards in a sleek design—heavily powered by motion.dev.

Live Preview

Installation

Install the ExpandableCard component using the recommended CLI, or copy/paste the implementation into your codebase:

typescript-icon
1npx shadcn@latest add http://localhost:3000/r/expendable-card.json

Import

To use the ExpandableCard component, import it in your code:

typescript-icon
1import ExpandableCard from '@/components/ExpandableCard';

Props

PropTypeDefaultDescriptionRequired
---This component does **not** accept any props. To customize cards/content, edit the array and markup inside the file.No

Example usage

Basic Example

typescript-icon
1<ExpandableCard />

Features

  • Animated expansion: Click a card to expand it to a modal with smooth layout transitions.
  • Backdrop/blur overlay: Modal pops over a blurred, click-to-dismiss background.
  • Motion-powered: Leverages motion.dev for buttery-smooth transitions.
  • No props/manual content: Customization is done by editing the component directly (the array and JSX markup).

Customization

  • Edit the cards array to change cards, logos, and descriptions.
  • You can adjust appearance, animation, and modal layout in the JSX.
  • Change logo URLs, add or remove card entries as you wish.
  • Tweak Tailwind classes for appearance, sizing, and spacing.

Troubleshooting

  • Requires motion.dev for animation.
  • If you use remote images, ensure your Next.js image config allows the domains.
  • If cards or modal don't match your needs, customize the demo array and markup.
  • Card array and content are in the component file—no props for customization.