Spark UI
Back to UI Kit

Fluid Trend Band

A gradient-filled area chart with a live monotone/natural curve toggle and soft rounded joins.

Interactive Stage Preview

Customize

7 options
Accent Color
Data Points
6
Line Thickness
2.5
Fill Strength
35
Curve
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-curved-wave-area

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.
pointsnumber6Number of samples along the wave.
strokeWidthnumber2.5Stroke width of the top edge.
fillOpacitynumber35Opacity of the gradient fill at its top, in percent.
curvestring'monotone'Initial interpolation of the wave.
showGridbooleantrueShow the dashed background grid.
speednumber100Playback speed of entry and transition animations, as a percentage.