Special Elements
Highlight Follower
Tabs with animated highlight that follows the active tab.
tabshighlightfolloweranimated
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
tabs | TabItem[] | [{id: '1', label: 'Home'}, ...] | Array of tab items with id and label. |
defaultActive | string | tabs[0]?.id | ID of the initially active tab. |
backgroundColor | string | transparent | Background color of the component (hex, rgb, or hsl). |
containerBgColor | string | #f4f4f5 | Background color of the container (hex, rgb, or hsl). |
containerPadding | string | 0.25rem | Padding of the container (CSS value). |
containerBorderRadius | string | 9999px | Border radius of the container (CSS value). |
activeIndicatorBgColor | string | #ffffff | Background color of the active indicator (hex, rgb, or hsl). |
activeIndicatorShadowColor | string | rgba(0,0,0,0.05) | Shadow color of the active indicator (hex, rgb, or hsl). |
activeTextColor | string | #000000 | Text color of active tabs (hex, rgb, or hsl). |
inactiveTextColor | string | #52525b | Text color of inactive tabs (hex, rgb, or hsl). |
hoverTextColor | string | #000000 | Text color of tabs on hover (hex, rgb, or hsl). |
buttonPadding | string | 0.5rem 1.5rem | Padding of tab buttons (CSS value). |
fontSize | string | 0.875rem | Font size of tab labels (CSS value). |
fontWeight | string | 500 | Font weight of tab labels (CSS value). |