Tablist
A navigation component that organizes content into multiple tabs.
Overview
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.
Variations
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.
Tablist
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.
TablistItem
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.
Accessibility
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:
- Links or buttons inside tabs have meaningful text
- The active tab should be marked with the
active
class - If using tabs to control content panels, use appropriate ARIA attributes in your implementation
- Consider keyboard navigation between tabs for enhanced accessibility