Tabs

Beta

Panels of content shown one at a time, with arrow-key navigation.

Change your name and avatar.

Change your password.

Billing is coming soon.

Choose what we email you about.

---
import Tabs from "@/components/ui/tabs/Tabs.astro";
import TabsList from "@/components/ui/tabs/TabsList.astro";
import TabsTrigger from "@/components/ui/tabs/TabsTrigger.astro";
import TabsContent from "@/components/ui/tabs/TabsContent.astro";
---

<Tabs id="settings" class="w-full max-w-md">
  <TabsList aria-label="Settings">
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="password">Password</TabsTrigger>
    <TabsTrigger value="billing" disabled>
      Billing
    </TabsTrigger>
    <TabsTrigger value="notifications">Notifications</TabsTrigger>
  </TabsList>
  <TabsContent value="account">Change your name and avatar.</TabsContent>
  <TabsContent value="password">Change your password.</TabsContent>
  <TabsContent value="billing">Billing is coming soon.</TabsContent>
  <TabsContent value="notifications">Choose what we email you about.</TabsContent>
</Tabs>

Installation

npx eris-ui@latest add tabs

pnpm dlx eris-ui@latest add tabs

bunx eris-ui@latest add tabs

yarn dlx eris-ui@latest add tabs

Installs @zag-js/tabs, @zag-js/vanilla.

Vertical

Workspace name and URL.

Invite and remove people.

Delete this workspace.

---
import Tabs from "@/components/ui/tabs/Tabs.astro";
import TabsList from "@/components/ui/tabs/TabsList.astro";
import TabsTrigger from "@/components/ui/tabs/TabsTrigger.astro";
import TabsContent from "@/components/ui/tabs/TabsContent.astro";
---

<Tabs id="workspace" orientation="vertical" class="w-full max-w-md items-start">
  <TabsList aria-label="Workspace">
    <TabsTrigger value="general">General</TabsTrigger>
    <TabsTrigger value="members">Members</TabsTrigger>
    <TabsTrigger value="danger">Danger zone</TabsTrigger>
  </TabsList>
  <TabsContent value="general">Workspace name and URL.</TabsContent>
  <TabsContent value="members">Invite and remove people.</TabsContent>
  <TabsContent value="danger">Delete this workspace.</TabsContent>
</Tabs>

Manual activation

By default, moving focus to a tab selects it. With activationMode="manual", the arrow keys only move focus, and Enter or Space selects. Use it when showing a panel is slow or costly.

npx eris-ui add tabs

pnpm dlx eris-ui add tabs

bunx eris-ui add tabs

---
import Tabs from "@/components/ui/tabs/Tabs.astro";
import TabsList from "@/components/ui/tabs/TabsList.astro";
import TabsTrigger from "@/components/ui/tabs/TabsTrigger.astro";
import TabsContent from "@/components/ui/tabs/TabsContent.astro";
---

<Tabs id="runner" activationMode="manual" class="w-full max-w-md">
  <TabsList aria-label="Runner">
    <TabsTrigger value="npm">npm</TabsTrigger>
    <TabsTrigger value="pnpm">pnpm</TabsTrigger>
    <TabsTrigger value="bun">bun</TabsTrigger>
  </TabsList>
  <TabsContent value="npm">
    <code>npx eris-ui add tabs</code>
  </TabsContent>
  <TabsContent value="pnpm">
    <code>pnpm dlx eris-ui add tabs</code>
  </TabsContent>
  <TabsContent value="bun">
    <code>bunx eris-ui add tabs</code>
  </TabsContent>
</Tabs>

Keyboard

Key	Does
`Tab`	Moves focus to the selected tab, then into its panel
`→` / `←`	Next or previous tab (`↓` / `↑` when vertical), wrapping at the ends
`Home` / `End`	First or last tab
`Enter` or `Space`	Selects the focused tab in manual mode

Disabled tabs are skipped.

Parts

Component	Renders
`Tabs`	The root. Props: `id`, `defaultValue`, `orientation`, `activationMode`, `loopFocus`
`TabsList`	The row of tabs and the sliding indicator
`TabsTrigger`	One tab. Props: `value`, `disabled`
`TabsContent`	The panel for a tab. Prop: `value`