Spark UI
Back to UI Kit

Share Strip

A segmented share bar whose pieces spring open on hover with a light sweep, paired with a blur-swap readout.

Interactive Stage Preview

Customize

6 options
Accent Color
Segments
5
Strip Height
34
Segment Gap
4
Expand On Hover
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 share-strip

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'Base color; segments use its shades.
segmentsnumber5Number of channels.
stripHeightnumber34Height of the bar.
segmentGapnumber4Space between segments.
expandOnHoverbooleantrueGrow the hovered segment.
speednumber100Playback speed of entry and transition animations, as a percentage.