Tabs ✨
Explore different tab styles with customizable animations for content, buttons, and sliders
Tabs - Slider Animation
Modern tabs with smooth slider fade-in animation, button scale on hover, and content sliding from bottom
Simple (Modern) - Fade Animation
Clean modern tabs with slide-left hover animation and fade content transition
This is the content for Tab 1.
Tabs (Classic) - Slide Left Animation
Classic tab style with content sliding in from the left
With Sliding Underline - Fade & Bounce Animation
Modern tabs with animated underline slider and bouncing content transition
With Icons - Slide Right Animation
Tabs with FontAwesome icons and content sliding from the right
With Container - Bounce Animation
Button-styled tabs with scale hover effect and bouncing content
Tabs (Scale Underline & Content Animation)
Modern tabs with scale animation for both underline and content
⚡ Lightning Fast
Experience blazing fast load times with optimized rendering and efficient state management. Our components are built for performance from the ground up.
Product Gallery - Scale & Fade Animation
Button-styled tabs with rich gradient content cards and scale animations
Beautiful by Default
Every component is crafted with attention to detail, ensuring your application looks professional and polished without extra effort.
Props Reference
| Prop | Type | Description |
|---|---|---|
| style | Style | Tab style: Modern, SimpleModern, Classic, Button |
| tabs | array | Array of tab objects with title and content |
| sliderAnimation | object | Underline slider animation config (enabled, duration, easing, type, fadeInDuration) |
| buttonHoverAnimation | object | Tab button hover animation (enabled, type, duration, scale) |
| contentAnimation | object | Content transition animation (enabled, type, duration) |
| AnimationType | enum | Fade, Scale, SlideLeft, SlideRight, SlideBottom, Bounce |