ComponentsNew
Icon Tabs
A row of icons. The selected tab widens and slides its name out, the others stay compact.
Customize
accentColor
secondaryColor
glowColor
Based on Icon Tabs (MIT license) · Terms of use
More in Pro
View allProps
9 properties| Property | Type | Default | Description |
|---|---|---|---|
| tabs | { title: string; icon: ReactNode }[] | — | Tabs: title and icon. |
| defaultIndex | number | 0 | Tab selected at first, counted from zero. |
| center | boolean | false | Center the row. |
| duration | number | 0.35 | Expand duration in seconds. |
| onChange | (index: number) => void | — | Called with the selected tab number. |
| accentColor | string | "#ffffff" | Main colour: icon and tint of the selected tab. |
| secondaryColor | string | "#a3a3a3" | Second colour: where the selected tab's tint fades to. |
| glowColor | string | "rgba(255, 255, 255, 0.18)" | Soft glow around the selected tab. |
| className | string | — | Extra classes. |
Dependencies
3 required packages
npm install motion clsx tailwind-merge