A free product feature section with accessible random-access tabs.
Move directly between independent views of the same campaign evidence. The frame stays grounded while each capability takes the foreground.
Product capability
Map how creative audiences overlap, where affinity is building and which interests connect an emerging idea to the people most likely to carry it.
Affinity
87%
Overlap
34%
Momentum
+18%
Product capability
Rank the formats, subjects and points of view that resonate now, with enough context to understand whether a spike is durable or simply loud.
Colour-led stories
Behind the process
Tactile materials
Founder perspective
Emerging signal
Process-led posts are accelerating across high-affinity groups.
Product capability
Place reach beside intent, saves and audience quality so a lower-volume idea can still reveal itself as the stronger campaign direction.
Material study leads on intent
Lower reach, stronger saves and the clearest route to a second creative iteration.
Product capability
Package approved creative into presentation, social and display formats while the source story, naming and review context stay connected.
Master canvas
Form follows feeling.
Social crop
Story set
Package contents
<ProductFeatureTabs
title="One creative field, four ways to read it"
description="Move directly between independent views of the same campaign evidence."
items={productFeatureItems}
/>Product Feature Tabs is a free feature section for Next.js and React that places direct-access tabs inside one responsive Tailwind product frame. Each tab opens an independent capability with its own copy and consumer-supplied interface visual, so visitors can move straight to the evidence they care about.
Every panel is rendered exactly once and shares one intrinsic CSS grid cell, which reserves the tallest supplied panel without JavaScript measurement or layout shift. The enhanced tabs support pointer, touch and complete keyboard navigation, while the no-JavaScript fallback exposes fragment links and every article in source order.
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-product-tabsimport {
ProductFeatureTabs,
type ProductFeatureTab,
} from "@/components/feat-product-tabs";
const items: ProductFeatureTab[] = [
{
id: "audience-map",
label: "Audience map",
title: "See the communities behind every signal",
description:
"Map affinity, overlap and momentum before choosing a direction.",
visual: (
<div
role="img"
aria-label="Audience communities connected by shared interests"
className="aspect-[4/3] rounded-2xl border border-border bg-surface"
/>
),
},
{
id: "content-signals",
label: "Content signals",
title: "Find the themes already earning attention",
description:
"Rank the formats and subjects that resonate with each audience.",
visual: (
<div
role="img"
aria-label="Ranked content themes and audience resonance"
className="aspect-[4/3] rounded-2xl border border-border bg-surface"
/>
),
},
];
export default function Page() {
return (
<ProductFeatureTabs
title="One creative field, four ways to read it"
description="Move directly between independent views of the same evidence."
items={items}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
| items | ProductFeatureTab[] | required | Two to five independent capabilities. Duplicate IDs keep their first occurrence and empty input renders nothing. |
| title | string | undefined | Optional section heading rendered as an h2. |
| description | string | undefined | Optional supporting copy above the product frame. |
| label | string | "Product features" | Accessible name for the enhanced tab list and static fallback navigation. |
| defaultValue | string | first item ID | Initial selected ID for uncontrolled use. Invalid IDs fall back to the first item. |
| value | string | undefined | Controlled selected ID. Invalid IDs display the first item safely. |
| onValueChange | (id: string) => void | undefined | Called after a user selects a different tab. |
| transitionDistance | number | 16 | Neutral panel travel in pixels, with finite values clamped from 0 to 32. |
| frameRadius | number | 24 | Persistent frame radius in pixels, with finite values clamped from 12 to 32. |
| className | string | undefined | Additional classes merged onto the section root. |
Product Feature Tabs exposes Tier 3 variables for the persistent frame, active panel, accent, border, muted copy and focus indicator. Override them on an ancestor to retheme the section, then use transitionDistance and frameRadius to change the real transition geometry without editing preview wording.
<ProductFeatureTabs
title="Explore the platform"
items={items}
transitionDistance={24}
frameRadius={28}
/>
:root {
--feature-tabs-frame: var(--surface);
--feature-tabs-panel: var(--background);
--feature-tabs-accent: var(--primary);
--feature-tabs-border: var(--border);
--feature-tabs-muted: var(--muted);
--feature-tabs-focus: var(--ring);
}