Aurora Tabs React Component

LIVE PREVIEWInteract with the component

Just React. No extra dependencies.

Copy the component and its CSS module into your project.

CSS Modules

Usage

Matches your current playground settings.

import AuroraTabs from "./AuroraTabs";

export default function Example() {
  return (
    <AuroraTabs
      tabs={[
        {
          "id": "overview",
          "label": "Overview"
        },
        {
          "id": "features",
          "label": "Features"
        },
        {
          "id": "performance",
          "label": "Performance"
        }
      ]}
      colors={[
        "#020617",
        "#22d3ee",
        "#a855f7"
      ]}
      intensity={0.9}
      tilt={1}
      minHeight={96}
    />
  );
}

Using Aurora Tabs

Give each tab a stable identifier and meaningful label. Use activeId and onChange when the selected tab also controls content elsewhere on the page.

Keep tab labels short and test the strip at your narrowest supported width. The surrounding page supplies the content associated with each tab.

Props

Name	Type	Required	Default	Description
tabs	{ id: string; label: string }[]	No	[]	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	Called when the selection or field values change.
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	Additional CSS class names, merged with base component styles.