Special Elements
Swipe (Mobile)
Mobile-optimized swipeable tabs with smooth transitions.
tabsswipemobilegesture
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
tabs | TabItem[] | [{id: '1', label: 'View 1', content: '...'}, ...] | Array of tab items with id, label, and optional content. |
defaultActive | number | 0 | Index of the initially active tab. |
backgroundColor | string | transparent | Background color of the component (hex, rgb, or hsl). |
containerBgColor | string | #ffffff | Background color of the container (hex, rgb, or hsl). |
containerBorderColor | string | #e4e4e7 | Border color of the container (hex, rgb, or hsl). |
containerBorderRadius | string | 0.75rem | Border radius of the container (CSS value). |
containerMaxWidth | string | 28rem | Maximum width of the container (CSS value). |
headerBorderColor | string | #f4f4f5 | Border color of the header section (hex, rgb, or hsl). |
activeTabTextColor | string | #2563eb | Text color of active tabs (hex, rgb, or hsl). |
inactiveTabTextColor | string | #a1a1aa | Text color of inactive tabs (hex, rgb, or hsl). |
tabPadding | string | 1rem | Padding of tab buttons (CSS value). |
tabFontSize | string | 0.875rem | Font size of tab labels (CSS value). |
tabFontWeight | string | 600 | Font weight of tab labels (CSS value). |
contentBgColor | string | transparent | Background color of content area (hex, rgb, or hsl). |
contentTextColor | string | #71717a | Text color of content area (hex, rgb, or hsl). |
contentHeight | string | 10rem | Height of content area (CSS value). |
contentPadding | string | 2rem | Padding of content area (CSS value). |
springStiffness | number | 300 | Spring animation stiffness. |
springDamping | number | 30 | Spring animation damping. |