Tabs

Tabs organize content into multiple sections and allow users to navigate between them.

Tab 1

Tab 2

Tab 3

Tab Panel 1

import { Tab, TabList, TabPanel, Tabs } from 'cwl-ui'
 
export function Default() {
  return (
    <Tabs>
      <TabList aria-label="An example demonstrating how to use Tabs">
        <Tab id="1">Tab 1</Tab>
        <Tab id="2">Tab 2</Tab>
        <Tab id="3">Tab 3</Tab>
      </TabList>
      <TabPanel id="1">Tab Panel 1</TabPanel>
      <TabPanel id="2">Tab Panel 2</TabPanel>
      <TabPanel id="3">Tab Panel 3</TabPanel>
    </Tabs>
  )
}

Component API

Prop	Default	Description
aria-label	`undefined`	A label for assisting assistive technologies.
isDisabled	`false`	A prop that disables all Tabs at once.
disabledKeys	`undefined`	An array that disables only certain Tabs.
orientation	`vertical`	Either `vertical` or `horizontal` which determines how the tabs are stacked.

See React Aria Tabs for more details.

Examples

Default

Tab 1

Tab 2

Tab 3

Tab Panel 1

import { Tab, TabList, TabPanel, Tabs } from 'cwl-ui'
 
export function Default() {
  return (
    <Tabs>
      <TabList aria-label="An example demonstrating how to use Tabs">
        <Tab id="1">Tab 1</Tab>
        <Tab id="2">Tab 2</Tab>
        <Tab id="3">Tab 3</Tab>
      </TabList>
      <TabPanel id="1">Tab Panel 1</TabPanel>
      <TabPanel id="2">Tab Panel 2</TabPanel>
      <TabPanel id="3">Tab Panel 3</TabPanel>
    </Tabs>
  )
}

Vertical Tabs

Set the orientation prop to vertical to display tabs vertically.

Tab 1

Tab 2

Tab 3

Tab Panel 1

import { Tab, TabList, TabPanel, Tabs } from 'cwl-ui'
 
export function Vertical() {
  return (
    <Tabs orientation="vertical">
      <TabList aria-label="An example demonstrating how to use vertical tabs">
        <Tab id="1">Tab 1</Tab>
        <Tab id="2">Tab 2</Tab>
        <Tab id="3">Tab 3</Tab>
      </TabList>
      <TabPanel id="1">Tab Panel 1</TabPanel>
      <TabPanel id="2">Tab Panel 2</TabPanel>
      <TabPanel id="3">Tab Panel 3</TabPanel>
    </Tabs>
  )
}

Disabled

Disabled all Tabs by setting the isDisabled prop.

Tab 1

Tab 2

Tab 3

Tab Panel 1

import { Tab, TabList, TabPanel, Tabs } from 'cwl-ui'
 
export function Disabled() {
  return (
    <Tabs isDisabled>
      <TabList aria-label="An example demonstrating how to use disabled Tabs">
        <Tab id="1">Tab 1</Tab>
        <Tab id="2">Tab 2</Tab>
        <Tab id="3">Tab 3</Tab>
      </TabList>
      <TabPanel id="1">Tab Panel 1</TabPanel>
      <TabPanel id="2">Tab Panel 2</TabPanel>
      <TabPanel id="3">Tab Panel 3</TabPanel>
    </Tabs>
  )
}

Disabled Items

Disable items by setting passing the disabledKeys props.

Tab 1

Tab 2

Tab 3

Tab Panel 1

import { Tab, TabList, TabPanel, Tabs } from 'cwl-ui'
 
export function DisabledKeys() {
  return (
    <Tabs disabledKeys={['2']}>
      <TabList aria-label="An example demonstrating how to use disabled keys Tabs">
        <Tab id="1">Tab 1</Tab>
        <Tab id="2">Tab 2</Tab>
        <Tab id="3">Tab 3</Tab>
      </TabList>
      <TabPanel id="1">Tab Panel 1</TabPanel>
      <TabPanel id="2">Tab Panel 2</TabPanel>
      <TabPanel id="3">Tab Panel 3</TabPanel>
    </Tabs>
  )
}

Installation

To install, copy the code below and paste into your project.

'use client'
 
import { cx } from 'cva'
import * as ReactAria from 'react-aria-components'
 
const Tabs = ({ className, ...props }: ReactAria.TabsProps) => {
  return (
    <ReactAria.Tabs
      className={cx(
        'flex',
        // horizontal
        'orientation-horizontal:flex-col orientation-horizontal:[--border-width:0_0_2px_0]',
        // vertical
        'orientation-vertical:[--border-width:0_2px_0_0]',
        className,
      )}
      {...props}
    />
  )
}
 
const TabList = <T extends object>({ className, ...props }: ReactAria.TabListProps<T>) => {
  return (
    <ReactAria.TabList
      className={cx(
        'group',
        'flex border-slate-700',
        // Vertical
        'orientation-vertical:flex-col',
        className,
      )}
      {...props}
    />
  )
}
 
const Tab = ({ className, ...props }: ReactAria.TabProps) => {
  return (
    <ReactAria.Tab
      className={cx(
        'relative shrink-0 cursor-pointer border-[length:var(--border-width)] border-transparent px-4 py-2 text-muted-foreground outline-none transition-colors',
        // Focus-visible
        'focus-visible:ring-2 focus-visible:text-ring',
        // Disabled
        'disabled:cursor-not-allowed disabled:opacity-40',
        // Horizontal
        'group-orientation-horizontal:border-[width:var(--border-width)] group-orientation-horizontal:top-[2px]',
        // Vertical
        'group-orientation-vertical:border-[width:var(--border-width)] group-orientation-vertical:left-[2px] group-orientation-vertical:inline-flex',
        // Selected
        'selected:border-black selected:text-primary',
        className,
      )}
      {...props}
    />
  )
}
 
const TabPanel = ({ className, ...props }: ReactAria.TabPanelProps) => {
  return <ReactAria.TabPanel className={cx('grow p-4', className)} {...props} />
}
 
export { Tab, Tabs, TabList, TabPanel }