NV Elements Catalog Starters Repo System Themes Getting Started Getting Started Installation CLI MCP Skills Lint Integrations Getting Started Angular Bundles Custom Elements Golang Hugo Import Maps Lit Lit Library MCP Apps NextJS Nuxt Preact React SolidJS Svelte TypeScript Vue About Changelog Metrics Support Accessibility Contributions Requests Migration Foundations Overview Typography Iconography Themes Design Tokens Size & Space Objects Interactions Support Status Color Animation Fonts Layers Custom Layout Horizontal Vertical Grid Popovers i18n Visualization View Transitions Elements Accordion Alert Avatar Badge Breadcrumb Button Button Group Card Chat Message Checkbox Color Combobox Copy Button Datagrid Integrations Column Action Column Alignment Column Fixed Column width Container Card Display Settings Footer Heatmap Keynav Multi Select Pagination Panel Detail Panel Grid Performance Placeholder Row Action Row Groups Row Sort Scroll Height Single Select Stripe Date Datetime Dialog Divider Dot Drawer Dropdown Dropdown Group Dropzone File Format Datetime Format Number Format Relative Time Forms Validation Actions Control Icon Icon Button Input Input Group Logo Menu Month Notification Page Page Header Page Loader Pagination Progressive Filter Chip Progress Bar Progress Ring Password Preferences Input Pulse Radio Range Resize Handle Search Select Skeleton Sort Button Sparkline Star Rating Steps Switch Tabs Tag Textarea Time Toast Toggletip Toolbar Tooltip Tree Week Patterns Authentication Browse Chat Dashboard Editor Empty States Heatmap Keyboard Shortcut Logging Media Navigation Onboarding Panel Responsive Search Subheader Trend Code Codeblock Monaco Input Diff Input Editor Diff Editor Problems Markdown Markdown CSS Utility Labs Responsive Layout Viewport Container Patterns Forms API Design Properties & Attributes Slots Registration CustomEvents Stateless Composition Styles Packaging Glossary Logs Internal Guidelines Agent Harness Agent Tooling Agent Ownership Documentation Examples TypeScript Testing Unit Testing Accessibility Testing Lighthouse Testing SSR Testing Visual Testing Troubleshooting Component Creation Internal Examples All Examples

Tabs

stable:  0.2.4 Coverage: 92.30% Bundle: 14.98kb Lighthouse: 97 Axe Core Released: 0.10.0
Overview API Examples
DefaultBorderlessTabsBorderBackgroundWithDotsVerticalTabsBorderlessVerticalTabsStatelessTabsLinksOverflowTabsWithTooltipsGroupPanelsGroupVerticalPanelsGroupVerticalEndExternalControls

Default

Overview Details Settings
overview content
details content
settings content
Edit Example

Tabs provide a selection UX, typically used for swapping content shown on a page, or within a navigation context.

Borderless Tabs

test-case
Tab 1 Tab 2 Tab 3 Disabled Tab 5
Edit Example

Borderless tabs variant for minimal visual styling without border emphasis.

Border Background

test-case
Tab 1 Tab 2 Tab 3
Edit Example

Tabs with custom border background styling for brand-specific visual customization.

With Dots

Tab 1 Tab 2 Tab 3 Tab 4 10 Tab 5
Edit Example

Tabs with notification dots for indicating unread content or alerts within tab sections.

Vertical Tabs

Tab 1 Tab 2 Tab 3 Disabled Tab 5
Edit Example

Vertical tabs layout for sidebar navigation and vertical content organization patterns.

Borderless Vertical Tabs

test-case
Tab 1 Tab 2 Tab 3 Tab 4
Edit Example

Borderless vertical tabs with icons for enhanced visual navigation and minimal styling.

Stateless Tabs

Tab 1 Tab 2 Tab 3 Tab 4 Disabled
Edit Example

Stateless tabs for external state management without built-in selection behavior.

Tab 1 Tab 2 Tab 3
Edit Example

Tabs with link navigation for routing-based tab switching and page navigation.

Overflow Tabs

test-case
Tab 1 Tab 2 Tab 3 Tab 4 Tab 5 Tab 6 Tab 7 Tab 8 Tab 9 Tab 10 Tab 11 Tab 12 Tab 13 Tab 14 Tab 15 Tab 16 Tab 17 Tab 18 Tab 19 Tab 20
Edit Example

Tabs with overflow handling for managing large numbers of tabs with scrolling behavior.

With Tooltips

test-case
Tooltip for tab 1 Tooltip for tab 2 Tooltip for tab 3 Tab 1 Tab 2 Tab 3
Edit Example

Tabs selection state and a popover working together without any CSS Anchor Positioning collisions.

Group Panels

Overview Details Settings

Overview

High-level release status and current priorities.
Status
Ready for review
Audience
Design and product owners
Next step
Validate the tab labels and panel order

Details

Supporting context for teams that need implementation specifics.
Owner
Elements design system
Coverage
Unit, SSR, and accessibility checks
Focus
Selection sync and panel wiring

Settings

Configuration notes for authors and downstream consumers.
Selection
Controlled by the active tab value
Panels
Matched by slot name
Actions
External buttons can drive the same group
Edit Example

Group tabs with slot-matched panels and structured card content when one selected value should control both the tab state and revealed details.

Group Vertical Panels

Overview Details Settings

Overview

High-level release status and current priorities.
Status
Ready for review
Audience
Design and product owners
Next step
Validate the tab labels and panel order

Details

Supporting context for teams that need implementation specifics.
Owner
Elements design system
Coverage
Unit, SSR, and accessibility checks
Focus
Selection sync and panel wiring

Settings

Configuration notes for authors and downstream consumers.
Selection
Controlled by the active tab value
Panels
Matched by slot name
Actions
External buttons can drive the same group
Edit Example

Tab group with vertical tab strip at inline-start beside slot-matched panels for sidebar-style settings and details layouts in LTR.

Group Vertical End

Overview Details Settings

Overview

High-level release status and current priorities.
Status
Ready for review
Audience
Design and product owners
Next step
Validate the tab labels and panel order

Details

Supporting context for teams that need implementation specifics.
Owner
Elements design system
Coverage
Unit, SSR, and accessibility checks
Focus
Selection sync and panel wiring

Settings

Configuration notes for authors and downstream consumers.
Selection
Controlled by the active tab value
Panels
Matched by slot name
Actions
External buttons can drive the same group
Edit Example

Tab group with vertical tab strip at inline-end beside slot-matched panels when the tab rail should sit on the opposite side from inline-start sidebars.

External Controls

Overview Details Settings

Overview

Quick status for the current tab group.
State
Overview is active
Signal
Use this tab for a summary of the current workflow
Tip
Pair it with external controls for quick switching

Details

Deeper context for follow-up tasks and implementation notes.
State
Details are available on demand
Signal
Use this tab when readers need extra context
Tip
Keep the content specific to the selected tab

Settings

Preferences and coordination notes for the shared tab group.
State
Settings remain in sync with the selected value
Signal
Useful for configuration and admin actions
Tip
Use external buttons when the layout needs extra actions
overview details settings
Edit Example

Drive the same tabs group from external buttons when layouts need tabs and secondary actions to stay in sync with structured panel content.