Hybrid Astro UI

Card

Open in ChatGPT

A structured card component system with dedicated subcomponents for headers, content, and footers. Provides a clean, flexible layout for displaying grouped information, statistics, and UI sections.

Active Users

Total users in the last 30 days

12,458

Updated 2 hours ago↑ 512 new

Sales

Total revenue today

$3,204

Top method: Credit Card↑ $340 
pnpm dlx hybrid-astro-ui@latest add card
npx hybrid-astro-ui@latest add card
yarn dlx hybrid-astro-ui@latest add card
bunx hybrid-astro-ui@latest add card
---
import { 
  Card,
  CardTitle,
  CardHeader,
  CardDescription,
  CardContent,
  CardFooter
} 
from "@/src/components/hybrid-astro-ui/card"

---
<Card>
    <CardHeader>
      <CardTitle>Sales</CardTitle>
      <CardDescription>Total revenue today</CardDescription>
    </CardHeader>

    <CardContent>
      <p class="text-4xl font-bold">$3,204</p>
    </CardContent>

    <CardFooter class="flex justify-between text-sm text-zinc-400">
      <span>Top method: Credit Card</span>
      <span class="text-green-400 font-medium">↑ $340</span>
    </CardFooter>
</Card>