Interactive Tabs
Tabbed feature section with smooth transitions and styled visual mockups.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| tabs | Array<{label, icon, title, description, visual}> | 3 Uilora tabs | Array of tab items combining tab label, content, and visual mockup. |
| title | string | Everything you need to ship faster. | Section heading text. |
| subtitle | string | Uilora gives you the tools... | Section subtitle text. |
| accentColor | string | #5227FF | Accent color for active tab indicator and highlights. |
When to Use
Ideal for organizing complex features into logical categories. Great for product pages, developer tool documentation, and SaaS platforms with multiple feature sets.
Best Practices
Use 3-5 tabs for optimal usability. Each tab should have a clear, distinct category. Include visual mockups to reinforce the content and break up text.
Why This Component Matters
Tabbed interfaces reduce cognitive load by letting users explore features at their own pace. The smooth transitions and sliding indicator add polish that elevates the experience.
FAQ
QCan I add custom visuals?
Yes, each tab accepts a visual prop that can be any React node — styled divs, images, or custom components.
QDo the tabs animate?
Yes, the active indicator slides with a spring animation via layoutId, and content transitions use fade+slide effects.
QIs the tab bar scrollable on mobile?
Yes, the tab bar uses horizontal overflow scrolling on smaller screens.
Related Components
Uilora Dynamic
Interactive tiered pricing calculator with seat slider, billing toggle, and real-time cost breakdown.
Uilora Cloud Slider
Dark navy 3-plan cloud pricing with per-card sliders, add-on checkboxes, and live price calculation.
Uilora Matrix
Feature comparison matrix with 3 plans, monthly/yearly toggle, Pro spotlight, check/cross icons.