Tablist

The Tablist component set provides a way to organize content into multiple selectable tabs. It consists of two components: Tablist (container) and TablistItem (individual tabs). These components are built on top of semantic HTML elements for better accessibility and adapt to different parent background contexts.

Bordered vs. Non-bordered

The Tablist component can be displayed with or without a bottom border. When the bordered prop is set to true, the active tab is highlighted with a primary-colored bottom border.

// Bordered tablist
<Tablist bordered={true}>
  <TablistItem><a href="#tab1" className="active">Tab 1</a></TablistItem>
  <TablistItem><a href="#tab2">Tab 2</a></TablistItem>
  <TablistItem><a href="#tab3">Tab 3</a></TablistItem>
</Tablist>

// Non-bordered tablist
<Tablist>
  <TablistItem><a href="#tab1" className="active">Tab 1</a></TablistItem>
  <TablistItem><a href="#tab2">Tab 2</a></TablistItem>
  <TablistItem><a href="#tab3">Tab 3</a></TablistItem>
</Tablist>

Background Color Adaptations

The Tablist component automatically adapts its styling based on the parent element’s background color. This ensures proper contrast and visual consistency across different UI contexts.

// On default background
<div className="bg-background">
  <Tablist>
    <TablistItem><div className="active">Tab 1</div></TablistItem>
    <TablistItem><a href="#">Tab 2</a></TablistItem>
    <TablistItem><a href="#">Tab 3</a></TablistItem>
  </Tablist>
</div>

// On primary background
<div className="bg-primary">
  <Tablist>
    <TablistItem><div className="active">Tab 1</div></TablistItem>
    <TablistItem><a href="#">Tab 2</a></TablistItem>
    <TablistItem><a href="#">Tab 3</a></TablistItem>
  </Tablist>
</div>

// On foreground background
<div className="bg-foreground">
  <Tablist>
    <TablistItem><div className="active">Tab 1</div></TablistItem>
    <TablistItem><a href="#">Tab 2</a></TablistItem>
    <TablistItem><a href="#">Tab 3</a></TablistItem>
  </Tablist>
</div>

The component automatically adjusts:

• Text color for better contrast
• Hover background colors
• Active tab styling
• Border colors (when bordered)

This contextual adaptation means you don’t need to manually adjust styles when using Tablist on different background colors.

Description

The root container component that wraps the tablist elements. It can be used with or without borders and adapts to various parent background contexts.

Usage

import { Tablist, TablistItem } from "@crafted-ui/react";

<Tablist>
  <TablistItem>
    <a href="#tab1">Tab 1</a>
  </TablistItem>
  <TablistItem>
    <a href="#tab2" className="active">Tab 2</a>
  </TablistItem>
  <TablistItem>
    <a href="#tab3">Tab 3</a>
  </TablistItem>
</Tablist>

Props

The Tablist component accepts the following props:

Prop	Type	Default	Description
bordered	boolean	false	Whether to show a bottom border on the tablist container
className	string	undefined	Additional CSS class names
children	ReactNode	undefined	Content of the tablist container

Plus all standard HTML props for the ul element.

Description

Represents an individual item in the tablist. The active tab can be indicated by adding the active class to the child element. TablistItem automatically adapts its styling based on the parent Tablist’s context.

Usage with Links

import { Tablist, TablistItem } from "@crafted-ui/react";

<Tablist>
  <TablistItem>
    <a href="#tab1">Tab 1</a>
  </TablistItem>
  <TablistItem>
    <a href="#tab2" className="active">Tab 2</a>
  </TablistItem>
  <TablistItem>
    <a href="#tab3">Tab 3</a>
  </TablistItem>
</Tablist>

Usage with Custom Content

import { Tablist, TablistItem } from "@crafted-ui/react";

<Tablist bordered={true}>
  <TablistItem>
    <div>
      <span>Tab 1</span>
      <span className="ml-2 text-xs text-muted-foreground">(10)</span>
    </div>
  </TablistItem>
  <TablistItem>
    <div className="active">
      <span>Tab 2</span>
      <span className="ml-2 text-xs text-muted-foreground">(5)</span>
    </div>
  </TablistItem>
  <TablistItem>
    <div>
      <span>Tab 3</span>
      <span className="ml-2 text-xs text-muted-foreground">(3)</span>
    </div>
  </TablistItem>
</Tablist>

Variations

The Tablist adapts to different parent background contexts:

// On default background
<div className="bg-background">
    <Tablist>
        <TablistItem><div className="active">Tab 1</div></TablistItem>
        <TablistItem><a href="#">Tab 2</a></TablistItem>
        <TablistItem><a href="#">Tab 3</a></TablistItem>
    </Tablist>
</div>

// On primary background
<div className="bg-primary">
    <Tablist>
        <TablistItem><div className="active">Tab 1</div></TablistItem>
        <TablistItem><a href="#">Tab 2</a></TablistItem>
        <TablistItem><a href="#">Tab 3</a></TablistItem>
    </Tablist>
</div>

// On foreground background
<div className="bg-foreground">
    <Tablist>
        <TablistItem><div className="active">Tab 1</div></TablistItem>
        <TablistItem><a href="#">Tab 2</a></TablistItem>
        <TablistItem><a href="#">Tab 3</a></TablistItem>
    </Tablist>
</div>

Props

Prop	Type	Default	Description
className	string	undefined	Additional CSS class names
children	ReactNode	undefined	Content of the tablist item

Plus all standard HTML props for the li element.

The Tablist component follows accessibility best practices by using semantic HTML elements:

• The tablist container uses a <ul> element for proper list semantics
• Each tab item is a <li> element

When implementing tablists, ensure that:

1. Links or buttons inside tabs have meaningful text
2. The active tab should be marked with the active class
3. If using tabs to control content panels, use appropriate ARIA attributes in your implementation
4. Consider keyboard navigation between tabs for enhanced accessibility