# Feature Tabs

> Features as tabs beside one large visual: the active tab fills a progress bar and moves on by itself, pausing while you look.

Category: Sections · MotionKit Plus · Updated 2026-10-22 · Live demo: https://motionkitui.com/components/feature-tabs

## When to use it

The features section of a SaaS landing page, onboarding tours and product pages: three to six features, each with a screenshot.

## How it works

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.

## Installation

Part of MotionKit Plus (https://motionkitui.com/pricing). Subscribers install it with `npx shadcn@latest add @motionkit/feature-tabs` after adding their registry token from https://motionkitui.com/account.

## Props

| 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. |

## Accessibility

- **Keyboard: Pass.** A vertical WAI-ARIA tablist: Up and Down move between features, Home and End jump to the ends; focusing the section pauses auto-advance.
- **Screen readers: Pass.** Tabs announce their selected state and control a labelled panel; only the active description is in the reading order.
- **Reduced motion: Pass.** 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.
- **Colour contrast: Pass.** Active titles measure 15.5:1 and descriptions 7.1:1; inactive titles 7.7:1.