Expandable Card
Cards that expand into full detail views with shared layout animations.
Preview
Expandable Card
Interactive preview — import this component to see it in action
IO Context
Where IO uses this
Team member profiles, project showcases, and feature deep-dives.
Why this component matters
Context over decoration. Expandable cards show the right amount of information at each level of engagement.
Usage guidance
Use for content that has both a preview and a detail state. Keep the collapsed state to title + image + one-liner. The expanded state can include full descriptions.
Installation
bash
npx shadcn@latest add @aceternity/expandable-cardUsage
example.tsxtsx
import { ExpandableCard } from "@/components/ui/expandable-card";
export default function Example() {
return (
<ExpandableCard>
{/* Your content here */}
</ExpandableCard>
);
}Source
expandable-card.tsx
components/ui/expandable-card.tsx