Spark UI
Back to UI Kit

Capsule Column Set

A bar chart where every column reads as a floating pill, switchable between vertical and horizontal layout.

Interactive Stage Preview

Customize

8 options
Accent Color
Bars
6
Bar Width
16
Corner Radius
8
Secondary Series
Grid Lines
Layout
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 mono-rounded-pill-pillars

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'Primary series color.
barsnumber6Number of columns in the chart.
barWidthnumber16Thickness of each column in pixels.
radiusnumber8Rounding applied to each bar's corners.
showSecondarybooleantrueShow the muted comparison bars.
showGridbooleantrueShow the dashed background grid.
layoutstring'vertical'Initial bar orientation.
speednumber100Playback speed of entry and transition animations, as a percentage.