Tabs

A tabbed interface for switching between views

A tabs component built with Ark UI, with both a convenience API (pass items) and a compound API for full control over markup.

Make changes to your account here.

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

export default function Example() {
  return (
    <Tabs
      defaultValue="account"
      items={[
        { value: "account", label: "Account", content: <p>Make changes to your account here.</p> },
        { value: "password", label: "Password", content: <p>Change your password here.</p> },
      ]}
    />
  );
}

View Code

Installation

bash

liminal add tabs

Usage

Make changes to your account here.

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

export default function Example() {
  return (
    <Tabs
      defaultValue="account"
      items={[
        { value: "account", label: "Account", content: <p>Make changes to your account here.</p> },
        { value: "password", label: "Password", content: <p>Change your password here.</p> },
      ]}
    />
  );
}

View Code

Examples

Convenience API

Pass an items array with value, label, and content. One open tab at a time by default.

Make changes to your account here.

<Tabs
  defaultValue="account"
  items={[
    { value: "account", label: "Account", content: <p>Make changes to your account here.</p> },
    { value: "password", label: "Password", content: <p>Change your password here.</p> },
  ]}
/>

View Code

Compound API

Use TabsRoot, TabsList, TabsTrigger, and TabsContent for custom layout or styling.

Make changes to your account here.

import {
  TabsRoot,
  TabsList,
  TabsTrigger,
  TabsContent,
} from "@/components/ui/tabs";

export default function Example() {
  return (
    <TabsRoot defaultValue="account">
      <TabsList>
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="password">Password</TabsTrigger>
      </TabsList>
      <TabsContent value="account">
        Make changes to your account here.
      </TabsContent>
      <TabsContent value="password">
        Change your password here.
      </TabsContent>
    </TabsRoot>
  );
}

View Code

API

Prop	Type	Default	Description
items	TabsItem[]	-	Array of { value, label, content, disabled? }. Used by convenience API.
defaultValue	string	-	Initial active tab value (uncontrolled).
value	string	-	Active tab value (controlled).
onValueChange	(details: { value: string }) => void	-	Callback when the active tab changes.