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
pa-tabs__item--w-1x through pa-tabs__item--w-10x for 1rem to 10rem min-width. 6x Width (6rem each)
Fixed width tabs maintain consistent sizing.
Edit content here.
Delete operations here.
8x Width (8rem each)
Dashboard data.
Analytics data.
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.