Spark UI
Back to UI Kit

Mirror Bars

Diverging year-over-year bars that re-sort with shared layout animation and glow on hover.

Interactive Stage Preview

Customize

6 options
Accent Color
Compare Color
Rows
6
Bar Height
12
Change Labels
Animation Speed
100

Get this component

Copies the component into your project, installs what it needs, and pulls down its images. Nothing to download by hand.

npx spark-ui-registry@latest add mirror-bars

Writes to components/spark-ui/ by default; override with --dir. The file is yours to edit; there is no package to keep in sync.

Or let an AI agent pull it in for you. Set up the MCP server
PropertyTypeDefaultDescription
theme'dark' | 'light''dark'Colour scheme of the card.
compactbooleanfalseShrinks the card to a smaller fixed height.
colorstring (hex)'#ff8a3d'Current-year bar color.
compareColorstring (hex)'#a1a1aa'Previous-year bar color.
rowsnumber6Number of regions.
barHeightnumber12Thickness of each bar.
showDeltabooleantrueShow the percentage change.
speednumber100Playback speed of entry and transition animations, as a percentage.