# Card 05 - Total Sales Card

> Highlight total sales revenue with a growth percentage badge and a decorative background illustration. Ideal for ecommerce dashboards that need an eye-catching summary metric.

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

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

## Install

```bash
npx shadcn@latest add https://shadcndashboard.dev/r/total-sales-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: `@iconify/react`
- Registry items: `card`

## Files

### `src/components/shadcn-dashboard/blocks/cards/total-sales-card.tsx`

```tsx
"use client";

import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
  CardDescription,
} from "@/components/ui/card";
import { Icon } from "@iconify/react";

const TotalSalesCode = () => {
  return (
    <div className="w-full max-w-xl">
      <Card className="relative pb-0">
        <CardHeader className="flex flex-col gap-0.5">
          <CardDescription className="text-sm font-normal text-muted-foreground">
            Total Sales
          </CardDescription>
          <CardTitle className="text-base font-medium">Shadcn Dashboard</CardTitle>
        </CardHeader>
        <CardContent className="relative flex flex-col justify-between gap-2 h-full pb-4">
          <div className="flex items-center gap-10">
            <div className="flex flex-col gap-2 self-end shrink-0">
              <h5 className="text-2xl leading-tight font-semibold">
                $98,452.76
              </h5>
              <div className="flex items-center gap-1.5">
                <span className="w-5 h-5 rounded-full bg-chart-2/15 text-chart-2 flex items-center justify-center">
                  <Icon
                    icon="solar:arrow-up-line-duotone"
                    width={14}
                    height={14}
                  />
                </span>
                <p className="text-sm font-medium text-chart-2!">+32.8%</p>
              </div>
            </div>
            <img
              src="https://images.shadcnspace.com/assets/shadcn-dashboard/background/ecom-dash.webp"
              alt="chasing_grades_bg"
              className="absolute bottom-0 right-0 w-48 h-auto object-contain pointer-events-none lg:block hidden"
            />
          </div>
        </CardContent>
      </Card>
    </div>
  );
};

export default TotalSalesCode;
```