New Feature Spotlight Bar React component
A thin announcement bar that cycles through what's new, with a soft light that follows the pointer. It pauses while you read.
About the New Feature Spotlight Bar component
New Feature Spotlight Bar shares several pieces of news in one slim line. Announcements rotate on a steady beat, each with a small tag, and a soft light follows the pointer across the bar.
It pauses the moment someone points at it, so nothing changes while they read, and small dots let them jump to any item.
When to use it
Use it for product updates, beta invites and changelog highlights.
For one urgent message, a single fixed banner is clearer than a rotation.
Installation
Add the New Feature Spotlight Bar component to your project with the shadcn CLI. It lands in components/new-feature-spotlight-bar.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/new-feature-spotlight-barProps
<NewFeatureSpotlightBar /> accepts 6 props, all optional. It also accepts the usual <div> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| theme | "dark" | "light" | "dark" |
| features | { tag?: string; title: string; href?: string }[] | FEATURES |
| interval Milliseconds each one stays. Pauses while the pointer is on the bar. | number | 2500 |
| actionLabel Label of the link. | string | "See what's new" |
| dismissible | boolean | true |
| onDismiss | () => void | — |
- theme"dark" | "light"Default: "dark"
- features{ tag?: string; title: string; href?: string }[]Default: FEATURES
- interval
Milliseconds each one stays. Pauses while the pointer is on the bar.
numberDefault: 2500 - actionLabel
Label of the link.
stringDefault: "See what's new" - dismissiblebooleanDefault: true
- onDismiss() => void
New Feature Spotlight Bar FAQ
- Does it stop while people read?
- Yes. It pauses for as long as the pointer is on the bar.
- Does the height change between messages?
- No. They all share one space.
- Can each item have its own link?
- Yes, with href. The link at the side follows the item on show.
- What about reduced motion?
- It stays on the first item, and the dots still work.
