Spark UI
Back to UI Kit

Layered Metric View

Bar and line series sharing one axis, with the line layer toggleable independently of the bars.

Interactive Stage Preview

Customize

9 options
Accent Color
Periods
4
Bar Width
20
Corner Radius
8
Line Thickness
3
Spline Overlay
Tint Bars
Grid Lines
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-hybrid-spline-bar

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.
periodsnumber4Number of bar/line pairs.
barWidthnumber20Thickness of each bar in pixels.
radiusnumber8Rounding on each bar.
lineWidthnumber3Stroke width of the spline overlay.
showLinebooleantrueShow the trend line on top of the bars.
tintBarsbooleanfalseColour the bars with the accent instead of neutral grey.
showGridbooleantrueShow the dashed background grid.
speednumber100Playback speed of entry and transition animations, as a percentage.