# Card 09 - Revenue Growth Card

> Show a headline revenue growth percentage with a month-over-month comparison in a compact card. Fits finance and sales dashboards that need a quick trend indicator.

A shadcn/ui block from the [@shadcn-dashboard](https://shadcndashboard.dev) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcn-dashboard/revenue-growth-card).

- Page, with a live preview: https://shadcn.exchange/r/shadcn-dashboard/revenue-growth-card
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcn-dashboard/revenue-growth-card-light-59e3d6142a124def.png
- Registry item: https://shadcndashboard.dev/r/revenue-growth-card.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcndashboard.dev/r/revenue-growth-card.json
```

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

## Dependencies

- npm packages: `lucide-react`
- Registry items: `card`, `button`

## Files

### `src/components/shadcn-dashboard/blocks/cards/revenue-growth-card.tsx`

```tsx
"use client";
import { Button } from "@/components/ui/button";
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";

import { ChartSpline } from "lucide-react";
export default function RevenueGrowthCode() {
  return (
    <div className="max-w-lg w-full">
      <Card className="flex h-full justify-between gap-10">
        <CardHeader className="flex items-start justify-between">
          <div>
            <CardTitle className="text-base font-medium text-primary">
              Revenue Growth
            </CardTitle>
          </div>
          <Button className="rounded-full h-9 w-9">
            <ChartSpline size={16} />
          </Button>
        </CardHeader>
        <CardContent className="flex flex-col gap-1">
          <h5 className="text-3xl font-semibold ">+24%</h5>
          <p className="text-sm font-normal text-muted-foreground">
            Compared to Last Month
          </p>
        </CardContent>
      </Card>
    </div>
  );
}
```