Implementation:TobikoData Sqlmesh Tab

Knowledge Sources	TobikoData_Sqlmesh
Domains	Web_UI, Components
Last Updated	2026-02-07 20:00 GMT

Overview

A styled tab list component with pill-shaped tabs and selection highlighting.

Description

TabList is a React component built on Headless UI's Tab component that renders a horizontal list of tabs with a distinctive pill-shaped design. The component wraps tabs in a container with secondary-colored background (bg-secondary-10 in light mode, bg-primary-10 in dark mode) and rounded pill styling. Individual tabs have selected and unselected states with different styling - selected tabs use bg-secondary-500 with white text and bold font weight, while unselected tabs have lighter secondary coloring. The component supports a disabled state that grays out the entire tab list and prevents interactions using pointer-events-none. The tab container is horizontally scrollable with custom scrollbar styling, ensuring usability even with many tabs. Additional child elements can be appended after the tab list for auxiliary controls.

Usage

Use this component to create tabbed interfaces for organizing related content into separate views. The pill-shaped design provides clear visual feedback about the selected tab, and the scrollable container handles overflow gracefully when there are many tabs.

Code Reference

Source Location

• Repository: TobikoData_Sqlmesh
• File: web/client/src/library/components/tab/Tab.tsx

Signature

export default function TabList({
  list,
  children = [],
  className,
  disabled = false,
}: {
  list: string[]
  disabled?: boolean
  children?: React.ReactNode
  className?: string
}): JSX.Element

Import

import TabList from '@components/tab/Tab'

I/O Contract

Inputs

Name	Type	Required	Description
list	string[]	Yes	Array of tab labels to display
disabled	boolean	No	Whether the tab list is disabled (defaults to false)
children	React.ReactNode	No	Additional elements to render after the tabs
className	string	No	Additional CSS classes for the scrollable container

Outputs

Name	Type	Description
JSX.Element	React component	Pill-styled tab list with selection highlighting

Usage Examples

import { Tab } from '@headlessui/react'
import TabList from '@components/tab/Tab'

function TabbedContent() {
  return (
    <Tab.Group>
      <TabList
        list={['Overview', 'Details', 'History']}
        className="mb-4"
      />
      <Tab.Panels>
        <Tab.Panel>Overview content</Tab.Panel>
        <Tab.Panel>Details content</Tab.Panel>
        <Tab.Panel>History content</Tab.Panel>
      </Tab.Panels>
    </Tab.Group>
  )
}

// With additional controls and disabled state
function ControlledTabs({ isLoading }) {
  return (
    <Tab.Group>
      <TabList
        list={['Source', 'Target', 'Diff']}
        disabled={isLoading}
      >
        <button className="ml-2">Refresh</button>
      </TabList>
      <Tab.Panels>
        {/* Panel content */}
      </Tab.Panels>
    </Tab.Group>
  )
}

Related Pages

• Environment:TobikoData_Sqlmesh_Web_UI_Stack