Tabs

Base UI-powered Tabs with iOS-flavored interactions — no hover background, tap-scale feedback, and a sliding active indicator across rounded / square / point variants.

import { Tabs } from '@lobehub/ui/base-ui';

NPM Source Edit

Navigation

Default

Loading preview

Implicit Initial Selection

Loading preview

Atom Components

Loading preview

APIs

Tabs

Tabs properties

activeKey: string
className: string
classNames: TabsClassNames
defaultActiveKey: string
items: TabsItem[]
onChange: (key: string) => void
orientation: 'horizontal' | 'vertical'
Defaults to "horizontal".
ref: null | (instance: HTMLDivElement | null) => void | (() => VoidOrUndefinedOnly) | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES] | RefObject<HTMLDivElement | null>
size: 'small' | 'middle' | 'large'
Defaults to "middle".
style: CSSProperties
styles: TabsStyles
variant: 'square' | 'rounded' | 'point'
Defaults to "rounded".

TabsItem

Property	Description	Type	Default
key	Unique key	`string`	-
label	Tab label	`ReactNode`	-
icon	Leading icon	`ReactNode`	-
children	Panel content	`ReactNode`	-
disabled	Whether the tab is disabled	`boolean`	`false`

Variants

rounded (default) — pill-shaped filled background slides between tabs.
square — underline bar with square ends, anchored to the list bottom.
point — small dot indicator centered under the active tab.