Spark UI
Back to UI Kit

Magnetic Columns

Bars lean and lift toward the cursor on a spring, with a value pill that glides between columns.

Interactive Stage Preview

Customize

7 options
Accent Color
Columns
10
Lift Distance
8
Magnet Reach
30
Column Gap
6
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 magnetic-columns

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.
barsnumber10Number of magnetic columns.
pullnumber8How far columns rise toward the cursor, in pixels.
reachnumber30How far along the chart the cursor's pull extends.
gapnumber6Space between columns in pixels.
showLabelsbooleantrueShow the month labels under the columns.
speednumber100Playback speed of entry and transition animations, as a percentage.