# Stats Panel

A simple multi-file block with a component and local data helper.

## Installation

```bash
npx shadcn@latest add https://underscore-cn.vercel.app/r/stats-panel.json
```

[Registry JSON](https://underscore-cn.vercel.app/r/stats-panel.json)

## Preview

```tsx
import { StatsPanel } from "./stats-panel";

export function Preview() {
  return <StatsPanel />;
}
```

## Source

### registry/items/blocks/stats-panel/stats-panel.tsx

```tsx
import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

import { ExampleCard } from "@/components/ui/example-card";
import { stats } from "@/lib/stats-data";

function StatsPanel() {
  return (
    <div className="grid w-full max-w-3xl gap-4 md:grid-cols-[1fr_1.2fr]">
      <ExampleCard
        title="Registry starter"
        description="Compose local registry items with shadcn dependencies."
        status="Block"
      />
      <Card>
        <CardHeader>
          <CardTitle>Registry health</CardTitle>
        </CardHeader>
        <CardContent className="grid gap-3">
          {stats.map((stat) => (
            <div
              key={stat.label}
              className="flex items-center justify-between gap-4 rounded-md border p-3"
            >
              <div className="flex flex-col gap-1">
                <span className="text-sm font-medium">{stat.label}</span>
                <span className="text-sm text-muted-foreground">{stat.detail}</span>
              </div>
              <Badge variant="secondary">{stat.value}</Badge>
            </div>
          ))}
        </CardContent>
      </Card>
    </div>
  );
}

export { StatsPanel };
```


### registry/items/blocks/stats-panel/stats-data.ts

```ts
type Stat = {
  label: string;
  value: string;
  detail: string;
};

const stats: Stat[] = [
  {
    label: "Components",
    value: "12",
    detail: "Ready to publish",
  },
  {
    label: "Blocks",
    value: "3",
    detail: "Documented examples",
  },
  {
    label: "Schema",
    value: "100%",
    detail: "Validated output",
  },
];

export { stats, type Stat };
```


## Usage

Use the panel as a dashboard summary block. It installs the component and the local data helper
together, plus its local `example-card` dependency.