# V meter 15

> Basic meter

A shadcn/ui block from the [@cnippet](https://ui.cnippet.dev/) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/cnippet/v-meter-15).

- Page, with a live preview: https://shadcn.exchange/r/cnippet/v-meter-15
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/cnippet/v-meter-15-light-f97808df134ff8c3.png
- Registry item: https://ui.cnippet.dev/r/v-meter-15.json
- Categories: meter
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://ui.cnippet.dev/r/v-meter-15.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: `@cnippet/meter`

## Files

### `registry/default/variants/v-meter-15.tsx`

```tsx
"use client";

import {
  Meter,
  MeterIndicator,
  MeterLabel,
  MeterTrack,
  MeterValue,
} from "@/registry/default/ui/meter";

const steps = [
  { done: true, label: "Add profile photo" },
  { done: true, label: "Set display name" },
  { done: true, label: "Verify email" },
  { done: false, label: "Connect calendar" },
  { done: false, label: "Invite a teammate" },
];

const completed = steps.filter((s) => s.done).length;

export function Pattern() {
  return (
    <div className="w-full max-w-xs space-y-3 rounded-lg border p-4">
      <Meter max={steps.length} value={completed}>
        <div className="flex items-center justify-between gap-2">
          <MeterLabel className="font-medium">Profile strength</MeterLabel>
          <MeterValue>{() => `${completed}/${steps.length}`}</MeterValue>
        </div>
        <MeterTrack>
          <MeterIndicator />
        </MeterTrack>
      </Meter>
      <ul className="space-y-1.5">
        {steps.map(({ done, label }) => (
          <li
            className={`flex items-center gap-2 text-xs ${done ? "text-muted-foreground line-through" : ""}`}
            key={label}
          >
            <span
              className={`size-1.5 shrink-0 rounded-full ${done ? "bg-green-500" : "bg-muted-foreground/30"}`}
            />
            {label}
          </li>
        ))}
      </ul>
    </div>
  );
}
```