Spark UI
Back to UI Kit

Morph Views

The same data morphs between bars, dots, and an area view, every shape tweening into the next.

Interactive Stage Preview

Customize

6 options
Accent Color
Data Points
8
Initial View
Dot Size
12
Line Thickness
2
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 morph-views

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.
pointsnumber8Number of values in the dataset.
modestring'Bars'Which view the chart opens in.
dotSizenumber12Diameter of the points in Dots view.
strokeWidthnumber2Stroke width of the connecting line.
speednumber100Playback speed of entry and transition animations, as a percentage.