Expandable Card
A card component that expands into a modal to reveal more content with smooth animations.
"use client";
import { ExpandableCard, type ExpandableCardItem } from "@/components/ui/expandable-card/expandable-card";
import styles from "./expandable-card-demo.module.css";
const item: ExpandableCardItem = {
id: 1,
imageSrc: "/p-01.svg",
cardHeading: "Eudaimonia",
alt: "Figure contemplating under an archway at dusk",
content: (
<div className={styles.content}>
<p>
Aristotle taught that eudaimonia, or human flourishing, is not found in fleeting pleasures or material wealth,
but in living a life of virtue and purpose. It is the highest good, achieved through the cultivation of
character and the exercise of reason.
</p>
<p>
We build not for momentary delight, but for lasting excellence. Every interface, every interaction is an
opportunity to help users flourish in their work and creative pursuits.
</p>
</div>
),
};
export default function ExpandableCardDemo() {
return <ExpandableCard item={item} />;
}
npx shadcn@latest add @roiui/expandable-cardnpx shadcn@latest add @roiui/expandable-card-tailwindComponent props
Prop
Type
Default
Name
itemDescription
The item data for the expandable card
Type
ExpandableCardItemDefault
-
Name
classNameDescription
Additional CSS classes to apply to the wrapper
Type
stringDefault
-
Component props
Prop
Type
Default
Name
idDescription
Unique identifier for the card (used for layout animations)
Type
string | numberDefault
-
Name
imageSrcDescription
Source URL for the card image
Type
stringDefault
-
Name
altDescription
Alt text for the card image
Type
stringDefault
-
Name
cardHeadingDescription
The heading text displayed on the card
Type
stringDefault
-
Name
contentDescription
The content to display when the card is expanded
Type
ReactNodeDefault
-