Tabs

Set of content sections to be displayed one at a time.
betaView sourceRadix ThemesReka UI

Make changes to your account.

vue
<script setup lang="ts">
import {
  TabsRoot,
  TabsList,
  TabsTrigger,
  TabsContent,
} from '@typlog/ui'
</script>

<template>
  <TabsRoot default-value="account">
    <TabsList>
      <TabsTrigger value="account">Account</TabsTrigger>
      <TabsTrigger value="documents">Documents</TabsTrigger>
      <TabsTrigger value="settings">Settings</TabsTrigger>
    </TabsList>

    <div class="p-4">
      <TabsContent value="account">
        <p>Make changes to your account.</p>
      </TabsContent>

      <TabsContent value="documents">
        <p>Access and update your documents.</p>
      </TabsContent>

      <TabsContent value="settings">
        <p>Edit your profile or update contact information.</p>
      </TabsContent>
    </div>
  </TabsRoot>
</template>

API Reference ​

TabsRoot ​

TabsList ​

PropDefaultType
color
–
Color
highContrast
–
boolean
radius
–
"none""small""medium""large""full"
size
–
"1""2"
variant
–
"soft""outline""surface""classic"

TabsTrigger ​

TabsContent ​

Examples ​

Size ​

vue
<script setup lang="ts">
import {
  TabsRoot,
  TabsList,
  TabsTrigger,
} from '@typlog/ui'
</script>

<template>
  <div class="flex flex-col gap-4">
    <TabsRoot default-value="account">
      <TabsList size="1" variant="classic">
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="documents">Documents</TabsTrigger>
        <TabsTrigger value="settings">Settings</TabsTrigger>
      </TabsList>
    </TabsRoot>

    <TabsRoot default-value="account">
      <TabsList size="2" variant="classic">
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="documents">Documents</TabsTrigger>
        <TabsTrigger value="settings">Settings</TabsTrigger>
      </TabsList>
    </TabsRoot>

    <TabsRoot default-value="account">
      <TabsList size="1" variant="outline">
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="documents">Documents</TabsTrigger>
        <TabsTrigger value="settings">Settings</TabsTrigger>
      </TabsList>
    </TabsRoot>

    <TabsRoot default-value="account">
      <TabsList size="2" variant="outline">
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="documents">Documents</TabsTrigger>
        <TabsTrigger value="settings">Settings</TabsTrigger>
      </TabsList>
    </TabsRoot>

    <TabsRoot default-value="account">
      <TabsList size="1" variant="soft">
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="documents">Documents</TabsTrigger>
        <TabsTrigger value="settings">Settings</TabsTrigger>
      </TabsList>
    </TabsRoot>

    <TabsRoot default-value="account">
      <TabsList size="2" variant="soft">
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="documents">Documents</TabsTrigger>
        <TabsTrigger value="settings">Settings</TabsTrigger>
      </TabsList>
    </TabsRoot>

    <TabsRoot default-value="account">
      <TabsList size="1" variant="surface">
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="documents">Documents</TabsTrigger>
        <TabsTrigger value="settings">Settings</TabsTrigger>
      </TabsList>
    </TabsRoot>

    <TabsRoot default-value="account">
      <TabsList size="2" variant="surface">
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="documents">Documents</TabsTrigger>
        <TabsTrigger value="settings">Settings</TabsTrigger>
      </TabsList>
    </TabsRoot>
  </div>
</template>

Variant ​

Make changes to your account.

Make changes to your account.

Make changes to your account.

Make changes to your account.

vue
<script setup lang="ts">
import {
  TabsRoot,
  TabsList,
  TabsTrigger,
  TabsContent,
} from '@typlog/ui'
</script>

<template>
  <div class="flex flex-col gap-4">
    <TabsRoot default-value="account">
      <TabsList variant="classic" color="gray">
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="documents">Documents</TabsTrigger>
        <TabsTrigger value="settings">Settings</TabsTrigger>
      </TabsList>

      <div class="p-4">
        <TabsContent value="account">
          <p>Make changes to your account.</p>
        </TabsContent>
        <TabsContent value="documents">
          <p>Access and update your documents.</p>
        </TabsContent>
        <TabsContent value="settings">
          <p>Edit your profile or update contact information.</p>
        </TabsContent>
      </div>
    </TabsRoot>

    <TabsRoot default-value="account">
      <TabsList variant="surface">
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="documents">Documents</TabsTrigger>
        <TabsTrigger value="settings">Settings</TabsTrigger>
      </TabsList>

      <div class="p-4">
        <TabsContent value="account">
          <p>Make changes to your account.</p>
        </TabsContent>
        <TabsContent value="documents">
          <p>Access and update your documents.</p>
        </TabsContent>
        <TabsContent value="settings">
          <p>Edit your profile or update contact information.</p>
        </TabsContent>
      </div>
    </TabsRoot>

    <TabsRoot default-value="account">
      <TabsList variant="soft">
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="documents">Documents</TabsTrigger>
        <TabsTrigger value="settings">Settings</TabsTrigger>
      </TabsList>

      <div class="p-4">
        <TabsContent value="account">
          <p>Make changes to your account.</p>
        </TabsContent>
        <TabsContent value="documents">
          <p>Access and update your documents.</p>
        </TabsContent>
        <TabsContent value="settings">
          <p>Edit your profile or update contact information.</p>
        </TabsContent>
      </div>
    </TabsRoot>

    <TabsRoot default-value="account">
      <TabsList variant="outline">
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="documents">Documents</TabsTrigger>
        <TabsTrigger value="settings">Settings</TabsTrigger>
      </TabsList>

      <div class="p-4">
        <TabsContent value="account">
          <p>Make changes to your account.</p>
        </TabsContent>
        <TabsContent value="documents">
          <p>Access and update your documents.</p>
        </TabsContent>
        <TabsContent value="settings">
          <p>Edit your profile or update contact information.</p>
        </TabsContent>
      </div>
    </TabsRoot>
  </div>
</template>

Radius ​

vue
<script setup lang="ts">
import {
  TabsRoot,
  TabsList,
  TabsTrigger,
} from '@typlog/ui'
</script>

<template>
  <div class="flex flex-col gap-4">
    <TabsRoot default-value="account">
      <TabsList radius="none" variant="classic">
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="documents">Documents</TabsTrigger>
        <TabsTrigger value="settings">Settings</TabsTrigger>
      </TabsList>
    </TabsRoot>

    <TabsRoot default-value="account">
      <TabsList radius="small" variant="classic">
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="documents">Documents</TabsTrigger>
        <TabsTrigger value="settings">Settings</TabsTrigger>
      </TabsList>
    </TabsRoot>

    <TabsRoot default-value="account">
      <TabsList radius="medium" variant="classic">
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="documents">Documents</TabsTrigger>
        <TabsTrigger value="settings">Settings</TabsTrigger>
      </TabsList>
    </TabsRoot>

    <TabsRoot default-value="account">
      <TabsList radius="large" variant="classic">
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="documents">Documents</TabsTrigger>
        <TabsTrigger value="settings">Settings</TabsTrigger>
      </TabsList>
    </TabsRoot>

    <TabsRoot default-value="account">
      <TabsList radius="full" variant="classic">
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="documents">Documents</TabsTrigger>
        <TabsTrigger value="settings">Settings</TabsTrigger>
      </TabsList>
    </TabsRoot>
  </div>
</template>