Skip to content
Get Pro
Comparison

Dumbbell

A before and an after value per row: a hollow ring, a solid dot and the link between them.

$149 once · every Pro piece

Customize

Monochrome at rest (risers bone, fallers grey); point at a row and its after dot runs hot while the rest step back, with a panel for both values and the change. On mount each after dot slides out of its before dot; the sort switch re-ranks the rows and each springs to its new place. Options: line, gradient or capsule links (the capsule can carry a hatch), a dashed average with a value pill, a band of normal, a legend that isolates and hides before or after, absolute or percent change, risers in the accent, keyboard reading, and loading and empty states.

Install

npx shadcn@latest add @obsyde/dumbbell

Needs your licence key · Get Pro

Usage

Import it from where the CLI puts it, or copy the files below by hand.

import { Dumbbell } from '@/components/obsyde/ember/dumbbell/Dumbbell';

export function Example() {
  return (
    <Dumbbell />
  );
}

Files

What you get with Pro: plain React, TypeScript and CSS, with no dependencies.

  • ember/dumbbell/Dumbbell.tsxcomponent
  • ember/dumbbell/dumbbell.cssstyles
  • ember/dumbbell/DumbbellDemo.tsxdemo
  • ember/viz-kit/viz-kit.cssshared
  • ember/viz-kit/state-messages.tsxshared
  • ember/viz-kit/Tooltip.tsxshared
  • ember/viz-kit/focus.tsshared
  • ember/viz-kit/patterns.tsxshared
  • ember/viz-kit/roll.tsshared
  • ember/shared/rolling-number.cssshared
  • ember/shared/spring.tsshared
  • ember/shared/accent.tsshared
  • ember/viz-kit/scale.tsshared
  • ember/viz-kit/motion.tsshared
  • ember/viz-kit/chart.tsxshared
  • ember/shared/ember.cssshared
  • ember/viz-kit/touch.tsshared
  • ember/viz-kit/keyboard.tsshared
  • ember/viz-kit/size.tsshared
  • ember/viz-kit/Legend.tsxshared
  • ember/viz-kit/demo.tsxshared
  • ember/viz-kit/demo.cssshared

API

PropTypeDefault
accentAccent'ember' | 'volt' | 'arc''ember'
rowsRowsnumber8
sortSort'original' | 'after' | 'change''original'
linkLink'line' | 'gradient' | 'bar''line'
patternPattern'none' | 'diagonal-up' | 'diagonal-down' | 'dots' | 'vertical' | 'crosshatch''none'
toneTone'mono' | 'rise''mono'
referenceReference'none' | 'avg-before' | 'avg-after''none'
bandBandbooleanfalse
deltaChange'abs' | 'pct' | 'none''abs'
legendLegend'row' | 'none''row'
tooltipTooltip'panel' | 'none''panel'
statusStatus'ready' | 'loading' | 'empty''ready'
rowHeightRow heightnumber34
seedSeednumber6