║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Expandable Card description: A linear inspired drawer modal with expansion animation

<ComponentPreview name="expandable-card-demo" />

Installation

<InstallationTabs> <InstallationTabsList> <InstallationTabsTrigger value="cli">CLI</InstallationTabsTrigger> </InstallationTabsList> <InstallationTabsContent value="cli"> <CodeBlockTabs> <CodeBlockTabsList> <CodeBlockTabsTrigger value="npm">npm</CodeBlockTabsTrigger> <CodeBlockTabsTrigger value="pnpm">pnpm</CodeBlockTabsTrigger> </CodeBlockTabsList> <CodeBlockTab value="npm">

npx shadcn@latest add @roiui/expandable-card

npx shadcn@latest add @roiui/expandable-card-tailwind

</CodeBlockTab> <CodeBlockTab value="pnpm">

pnpm dlx shadcn@latest add @roiui/expandable-card

pnpm dlx shadcn@latest add @roiui/expandable-card-tailwind

</CodeBlockTab> </CodeBlockTabs> </InstallationTabsContent> </InstallationTabs>

Props

ExpandableCard

<PropTable data={[ { prop: "item", type: "ExpandableCardItem", description: "The item to display as an expandable card", }, ]} />

ExpandableCardItem

<PropTable data={[ { prop: "id", type: "string | number", description: "Unique identifier for the card item", }, { prop: "imageSrc", type: "string", description: "Image source URL for the card", }, { prop: "alt", type: "string", description: "Alternative text for the image", }, { prop: "cardHeading", type: "string", description: "The heading text displayed on the card", }, { prop: "content", type: "ReactNode", description: "Optional content to display when the card is expanded in modal view", }, ]} />

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║