Tabs

Tabbed navigation between content panels.

PreviousAccordion

NextTable

On This Page

Quick ActionsProject StudioNew Nexore Make (AI)Source on GitHub

Tabs

Tabbed navigation between content panels.

Tabs

A set of layered sections of content (tab panels) that display one panel at a time.

When to use

defaultStandard settings panels, navigation within a single dashboard workspace, signin/signup toggles

pillSubcategory filters (e.g. Inbox / Unread / Starred messages)

underlineClean page-level navigation, document tabs, profile sections

Interactive Playground

Live CanvasInteractive

Make changes to your account here.

Controls(5)

variant

select

Visual style of the tabs.

tab1

text

Label for the first tab.

tab2

text

Label for the second tab.

content1

text

Content for the first tab.

content2

text

Content for the second tab.

Generated JSX

Source

import { Tabs, TabsList, TabsTrigger, TabsContent } from "nexoreui"

<Tabs defaultValue="tab1" className="w-full">
  <TabsList>
    <TabsTrigger value="tab1">Account</TabsTrigger>
    <TabsTrigger value="tab2">Password</TabsTrigger>
  </TabsList>
  <TabsContent value="tab1">Make changes to your account here.</TabsContent>
  <TabsContent value="tab2">Change your password here.</TabsContent>
</Tabs>

Default Tabs

Make changes to your account here.

component.tsx

Pill Style Tabs

All messages

component.tsx

Underline Tabs

Music library

component.tsx

Vertical Tabs

General settings

component.tsx

Tabs with Icons

Home dashboard

component.tsx

Page 1 of 2

API Reference (Props)

Prop	Type	Default	Description
defaultValue	string	`—`	The value of the tab that should be active when initially rendered.
value	string	`—`	Controlled value of the active tab.
onValueChange	(value: string) => void	`—`	Callback triggered when the active tab changes.
variant	"default" \| "pill" \| "underline"	`"default"`	Visual style variant (applied to TabsList and TabsTrigger).

Accessibility (a11y)

Keyboard navigation: Supports standard arrow navigation. Pressing Left Arrow / Right Arrow (or Up / Down in vertical tabs) cycles active focus tabs.
ARIA attributes: Exports role="tablist", role="tab", and role="tabpanel" attributes correctly linking labels.

PreviousAccordion

NextTable

On This Page

Quick ActionsProject StudioNew Nexore Make (AI)Source on GitHub

import { Tabs, TabsList, TabsTrigger, TabsContent } from "nexoreui" <Tabs defaultValue="tab1" className="w-full"> <TabsList> <TabsTrigger value="tab1">Account</TabsTrigger> <TabsTrigger value="tab2">Password</TabsTrigger> </TabsList> <TabsContent value="tab1">Make changes to your account here.</TabsContent> <TabsContent value="tab2">Change your password here.</TabsContent> </Tabs>

Prop

Type

Default

Description

defaultValue

string

—

The value of the tab that should be active when initially rendered.

value

string

—

Controlled value of the active tab.

onValueChange

(value: string) => void

—

Callback triggered when the active tab changes.

variant

"default" | "pill" | "underline"

"default"

Visual style variant (applied to TabsList and TabsTrigger).