Tabs

A container that presents content in tabs with an animated sliding indicator. It supports 2‑5 tabs, each with slot‑based content. The indicator moves smoothly using spring physics. Three visual variants are available: underline (default), pills (rounded background), and boxed (bordered).

Use Cases

• Organizing related content into switchable panels (features, pricing tiers, product details)
• Settings pages with categorized sections
• Product pages with description/specs/reviews tabs
• Dashboard widgets with different data views
• FAQ sections organized by category

Properties

tabCount

Number of visible tabs (2-5). Extra tab labels/content are hidden. Type: number. Default: 3

tab1Label

Label for the first tab. Type: string. Default: Tab 1

tab2Label

Label for the second tab. Type: string. Default: Tab 2

tab3Label

Label for the third tab (visible when tabCount >= 3). Type: string. Default: Tab 3

tab4Label

Label for the fourth tab (visible when tabCount >= 4). Type: string. Default:

tab5Label

Label for the fifth tab (visible when tabCount = 5). Type: string. Default:

defaultTab

Which tab is active by default (1-based index). Type: number. Default: 1

variant

Visual style variant. Underline: bottom bar indicator. Pills: rounded background slides between tabs. Boxed: bordered card-style tabs. Type: string. Options: underline, pills, boxed. Default: underline

customCss

Custom CSS for styling the tabs container. Type: string.

tab1Content

Content for tab 1. Accepts any Puck components. Type: slot.

tab2Content

Content for tab 2. Accepts any Puck components. Type: slot.

tab3Content

Content for tab 3. Accepts any Puck components. Type: slot.

tab4Content

Content for tab 4. Accepts any Puck components. Type: slot.

tab5Content

Content for tab 5. Accepts any Puck components. Type: slot.

Best Practices

• Use 2-4 tabs for best UX — 5 tabs maximum
• Keep tab labels short (1-3 words) for clean navigation
• Use ‘underline’ variant for standard content pages
• Use ‘pills’ variant for modern/rounded UI with animated background
• Use ‘boxed’ variant for traditional card-style tabbed panels
• Each tab slot accepts any Puck components — use Text, Image, Cards, etc.
• Set defaultTab to the most important/commonly accessed tab

Common Mistakes

Setting tabCount higher than the number of tabs with content

Why it's a problem: Empty tabs confuse users and look broken

Fix: Set tabCount to match the actual number of tabs that have content

Using very long tab labels

Why it's a problem: Labels overflow on mobile and break the tab navigation layout

Fix: Keep labels to 1-3 words. Use the tab content area for detailed descriptions.

Setting defaultTab higher than tabCount

Why it's a problem: The default tab won’t be visible, so tab 1 shows instead

Fix: Ensure defaultTab ≤ tabCount