Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProAn auto-advancing feature list with a timer bar on the active item and a crossfading media panel, built as accessible vertical tabs.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
The panel is a CSS grid cell, so content fills it. Give images className="size-full object-cover", or pass a composed preview as the demo does. Set panelClassName to change its height or background.
| Prop | Type | Default | Description |
|---|---|---|---|
items | FeatureTabsItem[] | - | The features, in order. |
interval | number | 6000 | Milliseconds each feature stays before advancing. |
autoPlay | boolean | true | Advance on a timer. With false the list is plain tabs. |
defaultIndex | number | 0 | Feature selected on first render when uncontrolled. |
index | number | - | Selected feature when controlled. |
onIndexChange | (index: number) => void | - | Called when the selection changes, by the timer or a user. |
label | string | "Features" | Accessible name of the tab list. |
panelClassName | string | - | Classes for the media panel. |
className | string | - | Classes for the root grid. |
| Field | Type | Description |
|---|---|---|
id | string | Stable key. Defaults to the index. |
title | string | Feature name. |
description | ReactNode | Revealed under the title while it is active. |
icon | ReactNode | Icon before the title. |
content | ReactNode | What the panel shows for this feature. |
tablist: Up and Down (and Left and Right) move between features and wrap, Home and End jump to the ends, and selection follows focus. The panel is labelled by its tab.prefers-reduced-motion: reduce there is no auto-advance and panels change with a short fade instead of a blur and scale.