---
title: "Meter"
description: "A reading of a value within a known range, such as storage or context used, with a label and an accessible value. Built on Base UI's Meter."
plan: Free
docs: https://ui.edbn.me/docs/components/meter
---

# Meter

A reading of a value within a known range, such as storage or context used, with a label and an accessible value. Built on Base UI's Meter.

## Installation

```bash
npx shadcn@4.19.0 add https://ui.edbn.me/r/meter.json
```

## Dependencies
- npm: @base-ui/react@^1.8.0
- edbn: edbn-base

## Usage

```tsx examples/meter-basic.tsx
"use client";
import { Meter, MeterLabel, MeterValue } from "@/components/ui/meter";

export default function MeterBasicPreview() {
  return (
    <Meter value={64} className="max-w-compact">
      <MeterLabel>Storage used</MeterLabel>
      <MeterValue />
    </Meter>
  );
}
```

## Files
- components/ui/meter.tsx (89 lines)

## For agents
- Base theme, once per project: npx shadcn@4.19.0 add https://ui.edbn.me/r/edbn-base.json
- MCP server with search, items, examples and source: https://ui.edbn.me/mcp
- Every page and item: https://ui.edbn.me/llms.txt