Context Meter
One thin bar for how much of a capacity is used, split into segments in grey steps with the remainder faint.
$149 once · every Pro piece
Customize
Past the warning line the last stretch heats progressively, deep at the line and hot at the end, and the percentage rolls. Segments ride springs when values change; hover or focus opens a breakdown with exact numbers.
Install
npx shadcn@latest add @obsyde/context-meterNeeds your licence key · Get Pro
Usage
Import it from where the CLI puts it, or copy the files below by hand.
import { ContextMeter } from '@/components/obsyde/ember/context-meter/ContextMeter';
export function Example() {
return (
<ContextMeter />
);
}
Files
What you get with Pro: plain React, TypeScript and CSS, with no dependencies.
ember/context-meter/ContextMeter.tsxcomponentember/context-meter/context-meter.cssstylesember/context-meter/ContextMeterDemo.tsxdemoember/shared/rolling-number.csssharedember/shared/RollingNumber.tsxsharedember/shared/spring.tssharedember/shared/accent.tssharedember/kit2-kit/kit.tssharedember/shared/ember.cssshared
API
| Prop | Type | Default |
|---|---|---|
accentAccent | 'ember' | 'volt' | 'arc' | 'ember' |
capacityCapacity | number | 200000 |
systemSystem | number | 9400 |
filesFiles | number | 61200 |
historyHistory | number | 72800 |
warnAtWarn at | number | 0.85 |