Tab - rafty/ui Docs

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

This component is made on top of Radix UIs Tabs Component with our styling conventions. This component has been shared with you, ensuring that all its native properties are accessible. If you need to apply your own styling you can use the isBarebone (to remove styling from entire component and its subcomponents) or isUnstyled (to remove styling from a particular subcomponent).

Anatomy

Import all parts and piece them together.

import { Tab, TabTrigger, TabList, TabContent } from "@rafty/ui";

<Tab>
  <TabList>
    <TabTrigger />
    <TabContent />
  </TabList>
</Tab>;

Usage

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam quidem nulla ipsum tempore, ad, voluptatibus necessitatibus blanditiis enim nemo commodi temporibus nostrum dolor suscipit exercitationem molestias distinctio. Esse, ad explicabo.

<Tab defaultValue="tab1">
  <TabList>
    <TabTrigger value="tab1">
      Tab1
    </TabTrigger>
    <TabTrigger value="tab2">
      Tab2
    </TabTrigger>
  </TabList>
  <TabContent
    className="p-4"
    value="tab1"
  >
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam quidem nulla ipsum tempore, ad, voluptatibus necessitatibus blanditiis enim nemo commodi temporibus nostrum dolor suscipit exercitationem molestias distinctio. Esse, ad explicabo.
  </TabContent>
  <TabContent
    className="p-4"
    value="tab2"
  >
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Numquam ex nostrum accusamus, harum aperiam consectetur assumenda excepturi, placeat maxime totam libero natus quis minima, laboriosam incidunt repellendus ratione animi repudiandae.
  </TabContent>
</Tab>

Size

There are 3 size options in spinner: sm, md (default) & lg.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae pariatur expedita incidunt veniam temporibus ipsum culpa blanditiis nemo! Error ea facere quod fuga voluptatum accusamus totam neque laboriosam expedita ducimus.

<Tab
  defaultValue="tab1"
  size="sm"
>
  <TabList>
    <TabTrigger value="tab1">
      Tab1
    </TabTrigger>
    <TabTrigger value="tab2">
      Tab2
    </TabTrigger>
  </TabList>
  <TabContent
    className="p-4"
    value="tab1"
  >
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae pariatur expedita incidunt veniam temporibus ipsum culpa blanditiis nemo! Error ea facere quod fuga voluptatum accusamus totam neque laboriosam expedita ducimus.
  </TabContent>
  <TabContent
    className="p-4"
    value="tab2"
  >
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Est, sapiente. Eius facilis voluptate repellendus, tempora aliquam ipsum distinctio aliquid eum fuga pariatur delectus odit adipisci voluptatum error cupiditate iusto laboriosam!
  </TabContent>
</Tab>

Variant

There are 2 variant options in tab: line (default) & enclosed.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptate placeat officiis hic itaque numquam sequi fugiat similique esse reiciendis? Corrupti atque ducimus quas at numquam iste nostrum modi nesciunt eius.

<Tab
  defaultValue="tab1"
  variant="enclosed"
>
  <TabList>
    <TabTrigger value="tab1">
      Tab1
    </TabTrigger>
    <TabTrigger value="tab2">
      Tab2
    </TabTrigger>
  </TabList>
  <TabContent
    className="p-4"
    value="tab1"
  >
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptate placeat officiis hic itaque numquam sequi fugiat similique esse reiciendis? Corrupti atque ducimus quas at numquam iste nostrum modi nesciunt eius.
  </TabContent>
  <TabContent
    className="p-4"
    value="tab2"
  >
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Id maiores excepturi unde, laboriosam natus odit itaque. Necessitatibus, corrupti itaque tempore aut ut voluptates! Doloribus, enim quidem dolore culpa adipisci reprehenderit
  </TabContent>
</Tab>

Orientation

There are 2 orientation options in tab: horizontal (default) & vertical. Both orientation supports all variant.

Vertical Line Variant

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi adipisci fuga mollitia, quia neque rem, blanditiis possimus ducimus at nulla nam cumque veritatis laudantium accusantium quae ex perspiciatis facere aperiam.

<Tab
  className="h-[200px]"
  defaultValue="tab1"
  orientation="vertical"
>
  <TabList>
    <TabTrigger value="tab1">
      Tab1
    </TabTrigger>
    <TabTrigger value="tab2">
      Tab2
    </TabTrigger>
  </TabList>
  <TabContent value="tab1">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi adipisci fuga mollitia, quia neque rem, blanditiis possimus ducimus at nulla nam cumque veritatis laudantium accusantium quae ex perspiciatis facere aperiam.
  </TabContent>
  <TabContent value="tab2">
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cupiditate quis placeat, officia labore quas voluptas quisquam asperiores ut. Est nostrum incidunt perferendis iste facere rem expedita dolorem quod asperiores sed.
  </TabContent>
</Tab>

Vertical Enclosed Variant

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Libero quasi id nesciunt ipsam quaerat ad quod sunt provident! Quidem quod velit ut corporis dolore ipsum, rerum provident magnam impedit nisi.

<Tab
  className="h-[200px]"
  defaultValue="tab1"
  orientation="vertical"
  variant="enclosed"
>
  <TabList>
    <TabTrigger value="tab1">
      Tab1
    </TabTrigger>
    <TabTrigger value="tab2">
      Tab2
    </TabTrigger>
  </TabList>
  <TabContent value="tab1">
    <Text className="px-3">
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Libero quasi id nesciunt ipsam quaerat ad quod sunt provident! Quidem quod velit ut corporis dolore ipsum, rerum provident magnam impedit nisi.
    </Text>
  </TabContent>
  <TabContent value="tab2">
    <Text className="px-3">
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quidem suscipit est rerum ullam rem quos quo veniam maxime! Eius labore porro dolor, ad accusamus vel culpa delectus non at quae!
    </Text>
  </TabContent>
</Tab>

Barebone

Pass isBarebone prop to remove all style in tab and its sub components.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laudantium, nulla velit asperiores expedita error assumenda tempore ut dolores commodi minima incidunt cupiditate hic earum nemo, sunt porro, nobis distinctio recusandae.

<Tab
  className="flex w-full items-stretch md:flex-col"
  defaultValue="tab1"
  isBarebone
>
  <TabList className="dark:border-secondary-700 border-b dark:border-black">
    <TabTrigger
      className="text-secondary-500 dark:text-secondary-400 data-[state=active]:dark:text-secondary-100 data-[disabled]:text-secondary-400 data-[disabled]:dark:text-secondary-600 p-4 transition-colors data-[disabled]:cursor-not-allowed data-[state=active]:border-b-2 data-[state=active]:border-blue-500 data-[state=active]:text-black dark:data-[state=active]:border-blue-400"
      value="tab1"
    >
      Tab1
    </TabTrigger>
    <TabTrigger
      className="text-secondary-500 dark:text-secondary-400 data-[state=active]:dark:text-secondary-100 data-[disabled]:text-secondary-400 data-[disabled]:dark:text-secondary-600 p-4 transition-colors data-[disabled]:cursor-not-allowed data-[state=active]:border-b-2 data-[state=active]:border-blue-500 data-[state=active]:text-black dark:data-[state=active]:border-blue-400"
      value="tab2"
    >
      Tab2
    </TabTrigger>
  </TabList>
  <TabContent
    className="p-4"
    value="tab1"
  >
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laudantium, nulla velit asperiores expedita error assumenda tempore ut dolores commodi minima incidunt cupiditate hic earum nemo, sunt porro, nobis distinctio recusandae.
  </TabContent>
  <TabContent
    className="p-4"
    value="tab2"
  >
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla nostrum earum minus, aliquid doloremque optio harum odio repellat! Doloribus consectetur facere, repellendus omnis rerum dicta consequuntur iure dignissimos. Numquam, accusamus?
  </TabContent>
</Tab>

UnStyled

Pass isUnstyled prop to remove style from a particular sub component.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci ut veniam sequi totam accusantium beatae hic doloribus facilis qui cum, explicabo iste distinctio! Nostrum sunt incidunt consequatur in quibusdam assumenda.

<Tab defaultValue="tab1">
  <TabList
    className="border-secondary-200 dark:border-secondary-700 border-b"
    isUnstyled
  >
    <TabTrigger value="tab1">
      Tab1
    </TabTrigger>
    <TabTrigger value="tab2">
      Tab2
    </TabTrigger>
  </TabList>
  <TabContent
    className="p-4"
    value="tab1"
  >
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci ut veniam sequi totam accusantium beatae hic doloribus facilis qui cum, explicabo iste distinctio! Nostrum sunt incidunt consequatur in quibusdam assumenda.
  </TabContent>
  <TabContent
    className="p-4"
    value="tab2"
  >
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequatur alias eius voluptas ratione dolorum accusantium cum quam eum labore debitis. Ipsum, soluta? Numquam, minima fuga. Libero incidunt doloremque qui omnis.
  </TabContent>
</Tab>

API

Root

Properties	Description	Type	Default
isBarebone	Removes style from whole component	boolean	false

List

Properties	Description	Type	Default
isUnStyled	Removes style from component	`boolean`

Trigger

Properties	Description	Type	Default
isUnStyled	Removes style from component	`boolean`	`false`

Content

Properties	Description	Type	Default
isUnStyled	Removes style from component