Tabs

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

Import

import { Tabs } from '@chimera-ui/components'

Usage

Make changes to your account here. Click save when you're done.

Name

Username

<Tabs.Root
  className="w-[400px]"
  defaultValue="account"
>
  <Tabs.List>
    <Tabs.Trigger value="account">
      Account
    </Tabs.Trigger>
    
    
    <Tabs.Trigger value="password">
      Password
    </Tabs.Trigger>
  </Tabs.List>
  <Tabs.Content value="account">
    <span className="text-sm text-base-content">
      <p>
        Make changes to your account here. Click save when you're done.
      </p>
    </span>
    <div className="grid gap-2 py-4">
      <div className="space-y-1">
        <Label htmlFor="name">
          Name
        </Label>
        <Input
          defaultValue="Pedro Duarte"
          id="name"
        />
      </div>
      <div className="space-y-1">
        <Label htmlFor="username">
          Username
        </Label>
        <Input
          defaultValue="@peduarte"
          id="username"
        />
      </div>
    </div>
    <div className="flex">
      <Button>
        Save changes
      </Button>
    </div>
  </Tabs.Content>
  <Tabs.Content value="password">
    <span className="text-sm text-base-content">
      <p>
        Change your password here. After saving, you'll be logged out.
      </p>
    </span>
    <div className="grid gap-2 py-4">
      <div className="space-y-1">
        <Label htmlFor="current">
          Current password
        </Label>
        <Input
          id="current"
          type="password"
        />
      </div>
      <div className="space-y-1">
        <Label htmlFor="new">
          New password
        </Label>
        <Input
          id="new"
          type="password"
        />
      </div>
    </div>
    <div className="flex">
      <Button>
        Save password
      </Button>
    </div>
  </Tabs.Content>
</Tabs.Root>

Switch Toggle