Tabs

Installation

import { Tabs } from '@neo/test-components'

Usage

HeroUI Tabs use a compound component pattern. Each Tab contains its own Indicator for the sliding animation effect.

Dynamic

You can render tabs dynamically from an array of items.

Disabled

Use isDisabled on the Tabs component to disable all tabs, or on individual Tab items.

Sizes

Three size options: sm,md (default), and lg.

Radius

Customize the border radius: none,sm,md,lg, or full.

Colors

Six color options that style the indicator and selected tab text.

Variants

Four visual variants: solid (default),bordered,light, andunderlined.

Underlined with Colors

The underlined variant works great with color options for navigation-style tabs.

With Icons

Add icons alongside tab labels for better visual context.

Controlled

Use selectedKey andonSelectionChange for controlled tab selection.

Vertical

Set orientation="vertical" for sidebar-style navigation.

Full Width

Use fullWidth to make tabs expand to fill the container.

Links (Next.js Router)

Tabs can be rendered as links with the href prop. Sync with Next.js router using selectedKey.

'use client'

import { useRouter, usePathname } from 'next/navigation'
import { Tabs } from '@neo/test-components'

export function NavigationTabs() {
  const router = useRouter()
  const pathname = usePathname()

  return (
    <Tabs 
      variant="underlined"
      selectedKey={pathname}
      onSelectionChange={(key) => router.push(key as string)}
    >
      <Tabs.ListContainer>
        <Tabs.List aria-label="Navigation">
          <Tabs.Tab id="/dashboard" href="/dashboard">
            Dashboard
            <Tabs.Indicator />
          </Tabs.Tab>
          <Tabs.Tab id="/settings" href="/settings">
            Settings
            <Tabs.Indicator />
          </Tabs.Tab>
        </Tabs.List>
      </Tabs.ListContainer>
    </Tabs>
  )
}

Custom Styles

Customize tabs with Tailwind CSS classes via the className andclassNames props.

Disable Animation

Use disableAnimation ordisableCursorAnimation to turn off the indicator animation.

Slots

Customize specific parts of the Tabs component using CSS classes targeting these slots:

Data Attributes

Tab elements expose these data attributes for styling:

Accessibility

API Reference