Components

Segment Spotlight

Segmented headline with hover-driven focus, blur states, and an animated dashed highlight box.

interactivemarketinganimationmotionaccessibility
Ship 10x faster with real-time sync & AI insights

Installation

$npx shadcn@latest add /r/segment-spotlight.json

API Reference

PropTypeDefaultDescription
segmentsSegmentSpotlightSegment[]-Ordered text fragments that make up the headline. Each item is { id, text }.
focusesSegmentSpotlightFocus[]-Focus buttons; hovering one highlights its segmentIds. Each item is { id, label, icon, segmentIds }.
classNamestring-Classes merged onto the outer wrapper.
headingClassNamestring-Classes merged onto the headline row.

Customization

  • Pass className to restyle the component — classes are merged with cn, so your utilities win.
  • Styling uses Tailwind utility classes and theme tokens, so it adapts to light/dark mode automatically.
  • Tune behavior with the props in the API reference above (e.g. segments).