Tabs

Installation

npx shadcn@latest add https://ui.timkit.cn/r/tabs.json

Usage

import { Tabs } from "@/components/ui/tabs"

Examples

Tabs · Basic tabs

Loading preview...

Tabs · Basic tabs

Loading preview...

Tabs · Basic tabs

Loading preview...

Tabs · Basic tabs

Loading preview...

Tabs · Basic tabs

Loading preview...

Tabs · Basic tabs

Loading preview...

Tabs · Basic tabs

Loading preview...

Tabs · Basic tabs

Loading preview...

Tabs · Basic tabs

Loading preview...

Tabs · Basic tabs

Loading preview...

Tabs · Basic tabs

Loading preview...

Tabs · Basic tabs

Loading preview...

Tabs · Basic tabs

Loading preview...

Tabs · Basic tabs

Loading preview...

Tabs · Basic tabs

Loading preview...

Tabs · Basic tabs

Loading preview...

Tabs · Basic tabs

Loading preview...

Tabs · Basic tabs

Loading preview...

Tabs · Basic tabs

Loading preview...

Tabs · Basic tabs

Loading preview...

Structured API

Component

tabs

Logic

zag / tabs

Runtime Frameworks

ReactVueWeappHTML

Supported Platforms

WebWeChat Mini Program

Configuration

Prop	Type	Default	Description
logic.provider*	enum (zag \| native \| none)	zag	State and interaction provider used by this component.
logic.machine	string	tabs	Underlying state machine identifier when provider is zag.
platforms*	array	Web, WeChat Mini Program	Platforms officially supported by this schema.
frameworks*	array	React, Vue, Weapp, HTML	Framework demos/code currently available in registry files.
dependencies	array	@timui/core, @zag-js/react	Runtime package dependencies required by this registry item.
optionalPeerDependencies	array	-	Optional peer dependencies used by this registry item.
registryDependencies	array	use-machine	Dependent Timkit registry components/hook entries.

Props

Prop	Type	Default	Description
value	string	-	The controlled value of the tab to activate.
defaultValue	string	-	The default active tab value.
orientation	enum (horizontal \| vertical)	horizontal	The orientation of the tabs.

Events

Prop	Type	Default	Description
onValueChange	event	-	Event handler called when the value changes.

Slots

Prop	Type	Default	Description
default	slot	-	The tabs list and content

Parts

Prop	Type	Default	Description
root*	root	-	The tabs container
list	part	-	The tab list
trigger	part	-	The tab trigger
content	part	-	The tab content panel

This API reference is generated from `/packages/core` component schemas to keep React/Vue/Weapp docs consistent.

Extended notes are not available for this component yet.

Tabs

Installation

npx shadcn@latest add https://ui.timkit.cn/r/tabs.json

Usage

import { Tabs } from "@/components/ui/tabs"

Examples

Tabs · Basic tabs

Loading preview...

Tabs · Basic tabs

Loading preview...

Tabs · Basic tabs

Loading preview...

Tabs · Basic tabs

Loading preview...

Tabs · Basic tabs

Loading preview...

Tabs · Basic tabs

Loading preview...

Tabs · Basic tabs

Loading preview...

Tabs · Basic tabs

Loading preview...

Tabs · Basic tabs

Loading preview...

Tabs · Basic tabs

Loading preview...

Tabs · Basic tabs

Loading preview...

Tabs · Basic tabs

Loading preview...

Tabs · Basic tabs

Loading preview...

Tabs · Basic tabs

Loading preview...

Tabs · Basic tabs

Loading preview...

Tabs · Basic tabs

Loading preview...

Tabs · Basic tabs

Loading preview...

Tabs · Basic tabs

Loading preview...

Tabs · Basic tabs

Loading preview...

Tabs · Basic tabs

Loading preview...

Structured API

Component

tabs

Logic

zag / tabs

Runtime Frameworks

ReactVueWeappHTML

Supported Platforms

WebWeChat Mini Program

Configuration

Prop	Type	Default	Description
logic.provider*	enum (zag \| native \| none)	zag	State and interaction provider used by this component.
logic.machine	string	tabs	Underlying state machine identifier when provider is zag.
platforms*	array	Web, WeChat Mini Program	Platforms officially supported by this schema.
frameworks*	array	React, Vue, Weapp, HTML	Framework demos/code currently available in registry files.
dependencies	array	@timui/core, @zag-js/react	Runtime package dependencies required by this registry item.
optionalPeerDependencies	array	-	Optional peer dependencies used by this registry item.
registryDependencies	array	use-machine	Dependent Timkit registry components/hook entries.

Props

Prop	Type	Default	Description
value	string	-	The controlled value of the tab to activate.
defaultValue	string	-	The default active tab value.
orientation	enum (horizontal \| vertical)	horizontal	The orientation of the tabs.

Events

Prop	Type	Default	Description
onValueChange	event	-	Event handler called when the value changes.

Slots

Prop	Type	Default	Description
default	slot	-	The tabs list and content

Parts

Prop	Type	Default	Description
root*	root	-	The tabs container
list	part	-	The tab list
trigger	part	-	The tab trigger
content	part	-	The tab content panel

This API reference is generated from `/packages/core` component schemas to keep React/Vue/Weapp docs consistent.

Extended notes are not available for this component yet.