Tabs

An accessible set of layered sections of content, known as tab panels, that are displayed one at a time.

Component Source

View the source code for the tabs component.

$lib/components/ui/tabs/

Installation

npx nnuikit add tabs

import * as Tabs from "$lib/components/ui/tabs";

Quick Start

Content for Tab 1

<script lang="ts">
  import * as Tabs from "$lib/components/ui/tabs";
</script>

<Tabs.Root value="tab1">
  <Tabs.List>
    <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
    <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
  </Tabs.List>
  <Tabs.Content value="tab1">Content for Tab 1</Tabs.Content>
  <Tabs.Content value="tab2">Content for Tab 2</Tabs.Content>
</Tabs.Root>

Interactive Playground

Switch between size and variant configurations to see how they affect layout and styling.

Overview

This is the overview tab content. Modern and clean layout for your dashboard.

<Tabs.Root value="overview">
  <Tabs.List>
    <Tabs.Trigger   value="overview">Overview</Tabs.Trigger>
    <Tabs.Trigger   value="analytics">Analytics</Tabs.Trigger>
    <Tabs.Trigger   value="settings">Settings</Tabs.Trigger>
  </Tabs.List>
  <Tabs.Content value="overview">Overview content</Tabs.Content>
  <Tabs.Content value="analytics">Analytics content</Tabs.Content>
  <Tabs.Content value="settings">Settings content</Tabs.Content>
</Tabs.Root>

Size

Variant

Visual Variants

Explore different visual styles for tabs.

Primary Underline

Primary uses an underline indicator.

Brand Underline

Brand uses the primary brand color for the underline indicator

Accessibility

Keyboard: Arrow keys navigate between tabs

ARIA: role='tablist' on list, role='tab' on triggers, role='tabpanel' on content

Focus: focus-visible ring on keyboard navigation

Activation: tabs activate on focus (automatic activation)

API Reference

Tabs.Root

Prop	Type	Default	Description
`value`	`string`	-	The active tab value (bindable).
`onValueChange`	`(value: string) => void`	-	Callback when active tab changes.

Tabs.List

Prop	Type	Default	Description
`size`	`'fit-content' \| 'full-width'`	'fit-content'	Width behavior of the tab list.
`variant`	`'secondary' \| 'primary' \| 'contained' \| 'brand'`	'secondary'	Visual style variant.

Built on bits-ui — Tabs uses Tabs from bits-ui for ARIA roles, keyboard navigation, and focus management. For the full primitive API, see the bits-ui Tabs docs.