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

---

title: Card description: A customizable card component to visualize your content. 📝 lastUpdated: 09 Sep, 2025 links: source: https://github.com/Logging-Stuff/RetroUI/blob/main/components/retroui/Card.tsx

<ComponentShowcase name="card-style-default" /> <br /> <br />

Installation

<ComponentInstall> <ComponentInstall.Cli npmCommand="npx shadcn@latest add @retroui/card" /> <ComponentInstall.Manual>

Copy the code 👇 into your project:

<ComponentSource name="card" />

</ComponentInstall.Manual> </ComponentInstall>

<br /> <br />

Examples

Title with description

<ComponentShowcase name="card-style-default" /> <br /> <br />

Product card

<ComponentShowcase name="card-style-commerce" /> <br /> <br />

Testimonial card

<ComponentShowcase name="card-style-testimonial" />

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