Aurora Shimmer
Buttons
Aurora Tabs
A glowing aurora tab row with a sliding highlight that follows the active tab.
Customize
ADVERT
Overview
Aurora Tabs gives you a compact, glowing tab row for navigation or feature switching. A soft aurora glow sits behind the pill-shaped track, and a sliding highlight smoothly follows the active tab while the whole strip tilts gently with pointer movement for a premium, interactive feel.
Props
Use the props below to customise the aurora tabs in your own React application.
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| tabs | { id: string; label: string }[] | No | [{ id: "overview", label: "Overview" }, { id: "features", label: "Features" }, { id: "performance", label: "Performance" }] | Array of tab definitions. Each tab needs a stable id and a label to display in the row. |
| activeId | string | No | undefined | Optional controlled active tab id. When provided, the component treats this as the source of truth and calls onChange when tabs are clicked. |
| onChange | (id: string) => void | No | undefined | Optional callback fired when a tab is clicked with the new tab id. Use together with activeId for a fully controlled setup. |
| colors | string[] | No | ["#020617", "#22d3ee", "#a855f7"] | Array of up to three hex colors used for the canvas, aurora glow and highlight accents. |
| intensity | number | No | 0.9 | Overall strength of the aurora glow behind the tab row. Lower values feel more subtle, higher values feel more vivid. |
| tilt | number | No | 1 | How much the pill-shaped tab strip tilts in 3D as you move the pointer across the component. |
| minHeight | number | string | No | 96 | Minimum height for the tabs container. Accepts a number (pixels) or any valid CSS height string. |
| className | string | No | undefined | Optional custom class name for the root container so you can control outer layout and spacing. |
Related React components
More components from the same category or sharing similar tags.
