Tabs Component

Tabbed interface for organizing content into separate panels.

Live Preview

Content for Tab 1

Usage

import { Tabs, type TabItem } from '@featherstudio/react-daisyui-kit';
import { useState } from 'react';

const items: TabItem[] = [
  { id: 'tab1', label: 'Tab 1', content: 'Content 1' },
  { id: 'tab2', label: 'Tab 2', content: 'Content 2' },
];

export default function App() {
  const [active, setActive] = useState<string>('tab1');

  return (
    <Tabs
      items={items}
      activeTab={active}
      onTabChange={setActive}
    />
  );
}

Features

Easy Navigation

Click tabs to switch between content panels.

Controlled & Uncontrolled

Supports both controlled (activeTab + onTabChange) and uncontrolled usage.

Multiple Variants

Choose from default, bordered, lifted, or boxed styles.

Icon Support

Each tab item can include an optional icon alongside the label.

Props

Prop	Type	Default	Description
items	TabItem[]	-	Array of tab definitions (id, label, content, disabled?, icon?)
activeTab	string	-	Controlled active tab id
onTabChange	(tabId: string) => void	-	Callback when active tab changes
variant	'default' \| 'bordered' \| 'lifted' \| 'boxed'	'default'	Tab style variant
size	'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'	'md'	Tab size
position	'top' \| 'bottom'	'top'	Tab bar position

← Back to Components