Segment Spotlight

A desktop-focused spotlight component for showcasing product features, services, or workflow steps with floating labels and an interactive icon toolbar.

interactivemarketinganimationmotionaccessibility

Comments

CMS Drafts

Accessibility

Feature Flags

Collaborators

Layout Shift

Segment Spotlight is desktop-focused

Open this preview on a wider screen to explore the floating labels and icon toolbar.

Installation

$npx shadcn@latest add https://ui.navdeepsingh.dev/r/segment-spotlight.json

API Reference

Prop	Type	Default	Description
`segments`	`SegmentSpotlightSegment[]`	`-`	Floating label chips. Each item is { id, label, color?, className? }, where className positions the chip (e.g. "left-[18%] top-[20%]").
`focuses`	`SegmentSpotlightFocus[]`	`-`	Icon toolbar buttons; hovering/focusing one highlights its segmentIds and blurs the rest. Each item is { id, label, icon, segmentIds, dividerAfter? }.
`className`	`string`	`-`	Classes merged onto the outer wrapper.
`viewportClassName`	`string`	`-`	Classes merged onto the inner viewport that contains the chips and toolbar.
`toolbarClassName`	`string`	`-`	Classes merged onto the floating icon toolbar.
`showGrid`	`boolean`	`false`	Renders a subtle background grid inside the viewport.

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, for example segments.