File contents Meter
Segmented column strip showing a value as filled/unfilled blocks. Useful for discrete progress or threshold indicators.
Import
import { Meter, MeterColumn } from 'reaviz';
Meter Props
Prop
Type
Default
Description
valuenumber—
Current value (required)
minnumber0Minimum value
maxnumber100Maximum value
columnsnumber10Number of segments
gapnumber15Gap between segments
columnReactElement<MeterColumnProps> | null<MeterColumn />Column element
classNamestring—
CSS class
styleReact.CSSProperties{}Inline styles
MeterColumn Props
Prop
Type
Default
Description
heightnumber32Column height
activeFillstringschemes.cybertron[0]Filled segment color
inActiveFillstring'#414242'Empty segment color
animatedbooleantrueEnable animations
classNamestring—
CSS class
Basic Usage
<Meter value={75} />
Custom Range and Segments
<Meter
value={350}
min={0}
max={500}
columns={20}
gap={8}
/>
Custom Colors
<Meter
value={60}
column={
<MeterColumn
height={24}
activeFill="#2196F3"
inActiveFill="#1a1a1a"
/>
}
/>
Compact Meter
<Meter
value={40}
columns={5}
gap={4}
column={<MeterColumn height={16} />}
/>
No Animation
<Meter
value={80}
column={<MeterColumn animated={false} />}
/>
Notes
Renders as SVG rectangles, not HTML
Segments fill left-to-right based on the value's position within the min/max range
Each segment animates in with staggered delay when animated is true
1 --- 2 name: meter 3 description: Meter 4 --- 5 # Meter 6 7 Segmented column strip showing a value as filled/unfilled blocks. Useful for discrete progress or threshold indicators. 8 9 ## Import 10 11 ```tsx 12 import { Meter, MeterColumn } from 'reaviz'; 13 ``` 14 15 ## Meter Props 16 17 | Prop | Type | Default | Description | 18 |------|------|---------|-------------| 19 | `value` | `number` | — | Current value (required) | 20 | `min` | `number` | `0` | Minimum value | 21 | `max` | `number` | `100` | Maximum value | 22 | `columns` | `number` | `10` | Number of segments | 23 | `gap` | `number` | `15` | Gap between segments | 24 | `column` | `ReactElement<MeterColumnProps> \| null` | `<MeterColumn />` | Column element | 25 | `className` | `string` | — | CSS class | 26 | `style` | `React.CSSProperties` | `{}` | Inline styles | 27 28 ## MeterColumn Props 29 30 | Prop | Type | Default | Description | 31 |------|------|---------|-------------| 32 | `height` | `number` | `32` | Column height | 33 | `activeFill` | `string` | `schemes.cybertron[0]` | Filled segment color | 34 | `inActiveFill` | `string` | `'#414242'` | Empty segment color | 35 | `animated` | `boolean` | `true` | Enable animations | 36 | `className` | `string` | — | CSS class | 37 38 ## Basic Usage 39 40 ```tsx 41 <Meter value={75} /> 42 ``` 43 44 ## Custom Range and Segments 45 46 ```tsx 47 <Meter 48 value={350} 49 min={0} 50 max={500} 51 columns={20} 52 gap={8} 53 /> 54 ``` 55 56 ## Custom Colors 57 58 ```tsx 59 <Meter 60 value={60} 61 column={ 62 <MeterColumn 63 height={24} 64 activeFill="#2196F3" 65 inActiveFill="#1a1a1a" 66 /> 67 } 68 /> 69 ``` 70 71 ## Compact Meter 72 73 ```tsx 74 <Meter 75 value={40} 76 columns={5} 77 gap={4} 78 column={<MeterColumn height={16} />} 79 /> 80 ``` 81 82 ## No Animation 83 84 ```tsx 85 <Meter 86 value={80} 87 column={<MeterColumn animated={false} />} 88 /> 89 ``` 90 91 ## Notes 92 93 - Renders as SVG rectangles, not HTML 94 - Segments fill left-to-right based on the value's position within the min/max range 95 - Each segment animates in with staggered delay when `animated` is true
commit 11d6a9244e
Frequently asked questions How do I install the Meter skill? Run npx skillmds@latest add reaviz/meter in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
What does the Meter skill do? Meter It is listed under Coding & Dev Tools on SkillMD.
Is Meter safe to use? This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
Which AI agents work with Meter? This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Is Meter free to use? Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
Who published Meter? reaviz (@reaviz) published this skill. Their other Agent Skills are listed on their SkillMD profile.
reaviz