# V card 20

> Stats dashboard grid with four metric tiles and trend indicators

A shadcn/ui block from the [@cnippet](https://ui.cnippet.dev/) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/cnippet/v-card-20).

- Page, with a live preview: https://shadcn.exchange/r/cnippet/v-card-20
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/cnippet/v-card-20-light-2e832a1b40e3a561.png
- Registry item: https://ui.cnippet.dev/r/v-card-20.json
- Categories: card
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://ui.cnippet.dev/r/v-card-20.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `@cnippet/card`

## Files

### `registry/default/variants/v-card-20.tsx`

```tsx
import { TrendingDownIcon, TrendingUpIcon } from "lucide-react";
import { Card, CardContent } from "@/registry/default/ui/card";

const stats = [
  { delta: "+14.2%", label: "Total Users", trend: "up", value: "84,210" },
  { delta: "+7.8%", label: "Monthly Revenue", trend: "up", value: "$31,540" },
  { delta: "-3.1%", label: "Churn Rate", trend: "down", value: "2.4%" },
  { delta: "+22.5%", label: "Active Sessions", trend: "up", value: "12,840" },
];

export function Pattern() {
  return (
    <div className="grid w-full max-w-lg grid-cols-2 gap-3">
      {stats.map((stat) => (
        <Card className="w-full" key={stat.label}>
          <CardContent className="flex flex-col gap-1.5">
            <span className="text-muted-foreground text-xs">{stat.label}</span>
            <span className="font-bold text-xl tabular-nums">{stat.value}</span>
            <span
              className={`flex items-center gap-1 font-medium text-xs ${
                stat.trend === "up"
                  ? "text-emerald-600 dark:text-emerald-400"
                  : "text-red-500 dark:text-red-400"
              }`}
            >
              {stat.trend === "up" ? (
                <TrendingUpIcon className="size-3.5" />
              ) : (
                <TrendingDownIcon className="size-3.5" />
              )}
              {stat.delta} vs last month
            </span>
          </CardContent>
        </Card>
      ))}
    </div>
  );
}
```