Live signals
See the whole system before customers feel it
Bring request health, latency and regional signals into one calm operating view, then move from a change in the graph to its source without losing context.
Live workspace
Operations overview
Feature Spotlight Deck
A free interactive feature section with accessible product tabs for React and Next.js.
One product story, three decisive moments
Guide visitors through the signals, automation and release confidence that make your product valuable. Each step keeps the interface itself at the centre of the story.
- Live signals
- Automated triage
- Release confidence
Automated triage
Turn a noisy alert into a clear next action
Group related traces, collect the surrounding release context and route a concise resolution draft to the team that can act on it.
Automation run
Incident triage
Release confidence
Ship when every important signal agrees
Keep quality, security and experience checks in one release gate, with an explicit readiness state that makes the production decision easy to review.
Release 2.8.0
Production gate
Feature Spotlight Deck is a free interactive feature section for Next.js and React, built with Motion and styled with Tailwind. It pairs an accessible set of product-feature tabs with one generous visual panel, helping visitors understand several capabilities without losing the product context that connects them.
The server HTML presents every feature in a readable static deck, then hydration upgrades it to tabs without changing the reserved footprint. Arrow keys, Home and End activate the matching panel, mouse and touch selection work as expected, and reduced-motion users receive every state change instantly.
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/feat-spotlight-deckUsage
import { FeatureSpotlightDeck } from "@/components/feat-spotlight-deck";
const items = [
{
id: "signals",
label: "Live signals",
title: "See the whole system",
description: "Bring health, latency and regional signals into one view.",
visual: (
<img
src="/product/signals.png"
alt="Operations dashboard showing request health and latency"
/>
),
},
{
id: "triage",
label: "Automated triage",
title: "Move from alert to action",
description: "Collect context and route a resolution to the right team.",
visual: (
<img
src="/product/triage.png"
alt="Incident workflow with analysis and an assigned owner"
/>
),
},
];
export default function Page() {
return (
<FeatureSpotlightDeck
title="Explore the product"
description="Three connected capabilities, one clear product story."
items={items}
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | FeatureSpotlightItem[] | required | Two to five feature items in display order. Each item supplies a unique id, label, title, description, visual and optional icon. |
| title | string | undefined | Optional section heading rendered as an h2. |
| description | string | undefined | Optional supporting copy beneath the section heading. |
| defaultActiveId | string | first item ID | ID selected on first render. An unknown value falls back to the first item. |
| label | string | "Feature highlights" | Accessible name announced for the feature tab list. |
| className | string | undefined | Additional classes merged onto the section root. |
Customisation
Feature Spotlight Deck exposes three Tier 3 CSS variables. The accent controls the selected marker and demo-detail colour, the glow adds a quiet panel highlight, and the panel token tints the product surface. Keep each override connected to your semantic palette so light and dark themes retain readable contrast:
.feature-tour {
--feature-spotlight-accent: var(--primary);
--feature-spotlight-glow: var(--ring);
--feature-spotlight-panel: var(--muted);
}
<FeatureSpotlightDeck className="feature-tour" items={items} />Frequently asked questions
- Is Feature Spotlight Deck free for commercial use?
- Yes. Feature Spotlight Deck is MIT licensed, so you can use it in personal and commercial projects without attribution.
- How does Feature Spotlight Deck handle accessibility and reduced motion?
- It uses real buttons with tabs and tabpanel relationships, roving focus, visible focus rings, Arrow key navigation, Home and End support. With reduced motion enabled, entrances and panel movement are removed and selection updates immediately.
- Can I customise the product visuals and colours?
- Yes. Every item accepts your own React visual, so you can use an image, chart or composed interface. Three CSS variables control the accent, glow and panel tint without changing the component source.