Component

Tabs

A small tab primitive for previews, settings panels, and compact docs surfaces.

Preview

Preview content stays quiet and direct.

Installation

Install the package, then import the component and shared stylesheet in your app.

Package install

Install the package when you want components imported from axie-ui.

install

pnpm add axie-ui

Import

code

import "axie-ui/styles.css";import { Tabs } from "axie-ui";

Registry install

Use the direct URL when you want shadcn to copy editable source into your app. This works without the official registry and does not install axie-ui.

registry

pnpm dlx shadcn@latest add https://axie.alexi.life/r/tabs.json

Copied source import

code

import "@/styles/axie.css";import { Tabs } from "@/components/axie/tabs";

Prefer @axie/tabs? Add the Axie namespace once from the Installation page, then use that shorthand.

Usage

code

import { Tabs } from "axie-ui";export function Example() {  return (    <Tabs      defaultValue="preview"      items={[        { label: "Preview", value: "preview", content: <div>Preview</div> },        { label: "Code", value: "code", content: <div>Code</div> }      ]}    />  );}

Accessibility

Use tabs when panels share the same context.
Expose selected state and connect each tab to its panel.
Keep keyboard navigation predictable with arrow keys when building custom tab behavior.

API Reference

Prop	Type	Default	Description
items	TabsItem[]	-	The tab definitions.
value	string	-	Controlled tab value.
defaultValue	string	-	Initial tab for uncontrolled usage.
onValueChange	(value: string) => void	-	Called when a tab is selected.