Expandable Cards

Interactive card layout where hovered cards expand smoothly for focused content viewing.

Installation

npx shadcn@latest add @scrollxui/expandable-cards

import ExpandableCards from '@/components/ui/expandable-cards';

<div className='h-25 sm:h-75 w-full select-none'>
  <ExpandableCards cards={cards} defaultExpanded={3} />
</div>

Interactive card layout where hovered cards expand smoothly for focused content viewing.

Property	Type	Default	Description
`cards`	ExpandableCard[]	`required`	Array of card objects, each containing an id and JSX content.
`defaultExpanded`	number	`1`	ID of the card that should be expanded initially.
`className`	string	`—`	Optional additional class for custom styling of the container.