Murasaki
Components

Tabs

A set of layered sections of content—known as tab panels—that are displayed one at a time.

Make changes to your account here.

Usage

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@murasakijs/ui";
<Tabs defaultValue="account">
  <TabsList>
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="password">Password</TabsTrigger>
  </TabsList>
  <TabsContent value="account">Account settings.</TabsContent>
  <TabsContent value="password">Password settings.</TabsContent>
</Tabs>

API Reference

Subcomponents

ComponentDescription
TabsThe root primitive. Accepts value, defaultValue, onValueChange, orientation.
TabsListThe row of triggers.
TabsTriggerA tab button. Accepts value (required) and disabled.
TabsContentThe panel shown when its matching value is active.

Selection state, arrow-key navigation, and tab/panel relationships are provided by React Aria Components.

Improve this page on GitHub

On this page