Components

Tabs

Tabbed content navigation with a composition API (Root, List, Tab, Panel). Supports variants, colors, and keyboard navigation.

import{ Tabs }from"oks-ui"

4 variants7 color rolesKeyboard navControlled/uncontrolledDisabled tabs

Basic

Use Tabs + TabList + Tab + TabPanel for tabbed content.

Colors

Semantic colors for tabs.

Interactive Playground

Controls

variant

color

size

radius

fullWidth

placement

Preview

Generated Code

<Tabs defaultSelectedKey="a">
  <TabList aria-label="Tabs">
    <Tab key="a" title="Account">Account settings</Tab>
    <Tab key="b" title="Profile">Profile settings</Tab>
  </TabList>
</Tabs>

Props

Prop	Type	Default	Description
variant	"solid" \| "bordered" \| "light" \| "underlined"	"solid"	Tabs visual variant.
color	"default" \| "primary" \| "secondary" \| "info" \| "success" \| "warning" \| "danger"	"default"	Tabs color.
size	"xs" \| "xs-sm" \| "sm" \| "md" \| "lg" \| "xl"	"md"	Tabs size.
radius	"none" \| "xs" \| "xs-sm" \| "sm" \| "md" \| "lg" \| "full"	"md"	Border radius.
fullWidth	boolean	false	Fill container width.
selectedKey	Key	—	Controlled selected tab.
defaultSelectedKey	Key	—	Default selected tab.
disabledKeys	Key[]	—	Disabled tab keys.
placement	"top" \| "bottom" \| "start" \| "end"	"top"	Tab list placement.

variant"solid"

"solid" | "bordered" | "light" | "underlined"

Tabs visual variant.

color"default"

Tabs color.

size"md"

"xs" | "xs-sm" | "sm" | "md" | "lg" | "xl"

Tabs size.

radius"md"

"none" | "xs" | "xs-sm" | "sm" | "md" | "lg" | "full"

Border radius.

fullWidthfalse

boolean

Fill container width.

selectedKey—

Key

Controlled selected tab.

defaultSelectedKey—

Key

Default selected tab.

disabledKeys—

Key[]

Disabled tab keys.

placement"top"

"top" | "bottom" | "start" | "end"

Tab list placement.