Tabs

free

Tabs group related content into panels and switch between them in place.

Home shows recent activity and a summary of what changed since your last visit.

import Tabs from '@/components/ui/tabs';

const { TabNav, TabList, TabContent } = Tabs;

Installation

Add this component with the NateUI CLI.

npx nateui@latest add Tabs

pnpm dlx nateui@latest add Tabs

yarn dlx nateui@latest add Tabs

Examples

Default

The underline variant draws a moving indicator beneath the active tab.

import Tabs from '@/components/ui/tabs';

const { TabNav, TabList, TabContent } = Tabs;

Pill

The pill variant fills the active tab with a rounded surface instead of an underline.

import Tabs from '@/components/ui/tabs';

const { TabNav, TabList, TabContent } = Tabs;

Icons

Pass an icon node through the `icon` prop to sit it before the tab label.

import { PiHouse, PiPhone, PiUser } from 'react-icons/pi'
import Tabs from '@/components/ui/tabs';

const { TabNav, TabList, TabContent } = Tabs;

Disabled

import Tabs from '@/components/ui/tabs';

const { TabNav, TabList } = Tabs;

Controlled

Hold the active value in state and pass it back through `value` to drive tabs from the outside.

import { useState } from 'react';
import Tabs from '@/components/ui/tabs';

const { TabNav, TabList, TabContent } = Tabs;

API

Tabs is a compound component. Tabs owns the selected value and shares it through context, while Tabs.TabNav and Tabs.TabContent opt in to that value by their own value.

Tabs

Prop	Description	Type	Default
`variant`	Visual style of the tab strip.	`TabsVariant`	`'underline'`
`defaultValue`	Value selected on first render when uncontrolled.	`string`	-
`value`	Selected value in controlled mode.	`string`	-
`onChange`	Callback fired with the next value when the selection changes.	`(value: string) => void`	-

Tabs.TabList

Prop	Description	Type	Default
`className`	Extra classes for the tab strip, which also renders the active indicator.	`string`	-
`children`	The `Tabs.TabNav` items.	`ReactNode`	-

Tabs.TabNav

Prop	Description	Type	Default
`value`	Value this tab activates. Must match its `Tabs.TabContent`.	`string`	-
`icon`	Icon node rendered before the label.	`string \| ReactNode`	-
`disabled`	Prevent selecting this tab.	`boolean`	`false`
`children`	Tab label content.	`ReactNode`	-

Tabs.TabContent

Prop	Description	Type	Default
`value`	Value that shows this panel. Must match a `Tabs.TabNav`.	`string`	-
`children`	Panel content, rendered only while selected.	`ReactNode`	-

Types

type TabsVariant = 'underline' | 'pill'