Tabs
Horizontal and vertical tab interfaces for switching content panes. Covers underline, pill, card, and lifted styles; icon + label; scrollable overflow; vertical orientation; lazy-loaded panels; and disabled states.
1. Underline Tabs
Classic underline style. The active indicator is a 2px bottom border that sits flush with the tab strip's divider line. DaisyUI's tab-active uses box-shadow internally; this variant uses border-bottom directly so it can be coloured independently of the component theme.
Content for the Overview tab. Replace with real panel markup.
Content for the Features tab. Replace with real panel markup.
Content for the Pricing tab. Replace with real panel markup.
Content for the Changelog tab. Replace with real panel markup.
2. Pill / Segmented Tabs
Active tab appears as a white card lifted above a grey tray — the "segmented control" pattern common in app settings and filter bars. Works at any width; the tray adapts to the number of tabs.
Inline (auto-width)
Content for Overview.
Content for Features.
Content for Pricing.
Content for Changelog.
Full-width (equal columns)
Content for Overview.
Content for Features.
Content for Pricing.
3. Card / Lifted Tabs
DaisyUI's tabs-lifted class renders tabs as card tabs with a raised active panel. The panel content merges visually with the active tab via a shared top border. Alpine drives active state; DaisyUI handles all visual styling.
Content for Account tab.
Content for Security tab.
Content for Appearance tab.
4. Icon + Label Tabs
Icons reinforce meaning, especially when tabs share similar labels. The disabled "Billing" tab demonstrates the aria-disabled + pointer-events:none pattern — the element stays in the tab sequence for screen readers but does not activate.
Horizontal — icon left of label
Panel: Activity.
Panel: Team.
Panel: Settings.
Panel: Billing (disabled — not reachable).
Icon-only (no label — use aria-label)
Panel: Activity.
Panel: Team.
Panel: Settings.
5. Tabs with Badges
Badge counts inside tabs surface unread counts, queue sizes, or error totals. The badge inherits the tab's active/inactive colour so it reads as part of the label, not a separate element.
Showing Inbox messages (24 unread).
Showing Sent messages.
Showing Drafts messages (3 unread).
Showing Archived messages.
6. Scrollable Overflow
When there are too many tabs to fit in one row, the tab strip scrolls horizontally. The scrollbar is hidden visually (still operable via touch/trackpad). Fade gradients at each edge signal overflow content without adding scroll buttons.
Content for Dashboard. Scroll the tab strip left/right to see more tabs.
Content for Orders. Scroll the tab strip left/right to see more tabs.
Content for Products. Scroll the tab strip left/right to see more tabs.
Content for Customers. Scroll the tab strip left/right to see more tabs.
Content for Analytics. Scroll the tab strip left/right to see more tabs.
Content for Marketing. Scroll the tab strip left/right to see more tabs.
Content for Discounts. Scroll the tab strip left/right to see more tabs.
Content for Reports. Scroll the tab strip left/right to see more tabs.
Content for Integrations. Scroll the tab strip left/right to see more tabs.
Content for Settings. Scroll the tab strip left/right to see more tabs.
7. Vertical Tabs
Settings pages and admin dashboards often use a vertical sidebar of tabs alongside a content panel. The active indicator becomes a right-side border (mirroring the sidebar-navigation pattern) and the tab list sits on a slightly off-white background to separate it from the content area.
Profile
Manage your display name, avatar, and contact details.
Security
Update your password, enable two-factor authentication, and review active sessions.
Notifications
Choose which events send you email, push, or in-app notifications.
API Keys
Create and revoke personal access tokens for API integrations.
Team
Invite teammates, assign roles, and manage organisation membership.
Billing
View your current plan, payment method, and invoice history.
8. Lazy-Loaded Panel Content
Heavy panels (charts, tables, embeds) should only render when first activated — not up-front. Alpine tracks which tabs have been visited; once visited, the panel stays mounted to avoid re-fetching. The first switch shows a loading skeleton that resolves after a simulated delay.
Summary panel — loaded immediately (pre-visited).
Switch to Chart or Table to see the skeleton appear on first load.
Chart panel — rendered only after first activation. In production, mount your Chart.js canvas here.
Table panel — rendered only after first activation. In production, mount your data table here.
Click Chart or Table — a 900ms skeleton appears on the first visit, then the panel stays mounted on return visits.
9. Sizes
Tab font size and padding scale via Tailwind text utilities. Shown across three sizes using the underline variant; the same applies to pill tabs.
sm — text-xs, compact padding
Overview panel.
Features panel.
Pricing panel.
md — text-sm (default)
Overview panel.
Features panel.
Pricing panel.
lg — text-base, generous padding
Overview panel.
Features panel.
Pricing panel.
10. States & Edge Cases
Individual conditions every tab implementation must handle.
Single tab — edge case
Single panel — nothing to switch to.
Two tabs (binary toggle)
List view.
Grid view.
Very long tab label — truncate
Long-label panel. The tab text truncates with a title tooltip.
Loading skeleton