Special Elements
Glass Floating
Glassmorphism tabs with floating effect.
tabsglassfloatingglassmorphism
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
tabs | TabItem[] | [{id: '1', label: 'Option 1'}, ...] | Array of tab items with id and label. |
backgroundImage | string | url | Background image URL for the container. |
defaultActive | number | 0 | Index of the initially active tab. |
backgroundColor | string | transparent | Background color of the component (hex, rgb, or hsl). |
containerHeight | string | 16rem | Height of the container (CSS value). |
containerWidth | string | 100% | Width of the container (CSS value). |
containerMaxWidth | string | 28rem | Maximum width of the container (CSS value). |
borderRadius | string | 1rem | Border radius of the container (CSS value). |
buttonBgColor | string | transparent | Background color of tab buttons (hex, rgb, or hsl). |
buttonHoverBgColor | string | rgba(255,255,255,0.2) | Background color of buttons on hover (hex, rgb, or hsl). |
buttonTextColor | string | #ffffff | Text color of tab buttons (hex, rgb, or hsl). |
activeIndicatorBgColor | string | rgba(255,255,255,0.3) | Background color of the active indicator (hex, rgb, or hsl). |
buttonBorderRadius | string | 9999px | Border radius of buttons (CSS value). |
buttonPadding | string | 0.5rem 1rem | Padding of tab buttons (CSS value). |
fontSize | string | 0.75rem | Font size of tab labels (CSS value). |
fontWeight | string | bold | Font weight of tab labels (CSS value). |