Meter

Installation

pnpm dlx shadcn-svelte@latest add https://coss-sv.vercel.app/r/meter.json

Usage

<script lang="ts">
  import * as Meter from "$lib/components/ui/meter/index.js";
</script>

<Meter.Root value={40}>
  <Meter.Label>Progress</Meter.Label>
  <Meter.Value />
  <Meter.Track>
    <Meter.Indicator />
  </Meter.Track>
</Meter.Root>

API Reference

Meter.Root

Root component. Styled wrapper for Meter.Root from Shards UI with a flex column layout.

Meter.Track

Track container for the meter indicator. Styled wrapper for Meter.Track from Shards UI.

Meter.Indicator

Visual indicator showing the current value. Styled wrapper for Meter.Indicator from Shards UI.

Meter.Label

Label text for the meter. Styled wrapper for Meter.Label from Shards UI.

Meter.Value

Displays the current value. Styled wrapper for Meter.Value from Shards UI.

See the Shards Meter API for range, formatting, and primitive props.

Examples

Without Label and Value

With Formatted Value

With Range