# V progress 7

> Skills Meter

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

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

## Install

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

## Files

### `registry/default/variants/v-progress-7.tsx`

```tsx
import {
  Progress,
  ProgressIndicator,
  ProgressTrack,
} from "@/registry/default/ui/progress";

const skills = [
  { label: "TypeScript", value: 92 },
  { label: "React", value: 88 },
  { label: "Node.js", value: 74 },
  { label: "PostgreSQL", value: 65 },
  { label: "Docker", value: 58 },
  { label: "Rust", value: 31 },
];

export function Pattern() {
  return (
    <div className="w-full max-w-xs space-y-3">
      <p className="font-semibold text-sm">Skills</p>
      {skills.map((skill) => (
        <Progress key={skill.label} value={skill.value}>
          <div className="flex items-center justify-between text-xs">
            <span className="font-medium text-foreground">{skill.label}</span>
            <span className="text-muted-foreground tabular-nums">
              {skill.value}%
            </span>
          </div>
          <ProgressTrack className="h-1.5">
            <ProgressIndicator />
          </ProgressTrack>
        </Progress>
      ))}
    </div>
  );
}
```