Tabs

Component to render tabs.

The Tabs component can be configured to render the tabs list in various styles by changing position and type parameters.

Usage

The Tabs component can be imported using

import { Tabs } from '@tail-kit/tail-kit'

Default Tabs

Tab Content 1

<Tabs
  tabs={Array.from({ length: 4 }).map((_, i) => ({
    title: `Tab ${i + 1}`,
    key: `tab-${i + 1}`,
    content: <div className="text-sm text-gray-700">Tab Content {i + 1}</div>,
  }))}
/>

<Tabs
  tabs={Array.from({ length: 4 }).map((_, i) => ({
    title: `Tab ${i + 1}`,
    key: `tab-${i + 1}`,
    content: <div className="text-sm text-gray-700">Tab Content {i + 1}</div>,
  }))}
/>

Tabs with Icon

My Account

Account Details

function TabsWithIcon() {
  const tabs = tabsList.map((tab) => {
    const Icon = tab.icon
    return {
      key: tab.key,
      title: tab.title,
      icon: <Icon className="w-6 h-6" />,
      content: (
        <>
          <h1 className="text-base font-semibold text-gray-800">{tab.title}</h1>
          <div className="text-sm text-gray-700">{tab.content}</div>
        </>
      ),
    }
  })
  return <Tabs tabs={tabs} />
}

function TabsWithIcon() {
  const tabs = tabsList.map((tab) => {
    const Icon = tab.icon
    return {
      key: tab.key,
      title: tab.title,
      icon: <Icon className="w-6 h-6" />,
      content: (
        <>
          <h1 className="text-base font-semibold text-gray-800">{tab.title}</h1>
          <div className="text-sm text-gray-700">{tab.content}</div>
        </>
      ),
    }
  })
  return <Tabs tabs={tabs} />
}

Tabs with Extra Content

My Account

Account Details

function TabsWithExtraContent() {
  const [activeTab, setActiveTab] = React.useState('my-account')
  const tabs = tabsList.map((tab) => {
    const Icon = tab.icon
    return {
      key: tab.key,
      title: tab.title,
      icon: <Icon className="w-6 h-6" />,
      content: (
        <>
          <h1 className="text-base font-semibold text-gray-800">{tab.title}</h1>
          <div className="text-sm text-gray-700">{tab.content}</div>
        </>
      ),
    }
  })
  return (
    <Tabs
      tab={activeTab}
      onTabChange={setActiveTab}
      tabs={tabs}
      extraContent={
        <Select
          value={activeTab}
          onChange={setActiveTab}
          className="w-48"
          options={tabs.map((tab) => ({
            label: tab.title,
            value: tab.key,
            icon: tab.icon,
          }))}
          placeholder="Select Tab"
        />
      }
    />
  )
}

function TabsWithExtraContent() {
  const [activeTab, setActiveTab] = React.useState('my-account')
  const tabs = tabsList.map((tab) => {
    const Icon = tab.icon
    return {
      key: tab.key,
      title: tab.title,
      icon: <Icon className="w-6 h-6" />,
      content: (
        <>
          <h1 className="text-base font-semibold text-gray-800">{tab.title}</h1>
          <div className="text-sm text-gray-700">{tab.content}</div>
        </>
      ),
    }
  })
  return (
    <Tabs
      tab={activeTab}
      onTabChange={setActiveTab}
      tabs={tabs}
      extraContent={
        <Select
          value={activeTab}
          onChange={setActiveTab}
          className="w-48"
          options={tabs.map((tab) => ({
            label: tab.title,
            value: tab.key,
            icon: tab.icon,
          }))}
          placeholder="Select Tab"
        />
      }
    />
  )
}

Tabs in Pills

My Account

Account Details

function TabsInPills() {
  const tabs = tabsList.map((tab) => {
    const Icon = tab.icon
    return {
      key: tab.key,
      title: tab.title,
      icon: <Icon className="w-6 h-6" />,
      content: (
        <>
          <h1 className="text-base font-semibold text-gray-800">{tab.title}</h1>
          <div className="text-sm text-gray-700">{tab.content}</div>
        </>
      ),
    }
  })
  return <Tabs type="pill" tabs={tabs} />
}

function TabsInPills() {
  const tabs = tabsList.map((tab) => {
    const Icon = tab.icon
    return {
      key: tab.key,
      title: tab.title,
      icon: <Icon className="w-6 h-6" />,
      content: (
        <>
          <h1 className="text-base font-semibold text-gray-800">{tab.title}</h1>
          <div className="text-sm text-gray-700">{tab.content}</div>
        </>
      ),
    }
  })
  return <Tabs type="pill" tabs={tabs} />
}

Tabs in Pills with Extra Content

My Account

Account Details

function TabsInPillsWithExtraContent() {
  const [activeTab, setActiveTab] = React.useState('my-account')
  const tabs = tabsList.map((tab) => {
    const Icon = tab.icon
    return {
      key: tab.key,
      title: tab.title,
      icon: <Icon className="w-6 h-6" />,
      content: (
        <>
          <h1 className="text-base font-semibold text-gray-800">{tab.title}</h1>
          <div className="text-sm text-gray-700">{tab.content}</div>
        </>
      ),
    }
  })
  return (
    <Tabs
      type="pill"
      tab={activeTab}
      onTabChange={setActiveTab}
      tabs={tabs}
      extraContent={
        <Select
          value={activeTab}
          onChange={setActiveTab}
          className="w-48"
          options={tabs.map((tab) => ({
            label: tab.title,
            value: tab.key,
            icon: tab.icon,
          }))}
          placeholder="Select Tab"
        />
      }
    />
  )
}

function TabsInPillsWithExtraContent() {
  const [activeTab, setActiveTab] = React.useState('my-account')
  const tabs = tabsList.map((tab) => {
    const Icon = tab.icon
    return {
      key: tab.key,
      title: tab.title,
      icon: <Icon className="w-6 h-6" />,
      content: (
        <>
          <h1 className="text-base font-semibold text-gray-800">{tab.title}</h1>
          <div className="text-sm text-gray-700">{tab.content}</div>
        </>
      ),
    }
  })
  return (
    <Tabs
      type="pill"
      tab={activeTab}
      onTabChange={setActiveTab}
      tabs={tabs}
      extraContent={
        <Select
          value={activeTab}
          onChange={setActiveTab}
          className="w-48"
          options={tabs.map((tab) => ({
            label: tab.title,
            value: tab.key,
            icon: tab.icon,
          }))}
          placeholder="Select Tab"
        />
      }
    />
  )
}

Tabs Positions and Types

function TabsPositionAndTypes() {
  const [activeTab, setActiveTab] = React.useState('my-account')
  const [position, setPosition] = React.useState('top')
  const [tabStyle, setTabStyle] = React.useState('underline')
  const positionOptions = [
    { label: 'Top', value: 'top' },
    { label: 'Bottom', value: 'bottom' },
    { label: 'Left', value: 'left' },
    { label: 'Right', value: 'right' },
  ]
  const tabStyleOptions = [
    { label: 'Underline', value: 'underline' },
    { label: 'Pill', value: 'pill' },
  ]
  const tabs = tabsList.map((tab) => {
    const Icon = tab.icon
    return {
      key: tab.key,
      title: tab.title,
      icon: <Icon className="w-6 h-6" />,
      content: (
        <>
          <h1 className="text-base font-semibold text-gray-800">{tab.title}</h1>
          <div className="text-sm text-gray-700">{tab.content}</div>
        </>
      ),
    }
  })
  return (
    <>
      <div className="flex items-center mb-6 text-sm">
        <p className="mr-4">Tabs Position:</p>
        <Radio.RadioGroup
          value={position}
          onChange={setPosition}
          options={positionOptions}
        />
        <div className="flex-1" />
        <p className="mr-4">Tab Style:</p>
        <Radio.RadioGroup
          value={tabStyle}
          onChange={setTabStyle}
          options={tabStyleOptions}
        />
      </div>
      <Tabs
        type={tabStyle}
        position={position}
        tab={activeTab}
        onTabChange={setActiveTab}
        tabs={tabs}
        extraContent={
          <Select
            value={activeTab}
            onChange={setActiveTab}
            className="w-48"
            options={tabs.map((tab) => ({
              label: tab.title,
              value: tab.key,
              icon: tab.icon,
            }))}
            placeholder="Select Tab"
          />
        }
      />
    </>
  )
}

function TabsPositionAndTypes() {
  const [activeTab, setActiveTab] = React.useState('my-account')
  const [position, setPosition] = React.useState('top')
  const [tabStyle, setTabStyle] = React.useState('underline')
  const positionOptions = [
    { label: 'Top', value: 'top' },
    { label: 'Bottom', value: 'bottom' },
    { label: 'Left', value: 'left' },
    { label: 'Right', value: 'right' },
  ]
  const tabStyleOptions = [
    { label: 'Underline', value: 'underline' },
    { label: 'Pill', value: 'pill' },
  ]
  const tabs = tabsList.map((tab) => {
    const Icon = tab.icon
    return {
      key: tab.key,
      title: tab.title,
      icon: <Icon className="w-6 h-6" />,
      content: (
        <>
          <h1 className="text-base font-semibold text-gray-800">{tab.title}</h1>
          <div className="text-sm text-gray-700">{tab.content}</div>
        </>
      ),
    }
  })
  return (
    <>
      <div className="flex items-center mb-6 text-sm">
        <p className="mr-4">Tabs Position:</p>
        <Radio.RadioGroup
          value={position}
          onChange={setPosition}
          options={positionOptions}
        />
        <div className="flex-1" />
        <p className="mr-4">Tab Style:</p>
        <Radio.RadioGroup
          value={tabStyle}
          onChange={setTabStyle}
          options={tabStyleOptions}
        />
      </div>
      <Tabs
        type={tabStyle}
        position={position}
        tab={activeTab}
        onTabChange={setActiveTab}
        tabs={tabs}
        extraContent={
          <Select
            value={activeTab}
            onChange={setActiveTab}
            className="w-48"
            options={tabs.map((tab) => ({
              label: tab.title,
              value: tab.key,
              icon: tab.icon,
            }))}
            placeholder="Select Tab"
          />
        }
      />
    </>
  )
}

Editable Example

Tabs Props

Name	Description	Default Value
tab	Key of the tab selected `string \| undefined`	--
defaultTab	Key of the default tab selected. This should be used when the Tab component is used in uncontrolled way `string \| undefined`	--
onTabChange	Callback function called when the active tab is changed. `((activeTabKey: string) => void) \| undefined`	--
type	The type of the tab item rendered inside the tabs list. If it is pill, then it would render the tab title and icon with pills and else the active tab would be underlined `"pill" \| "underline" \| undefined`	`underline`
position	The position of the tabs list with respect to the content. By default the tabs list would be rendered over the top of the content. `"top" \| "bottom" \| "left" \| "right" \| undefined`	`top`
tabs	`Tab[]`	--
extraContent	Extra content to be rendered in the tabs list. It would be rendered at the end of the tabs list. It won't scroll even if the tabs list might scroll `ReactNode`	--
className	Additional classes for styling `string \| undefined`	--
style	Additional styles `CSSProperties \| undefined`	--
tabBarClassName	Additional classes for styling tab bar `string \| undefined`	--
tabBarStyle	Additonal styles for tab bar `CSSProperties \| undefined`	--