Expandable Cards

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

Installation

npx shadcn@latest add https://scrollxui.dev/registry/expandable-cards.json

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

<div className="h-[100px] sm:h-[300px] 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.