Tabbed Feature Switcher
Original · freeA tabbed feature preview that switches panels using only native radio inputs and Tailwind peer variants, so it works with no JavaScript.
Copy prompt gives Claude Code, Cursor or v0 a ready-to-paste prompt that recreates this exact component.
npx shadcn@latest add https://webinnoventix.com/r/feature-tabbed-switcher.jsonexport default function FeatureTabbedSwitcher() {
return (
<section className="bg-white px-6 py-16 dark:bg-zinc-950 md:py-24">
<div className="mx-auto max-w-5xl">
<div className="mx-auto max-w-2xl text-center">
<p className="text-sm font-semibold uppercase tracking-widest text-indigo-600 dark:text-indigo-400">
One product, three jobs
</p>
<h2 className="mt-4 text-balance text-3xl font-bold tracking-tight text-zinc-900 sm:text-4xl dark:text-white">
Pick a task and see how it works
</h2>
</div>
<h3 className="sr-only">Choose a feature to preview</h3>
<div className="mt-10 flex flex-wrap items-center justify-center gap-2">
{/* Radios drive the switch. No script needed. */}
<input
type="radio"
name="feature-switcher"
id="fs-capture"
defaultChecked
className="peer/capture sr-only"
/>
<input
type="radio"
name="feature-switcher"
id="fs-review"
className="peer/review sr-only"
/>
<input
type="radio"
name="feature-switcher"
id="fs-publish"
className="peer/publish sr-only"
/>
<label
htmlFor="fs-capture"
className="order-1 cursor-pointer select-none rounded-full border border-zinc-200 px-5 py-2.5 text-sm font-semibold text-zinc-600 transition hover:text-zinc-900 peer-checked/capture:border-indigo-600 peer-checked/capture:bg-indigo-600 peer-checked/capture:text-white peer-checked/capture:shadow-sm peer-focus-visible/capture:ring-2 peer-focus-visible/capture:ring-indigo-500 peer-focus-visible/capture:ring-offset-2 dark:border-zinc-700 dark:text-zinc-400 dark:hover:text-white dark:peer-checked/capture:border-indigo-500 dark:peer-checked/capture:bg-indigo-500 dark:peer-focus-visible/capture:ring-offset-zinc-950"
>
Capture
</label>
<label
htmlFor="fs-review"
className="order-1 cursor-pointer select-none rounded-full border border-zinc-200 px-5 py-2.5 text-sm font-semibold text-zinc-600 transition hover:text-zinc-900 peer-checked/review:border-indigo-600 peer-checked/review:bg-indigo-600 peer-checked/review:text-white peer-checked/review:shadow-sm peer-focus-visible/review:ring-2 peer-focus-visible/review:ring-indigo-500 peer-focus-visible/review:ring-offset-2 dark:border-zinc-700 dark:text-zinc-400 dark:hover:text-white dark:peer-checked/review:border-indigo-500 dark:peer-checked/review:bg-indigo-500 dark:peer-focus-visible/review:ring-offset-zinc-950"
>
Review
</label>
<label
htmlFor="fs-publish"
className="order-1 cursor-pointer select-none rounded-full border border-zinc-200 px-5 py-2.5 text-sm font-semibold text-zinc-600 transition hover:text-zinc-900 peer-checked/publish:border-indigo-600 peer-checked/publish:bg-indigo-600 peer-checked/publish:text-white peer-checked/publish:shadow-sm peer-focus-visible/publish:ring-2 peer-focus-visible/publish:ring-indigo-500 peer-focus-visible/publish:ring-offset-2 dark:border-zinc-700 dark:text-zinc-400 dark:hover:text-white dark:peer-checked/publish:border-indigo-500 dark:peer-checked/publish:bg-indigo-500 dark:peer-focus-visible/publish:ring-offset-zinc-950"
>
Publish
</label>
{/* Panels */}
<div className="order-2 mt-8 hidden w-full peer-checked/capture:block">
<div className="grid items-center gap-8 rounded-2xl border border-zinc-200 bg-zinc-50 p-6 md:grid-cols-2 md:p-8 dark:border-zinc-800 dark:bg-zinc-900/50">
<div>
<h4 className="text-xl font-bold text-zinc-900 dark:text-white">
Get every idea down fast
</h4>
<p className="mt-3 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">
A single inbox collects notes, links and voice memos from anywhere, then tidies them into the right project without you sorting a thing.
</p>
<ul className="mt-5 space-y-2 text-sm text-zinc-700 dark:text-zinc-300">
<li>Quick capture from any device</li>
<li>Automatic tagging and filing</li>
<li>Nothing lost between apps</li>
</ul>
</div>
<div
aria-hidden="true"
className="space-y-3 rounded-xl bg-white p-4 shadow-sm ring-1 ring-zinc-900/5 dark:bg-zinc-800/60 dark:ring-white/10"
>
<div className="flex items-center gap-2 rounded-lg bg-indigo-50 p-3 dark:bg-indigo-500/10">
<div className="h-6 w-6 rounded bg-indigo-500/70" />
<div className="h-3 flex-1 rounded bg-indigo-500/30" />
</div>
<div className="h-3 w-full rounded bg-zinc-100 dark:bg-zinc-700" />
<div className="h-3 w-4/5 rounded bg-zinc-100 dark:bg-zinc-700" />
<div className="h-3 w-2/3 rounded bg-zinc-100 dark:bg-zinc-700" />
</div>
</div>
</div>
<div className="order-2 mt-8 hidden w-full peer-checked/review:block">
<div className="grid items-center gap-8 rounded-2xl border border-zinc-200 bg-zinc-50 p-6 md:grid-cols-2 md:p-8 dark:border-zinc-800 dark:bg-zinc-900/50">
<div>
<h4 className="text-xl font-bold text-zinc-900 dark:text-white">
Approve without the email chain
</h4>
<p className="mt-3 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">
Reviewers comment in context and sign off in place. Everyone sees the current state, so no one works from last week's version.
</p>
<ul className="mt-5 space-y-2 text-sm text-zinc-700 dark:text-zinc-300">
<li>Inline comments and mentions</li>
<li>Clear approve or request changes</li>
<li>A full trail of who decided what</li>
</ul>
</div>
<div
aria-hidden="true"
className="space-y-3 rounded-xl bg-white p-4 shadow-sm ring-1 ring-zinc-900/5 dark:bg-zinc-800/60 dark:ring-white/10"
>
<div className="flex items-start gap-2">
<div className="h-7 w-7 shrink-0 rounded-full bg-emerald-400/80" />
<div className="flex-1 space-y-2 rounded-lg bg-zinc-100 p-2 dark:bg-zinc-700/60">
<div className="h-2.5 w-3/4 rounded bg-zinc-300 dark:bg-zinc-600" />
<div className="h-2.5 w-1/2 rounded bg-zinc-300 dark:bg-zinc-600" />
</div>
</div>
<div className="ml-9 flex items-center gap-2 rounded-lg bg-emerald-50 p-2 text-xs font-semibold text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-400">
<span className="h-4 w-4 rounded-full bg-emerald-500/70" />
Approved
</div>
</div>
</div>
</div>
<div className="order-2 mt-8 hidden w-full peer-checked/publish:block">
<div className="grid items-center gap-8 rounded-2xl border border-zinc-200 bg-zinc-50 p-6 md:grid-cols-2 md:p-8 dark:border-zinc-800 dark:bg-zinc-900/50">
<div>
<h4 className="text-xl font-bold text-zinc-900 dark:text-white">
Ship to every channel at once
</h4>
<p className="mt-3 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">
Schedule once and the finished work goes out everywhere it belongs, formatted correctly for each destination automatically.
</p>
<ul className="mt-5 space-y-2 text-sm text-zinc-700 dark:text-zinc-300">
<li>Schedule ahead in any time zone</li>
<li>Format adapts per channel</li>
<li>One dashboard for results</li>
</ul>
</div>
<div
aria-hidden="true"
className="grid grid-cols-3 gap-3 rounded-xl bg-white p-4 shadow-sm ring-1 ring-zinc-900/5 dark:bg-zinc-800/60 dark:ring-white/10"
>
{["bg-rose-400/70", "bg-sky-400/70", "bg-amber-400/70", "bg-violet-400/70", "bg-emerald-400/70", "bg-indigo-400/70"].map(
(c, i) => (
<div key={i} className="space-y-2">
<div className={`h-10 rounded-lg ${c}`} />
<div className="h-2 w-2/3 rounded bg-zinc-100 dark:bg-zinc-700" />
</div>
),
)}
</div>
</div>
</div>
</div>
</div>
</section>
);
}Dependencies
Licence
Built by Web Innoventix. Free for personal and commercial use, no attribution required.
Built by Web Innoventix
Need a custom interface, a full website, or SEO that gets you cited by AI? We design, build and rank it end to end.
Get a free quoteSimilar components
Browse all →
Three Column Icon Grid
OriginalA responsive icon grid that presents six product capabilities as scannable cards, each with an inline SVG icon, title and short description.
Alternating Media Rows
OriginalThree feature rows that alternate a text column with a CSS-built visual panel, walking the reader through a plan, measure and ship story.
Bento Feature Grid
OriginalA bento-style grid mixing one large hero cell, a tall stat cell and several compact cards to give features a clear visual hierarchy.
Stat Backed Features
OriginalA feature layout that pairs each capability with a headline metric, so every claim is anchored to a measurable result.
Scroll-reveal bento grid
OriginalAn asymmetric bento feature grid whose cards stagger into view on scroll, lift on hover and feature an animated conic gradient border, shimmering headline, growing bar chart and a masked marquee tag strip.
Sticky scroll steps
OriginalA scroll-linked how-it-works section where a sticky panel cross-fades between steps and a progress ring plus filling timeline track advance as you scroll through the process.
Spotlight hover feature cards
OriginalA responsive feature card grid where each card follows the cursor with a radial spotlight glow, lifts and rotates its icon on hover, reveals a call to action, and sits above a scrolling logo marquee.
Animated marquee highlights band
OriginalA bold feature band with an animated gradient background, floating blurred orbs, blur-in staggered headline, two opposing marquee pill rows and shimmering stat cards.
Bordered Feature Grid (2x2)
MITA two-column grid of bordered feature cards, each pairing an outlined icon with a title and supporting copy. Clean, enterprise-leaning layout with full dark-mode support.
Outlined Feature Cards with CTA
MITA three-column feature section with heading and intro, plus blue-outlined cards that each carry an icon, description, and a circular arrow call-to-action. Fully theme-aware.
Icon-Left Feature List
MITA centered heading over a three-column feature list, each row leading with a rounded icon badge and a 'Learn More' link. Classic marketing feature block, ported with added dark variants.
Hover-Reveal Bento Grid
MITThe Magic UI bento pattern: a mixed-span grid of cards where the icon shrinks and the description lifts on hover to reveal a call-to-action. Self-contained (no framer-motion, no icon libs), pure CSS group-hover, with a glow background and full dark styling.