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

Install the component from your command line.

npm install @raystack/apsara

Anatomy

Import all parts and piece them together.

import { Tabs } from '@raystack/apsara'

<Tabs defaultValue="tab-one">
  <Tabs.List>
    <Tabs.Trigger value="tab-one">General</Tabs.Trigger>
    <Tabs.Trigger value="tab-two">Hosting</Tabs.Trigger>
    <Tabs.Trigger value="tab-three">Editor</Tabs.Trigger>
    <Tabs.Trigger value="tab-four">Billing</Tabs.Trigger>
    <Tabs.Trigger value="tab-five">SEO</Tabs.Trigger>
  </Tabs.List>
</Tabs>

<Tabs defaultValue="tab-one">
  <Tabs.List underline>
    <Tabs.Trigger value="tab-one">General</Tabs.Trigger>
    <Tabs.Trigger value="tab-two">Hosting</Tabs.Trigger>
    <Tabs.Trigger value="tab-three">Editor</Tabs.Trigger>
    <Tabs.Trigger value="tab-four">Billing</Tabs.Trigger>
    <Tabs.Trigger value="tab-five">SEO</Tabs.Trigger>
  </Tabs.List>
</Tabs>

<Tabs defaultValue="tab-one">
  <Tabs.List elevated>
    <Tabs.Trigger value="tab-one">General</Tabs.Trigger>
    <Tabs.Trigger value="tab-two">Hosting</Tabs.Trigger>
    <Tabs.Trigger value="tab-three">Editor</Tabs.Trigger>
    <Tabs.Trigger value="tab-four">Billing</Tabs.Trigger>
    <Tabs.Trigger value="tab-five">SEO</Tabs.Trigger>
  </Tabs.List>
</Tabs>