ComponentsNew
Sliding Tabs
Text tabs with an indicator that glides to the selected one. Two styles: an underline or a white pill behind the text.
Customize
accentColor
secondaryColor
glowColor
Based on Line Tabs (MIT license) · Terms of use
More in Pro
View allProps
11 properties| Property | Type | Default | Description |
|---|---|---|---|
| tabs | string[] | — | Tab names. |
| defaultValue | string | — | Tab selected at first. The first one by default. |
| variant | 'line' | 'pill' | "line" | Indicator style: an underline or a filled pill. |
| center | boolean | false | Center the row. |
| duration | number | 0.4 | Indicator glide duration in seconds. |
| bounce | number | 0 | Indicator bounce. Zero means no overshoot. |
| onChange | (tab: string) => void | — | Called with the selected tab. |
| accentColor | string | "#ffffff" | Main colour: the pill fill or the start of the underline. Text on the pill turns dark or white to stay readable. |
| secondaryColor | string | "#a3a3a3" | Second colour: where the underline gradient ends. |
| glowColor | string | "rgba(255, 255, 255, 0.3)" | Soft glow under the indicator. |
| className | string | — | Extra classes. |
Dependencies
3 required packages
npm install motion clsx tailwind-merge