HextaUI

Tabs: Underline

variant="line" on TabsList slides an underline instead of a pill.

Activity for this repository.

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

const tabs = ["Activity", "Pull requests", "Issues", "Settings"]

export function TabsLine() {
  return (
    <Tabs defaultValue="Activity" className="w-full max-w-md">
      <TabsList variant="line">
        {tabs.map((tab) => (
          <TabsTrigger key={tab} value={tab}>
            {tab}
          </TabsTrigger>
        ))}
      </TabsList>
      {tabs.map((tab) => (
        <TabsContent key={tab} value={tab}>
          <p className="py-2 text-sm text-muted-foreground">
            {tab} for this repository.
          </p>
        </TabsContent>
      ))}
    </Tabs>
  )
}

This adds the example as components/examples/tabs/line.tsx, together with the Tabs component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/tabs-line.json

To add only the component, follow the Tabs installation.

Props in this example

The Tabs props this example sets, from the API reference.

PropTypeDefault
defaultValue
any0
PropTypeDefault
variant
"default" | "line""default"
PropTypeDefault
value
any–
PropTypeDefault
value
any–

Every prop is in the Tabs API reference.

See them all, with keyboard support and accessibility notes, on the Tabs page.