Features as tabs beside one large visual: the active tab fills a progress bar and moves on by itself, pausing while you look.
Revenue
Customize
Usage
import { FeatureTabs } from "@/components/motionkit/feature-tabs";
<FeatureTabs
features={[
{ title: "Real-time dashboards", description: "Every chart updates as your data does.", visual: <img src="/dashboards.png" alt="" /> },
{ title: "Automated reports", description: "A summary in every inbox each Monday.", visual: <img src="/reports.png" alt="" /> },
{ title: "Alerts that matter", description: "Told when a number moves, not when it twitches.", visual: <img src="/alerts.png" alt="" /> },
]}
/>Motion
The exact curves this component runs, plotted with Motion's own maths.
Progress
Runs while on screen
Panel swap
Feature changes
The features section of a SaaS landing page, onboarding tours and product pages: three to six features, each with a screenshot.
It's a vertical WAI-ARIA tablist beside one panel. The active tab opens its description with a height animation and fills a thin progress bar over the interval; when the bar is full, the next feature takes over and the panel crossfades with a slight rise. Auto-advance only runs while the section is on screen, and it pauses while the pointer is over it or focus is inside, so nobody loses their place. Picking a tab restarts the timer.
| Prop | Type | Default | Description |
|---|---|---|---|
| features | Feature[] | — | Each feature's title, description and visual. |
| interval | number | 6 | Seconds per feature. 0 turns auto-advance off. |
| accent | string | "#5FAEB4" | Colour of the progress bar. |
How we audit: the WCAG 2.2 animation checklist and respecting reduced motion in React.
Yes. The file starts with "use client", so you can import it straight into a Server Component page or layout. It works in Vite as is, and in Astro as a React island.
Only the motion package, beside React and Tailwind CSS v4. There is no MotionKit package and no Tailwind config to add.
Yes, with MotionKit Plus. Add the @motionkit registry and your personal token to components.json (the snippet is on your account page), then run npx shadcn@latest add @motionkit/feature-tabs. It saves the file to components/motionkit and installs its dependencies.
Feature Tabs is part of MotionKit Plus (£12 a month or £96 a year). The live preview and playground are free to explore; Plus unlocks its source code, every customisation control and commercial use.
With reduced motion on, nothing advances by itself and panels swap with a short fade. Auto-advance also stops on hover, on focus and off screen, which covers WCAG 2.2.2.
Bento Grid
A feature grid in tiles of different sizes: they rise in turn, one border light follows the pointer across them all, and each tile's visual comes alive.
Scroll Showcase
Scrollytelling for a product tour: steps scroll past while a pinned panel crossfades to each one's visual, with a line that fills as you go.
Pricing Section
A complete pricing table: a sliding monthly/yearly switch, prices that roll to their new digits and a featured plan with an orbiting light.
Revenue
Customize
Usage
import { FeatureTabs } from "@/components/motionkit/feature-tabs";
<FeatureTabs
features={[
{ title: "Real-time dashboards", description: "Every chart updates as your data does.", visual: <img src="/dashboards.png" alt="" /> },
{ title: "Automated reports", description: "A summary in every inbox each Monday.", visual: <img src="/reports.png" alt="" /> },
{ title: "Alerts that matter", description: "Told when a number moves, not when it twitches.", visual: <img src="/alerts.png" alt="" /> },
]}
/>Motion
The exact curves this component runs, plotted with Motion's own maths.
Progress
Runs while on screen
Panel swap
Feature changes
The live preview is free to explore. Plus unlocks the source for Feature Tabs and every other premium component.