# Widget 01 - Analytics Overview Widget

> A compact analytics widget displaying earnings and expenses with growth indicators, perfect for admin dashboards to provide quick financial insights without overwhelming the interface.

A shadcn/ui block from the [@shadcn-space](https://shadcnspace.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcn-space/widget-01).

- Page, with a live preview: https://shadcn.exchange/r/shadcn-space/widget-01
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcn-space/widget-01-light-907a7477e58205eb.png
- Registry item: https://shadcnspace.com/r/widget-01.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcnspace.com/r/widget-01.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: `card`, `separator`, `badge`

## Files

### `src/components/shadcn-space/blocks/widget-01/page.tsx`

```tsx
import Widget from "@/components/shadcn-space/blocks/widget-01/widget";

export default function WidgetPage() {
    return <Widget />;
}
```

### `src/components/shadcn-space/blocks/widget-01/widget.tsx`

```tsx
import { Badge } from "@/components/ui/badge";
import { Card, CardContent } from "@/components/ui/card";
import { Separator } from "@/components/ui/separator";
import { cn } from "@/lib/utils";

type DashboardMetric = {
  label: string;
  value: string;
  percentage: string;
  isPositive?: boolean;
};

type MainDashboardData = {
  title: string;
  description: string;
  metrics: DashboardMetric[];
};

type WidgetProps = {
  mainDashboard?: MainDashboardData;
};

const mainDashboardData: MainDashboardData = {
  title: "Analytics Dashboard",
  description: "Check all the statistics",
  metrics: [
    {
      label: "Earnings",
      value: "$27,850",
      percentage: "+18%",
      isPositive: true,
    },
    {
      label: "Expense",
      value: "$18,453",
      percentage: "-5%",
      isPositive: false,
    },
  ],
};

const Widget = ({ mainDashboard = mainDashboardData }: WidgetProps) => {
  return (
    <div className="lg:py-20 sm:py-16 py-8 w-full">
      <div className="max-w-7xl mx-auto px-4 lg:px-8 xl:px-16 w-full">
        <Card className="p-0 ring-0 border rounded-2xl relative h-full max-w-xl w-full mx-auto overflow-hidden">
          <CardContent className="p-0">
            <div className="ps-6 py-4 flex flex-col gap-9 justify-between">
              <div>
                <p className="text-lg font-medium text-card-foreground">
                  {mainDashboard.title}
                </p>
                <p className="text-xs font-normal text-muted-foreground">
                  {mainDashboard.description}
                </p>
              </div>
              <div className="flex flex-wrap xs:flex-nowrap gap-6">

                {mainDashboard.metrics.map((metric, index) => (
                  <div key={index} className="flex items-center gap-6 w-full sm:w-auto"
                  >
                    <div>
                      <p className="text-xs font-normal text-muted-foreground">
                        {metric.label}
                      </p>
                      <div className="flex items-center gap-1">
                        <p className="text-2xl font-medium text-card-foreground">
                          {metric.value}
                        </p>
                        <Badge
                          className={cn(
                            "font-normal text-muted-foreground",
                            metric.isPositive
                              ? "bg-teal-400/10 "
                              : "bg-red-500/10",
                          )}
                        >
                          {metric.percentage}
                        </Badge>
                      </div>
                    </div>
                    {index < mainDashboard.metrics.length - 1 && (
                      <Separator
                        orientation="vertical"
                        className={"h-12 hidden sm:block"}

                      />
                    )}
                  </div>
                ))}
              </div>
            </div>
            {/* image */}
            <img
              src="https://images.shadcnspace.com/assets/backgrounds/stats-01.webp"
              alt="user-img"
              width={211}
              height={168}
              className="absolute bottom-0 right-0 hidden sm:block"
            />
          </CardContent>
        </Card>
      </div>
    </div>
  );
};

export default Widget;
```