# Analytics

> A card with a gradient area chart.

A shadcn/ui block from the [@flx](https://ui.flexnative.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/flx/spot-04).

- Page, with a live preview: https://shadcn.exchange/r/flx/spot-04
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/flx/spot-04-light-87bc382312ffa080.png
- Registry item: https://ui.flexnative.com/r/spot-04.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://ui.flexnative.com/r/spot-04.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`, `button`

## Files

### `registry/illustrations/spot/spot-04.tsx`

```tsx
import { Button } from '@/components/ui/button'
import { Card } from '@/components/ui/card'

export function Spot04() {
  return (
    <Card className="w-64 gap-3 p-4 shadow-sm">
      <div className="flex items-center justify-between">
        <div className="flex flex-col gap-0.5">
          <span className="text-muted-foreground text-xs">Visitors</span>
          <span className="text-xl font-semibold tracking-tight tabular-nums">
            18,204
          </span>
        </div>
        <Button variant="outline" size="xs">
          This week
        </Button>
      </div>

      <svg
        viewBox="0 0 240 60"
        className="h-14 w-full"
        preserveAspectRatio="none"
        aria-hidden
      >
        <defs>
          <linearGradient id="spot-04-fill" x1="0" y1="0" x2="0" y2="1">
            <stop
              offset="0%"
              className="text-primary"
              stopColor="currentColor"
              stopOpacity="0.22"
            />
            <stop
              offset="100%"
              className="text-primary"
              stopColor="currentColor"
              stopOpacity="0"
            />
          </linearGradient>
        </defs>
        <path
          d="M0 44 C 30 40, 45 20, 70 24 S 120 12, 150 28 S 205 8, 240 16 L 240 60 L 0 60 Z"
          fill="url(#spot-04-fill)"
        />
        <path
          d="M0 44 C 30 40, 45 20, 70 24 S 120 12, 150 28 S 205 8, 240 16"
          className="text-primary stroke-current"
          strokeWidth="2.5"
          fill="none"
          strokeLinecap="round"
        />
      </svg>
    </Card>
  )
}
```