Skip to content
Pinky UI

data

Comparison Bars

A small labeled dataset compared against one shared baseline.

  • data
  • bars
  • comparison
  • baseline

Live preview

Current67%
Target84%

Quick usage

usage
import { ComparisonBars } from "@pinky-ui/systems";

<ComparisonBars label="Plans" items={plans} />

Presets

Default

Restrained production behaviour.

Default behaviour

Quiet

Reduced intensity for dense product screens.

disabled={true}

Install

Add @pinky-ui/systems as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/systems

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Props

PropTypeDefaultDescription
itemsComparisonBarItem[]—Two to six labeled values sharing one unit.
classNamestring—Styles the outer interaction surface.

Accessibility

  • Keyboard and touch paths match the pointer interaction.
  • Stable labels and values remain available without motion.

Performance

  • Simple DOM bars avoid a chart dependency.
  • Reduced motion resolves widths immediately.

Reduced motion

Motion resolves immediately while semantics, focus and state remain unchanged.

When to use

  • Current/target and compact plan comparisons

When not to use

  • Large, negative or multi-unit datasets

Skill

Purpose

ComparisonBars compares a small dataset against one shared baseline. Use it for current/target, before/after and compact plan comparisons.

Two to six items is the useful range. Avoid truncated baselines, unrelated units, negative/diverging data or chart dashboards. Labels and values must stay visible at narrow widths.

Each row is keyboard focusable and has a complete accessible label; color is not the only signal. Reduced motion resolves widths immediately. Use a full chart when axes, uncertainty or many categories matter.

Open this skill on its own page