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

---

title: Card description: A versatile card component with header, content, footer, and image support

<ComponentPreview name="card-demo" />

Installation

<InstallationTabs> <InstallationTabsList> <InstallationTabsTrigger value="cli">CLI</InstallationTabsTrigger> <InstallationTabsTrigger value="manual">Manual</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/card

npx shadcn@latest add @roiui/card-tailwind

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

pnpm dlx shadcn@latest add @roiui/card

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

</CodeBlockTab> </CodeBlockTabs> </InstallationTabsContent> <InstallationTabsContent value="manual" data-manual="true">

Copy and paste the following files:

<ComponentSource name="card" />

</InstallationTabsContent> </InstallationTabs>

Anatomy

<CodeBlock filename="anatomy" language="tsx" code={<Card> <CardHeader> <CardTitle /> <CardAction /> <CardDescription /> </CardHeader> <CardContent /> <CardFooter /> </Card> }

/>

Props

Card

<PropTable data={[ { prop: "variant", type: '"default" | "lift"', default: '"default"', description: "Visual style variant of the card - lift adds hover elevation effects", }, { prop: "className", type: "string", description: "Additional CSS classes to apply to the card", }, { prop: "children", type: "ReactNode", description: "The content to display inside the card", }, ]} />

Header

<PropTable data={[ { prop: "className", type: "string", description: "Additional CSS classes to apply to the card header", }, { prop: "children", type: "ReactNode", description: "Content for the card header section", }, ]} />

Title

<PropTable data={[ { prop: "className", type: "string", description: "Additional CSS classes to apply to the card title", }, { prop: "children", type: "ReactNode", description: "The title content to display", }, ]} />

Description

<PropTable data={[ { prop: "className", type: "string", description: "Additional CSS classes to apply to the card description", }, { prop: "children", type: "ReactNode", description: "The description content to display", }, ]} />

Content

<PropTable data={[ { prop: "className", type: "string", description: "Additional CSS classes to apply to the card content", }, { prop: "children", type: "ReactNode", description: "The main content of the card", }, ]} />

Footer

<PropTable data={[ { prop: "className", type: "string", description: "Additional CSS classes to apply to the card footer", }, { prop: "children", type: "ReactNode", description: "Content for the card footer section", }, ]} />

Image

<PropTable data={[ { prop: "src", type: "string", description: "The source URL of the image", }, { prop: "alt", type: "string", description: "Alternative text for the image", }, { prop: "className", type: "string", description: "Additional CSS classes to apply to the image", }, { prop: "children", type: "ReactNode", description: "Optional content to overlay on the image", }, ]} />

Icon

<PropTable data={[ { prop: "className", type: "string", description: "Additional CSS classes to apply to the icon container", }, { prop: "children", type: "ReactNode", description: "Icon content (typically an SVG or icon component)", }, ]} />

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