Tab navigation components for organizing content into separate sections.
Tabs as Card Header (Same Height)
Normal Card
This is a regular card with a header. The header has a min-height of 40px.
Tabs replace the header using TabsContainer card. The tabs isRow has the same height (40px) as a card header.
Details content.
Settings content.
Overview
Card tabs integrate seamlessly.
Details
Detailed information goes here.
Settings
Configuration options here.
Reports
Analytics data displayed here.
Standalone Tabs
Home
Standalone tabs work anywhere.
Profile
User profile information here.
Messages
Messages and conversations.
Settings
Application settings here.
Tabs with Icons
Home with icons.
Profile with icons.
Messages with icons.
Settings with icons.
Fixed Width Tabs
width / height props ("1x"–"10x") emit the rem min-size utilities minwr-1–minwr-10 / minhr-1–minhr-10 (1rem–10rem) on the tab button. Core has no pa-tabs__item--w-Nx modifier — the min-size utilities are the canonical per-tab width contract. For elastic sizing pass maxwr-* / wr-* via class, optionally with wrapLabels on <Tabs>. 6x Width (6rem each)
Fixed width tabs maintain consistent sizing.
Edit content here.
Delete operations here.
8x Width (8rem each)
Dashboard data.
Analytics data.
Wrap Long Labels
Wrap Long Labels
align="full" stretches the short tabs into dead space, and plain auto width leaves the long one huge and the edge ragged. Set wrapLabels to let the long title wrap, and cap it with a maxwr-* utility (via class) to choose the wrap point. The row then keeps every tab as tall as the wrapped one — no zig-zag — via the flex row's default align-items: stretch. Default (auto width, no wrap) — ragged, long tab dominates
Orders content.
Invoices content.
Delivery sheets content.
Complaints content.
With wrapLabels + maxwr-15 on the long tab — tidy, level
Orders content — the long tab wraps to two lines; the short tabs stretch to match its height.
Invoices content.
Delivery sheets content.
Complaints content.
Per-Tab Width — Real-World Example
Per-Tab Width — Real-World Example
minwr-* floor (the width prop, e.g. width="8x") so the short ones stop looking cramped, and cap the long one with a maxwr-* utility (plus wrapLabels so it wraps) — the row then stays tidy and level. Floor every tab at 8rem (width="8x"), cap + wrap the long one (maxwr-15)
User
Account holder details.
Order
Order summary and line items.
Invoice
Billing and payment status.
Packages
Parcels in this shipment.
Deliveries and returns
Tracking, delivery attempts and returns — the long tab wraps to two lines while the short tabs hold their 8rem floor and stretch to match its height.
Prefer one line? Drop wrapLabels and let the long tab grow past the floor
Same 8rem floor, no cap — the four short tabs are uniform and only “Deliveries and returns” grows to fit its text.
Order.
Invoice.
Packages.
Deliveries and returns.
Center the label inside each tab — add justify-content-center via class
Same floored tabs, but the label is centered within each tab instead of start-aligned.
Order.
Invoice.
Packages.
Deliveries and returns.
minwr-* / wr-*), the label is start-aligned by default. Add the justify-content-center utility — the tab item is a flexbox — to center it (or justify-content-end to end-align). That utility ships in @keenmate/pure-css. It is not the same as align="centered" (pa-tabs--centered), which centers the whole tab group within the bar rather than the label inside each tab. Pills Style Tabs
Dashboard
Key metrics overview.
Analytics
Detailed insights.
Reports
Generated summaries.
Pills with Icons
Dashboard pills.
Analytics pills.
Reports pills.
Vertical Tabs
Account Settings
Manage your account information and preferences.
Security Settings
Configure password and two-factor authentication.
Notification Preferences
Control how and when you receive notifications.
Appearance Options
Customize the look and feel of your interface.
Boxed Tabs
Code repository and file browser.
Issue tracker and bug reports.
Pull request reviews and merges.
Tab Sizes
Small Tabs
Small tabs content - isCompact and space-efficient.
Small tabs - Tab 2
Small tabs - Tab 3
Default Tabs
Default size tabs content - standard spacing.
Default tabs - Tab 2
Default tabs - Tab 3
Large Tabs
Large tabs content - more generous spacing.
Large tabs - Tab 2
Large tabs - Tab 3
Tabs with Badges
All items (48 total).
Active items (12 items).
Pending items (5 items).
Closed items (31 items).
Centered Tabs
Feature highlights and capabilities.
Pricing plans and options.
Customer testimonials and reviews.
Full Width Tabs
Mobile view and responsive design.
Tablet view and layout.
Desktop view and features.
Icon-Only Tabs - Horizontal
Dashboard
Icon-only tabs save space.
Analytics
Analytics data here.
Users
User management here.
Settings
Settings here.
Icon-Only Tabs - Vertical
Home
Vertical icon-only tabs with centered icons.
Profile
Profile settings.
Messages
Message inbox.
Settings
Application settings.
Standalone Tabs - No Card Required
Overview Section
Tabs can exist outside of cards for page-level navigation. Each tab can contain cards or any other content.
Details Section
This pattern is useful for organizing page content into sections.
Reports Section
The tab content can include multiple cards or complex layouts.
Standalone Vertical Tabs
Dashboard
Vertical tabs work great for sidebar-style navigation outside of cards.
Analytics
Analytics content goes here.
Users
User management content here.
Bordered Tabs - Card-Like Wrapper
Dashboard
Bordered tabs wrap the entire tab system in a card-like border. The content has no separate border - it's all unified.
Settings
This pattern works well for standalone tabs that need visual separation from the page background.
Profile
Use pa-tabs__container--bordered wrapper for horizontal tabs.
Bordered Vertical Tabs
Overview
Bordered vertical tabs create a unified card-like appearance.
The border wraps both the tab navigation and content area with a divider between them.
Reports
Perfect for sidebar-style navigation that needs to stand out.
Settings
Use pa-tabs__vertical-layout--bordered modifier for vertical tabs.
Long Tab Titles in Constrained Space
Default (Wrap)
Default behavior - tabs wrap to multiple lines when needed.
User Management System content.
Reports & Analytics content.
Settings & Configuration content.
Collapse Modifier
Collapse mode - inactive tabs show only icons, active tab shows full title.
User Management content.
Reports content.
Settings content.
Scrollable Modifier
Scrollable tabs with TabsScrollable component - click arrows to scroll.
User Management content.
Reports content.
Settings content.
Inline Tabs in Header (Same Height Alignment)
Inline tabs sit in the header row, so this card has the same header height as the card next to it.
Pending items content.
Closed items content.
Regular Card (Header Only)
This card has no tabs - just a header. Notice how both card headers align perfectly when side by side.
Use inlineTabs prop when you need cards with tabs to match the height of cards without tabs.
Tabs can also be used alone in the header without a title.
Details content.
Settings content.
Summary Stats
Cards with different header content still align because isInline tabs use the same header height.