# V meter 7

> Storage breakdown with icons

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

- Page, with a live preview: https://shadcn.exchange/r/cnippet/v-meter-7
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/cnippet/v-meter-7-light-22257ed3b52729ae.png
- Registry item: https://ui.cnippet.dev/r/v-meter-7.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-7.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-7.tsx`

```tsx
"use client";

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

function getStrength(password: string): {
  color: string;
  label: string;
  value: number;
} {
  if (password.length === 0) return { color: "", label: "", value: 0 };
  let score = 0;
  if (password.length >= 8) score++;
  if (password.length >= 12) score++;
  if (/[A-Z]/.test(password)) score++;
  if (/[0-9]/.test(password)) score++;
  if (/[^A-Za-z0-9]/.test(password)) score++;

  if (score <= 1) return { color: "bg-destructive", label: "Weak", value: 20 };
  if (score === 2) return { color: "bg-orange-500", label: "Fair", value: 40 };
  if (score === 3) return { color: "bg-yellow-500", label: "Good", value: 60 };
  if (score === 4) return { color: "bg-blue-500", label: "Strong", value: 80 };
  return { color: "bg-green-500", label: "Very strong", value: 100 };
}

export default function Particle() {
  const [password, setPassword] = useState("");
  const strength = getStrength(password);

  return (
    <div className="w-full max-w-sm space-y-3">
      <Input
        onChange={(e) => setPassword(e.target.value)}
        placeholder="Enter a password"
        type="password"
        value={password}
      />
      <Meter value={strength.value}>
        <div className="flex items-center justify-between gap-2">
          <MeterLabel>Password strength</MeterLabel>
          {strength.label && <MeterValue>{() => strength.label}</MeterValue>}
        </div>
        <MeterTrack>
          <MeterIndicator className={strength.color} />
        </MeterTrack>
      </Meter>
    </div>
  );
}
```