Tabs

A component for toggling between related panels on the same page.

Tab 1 content

import { Tabs, TabsList, TabsPanel, TabsTab } from "@/components/ui/tabs"

export function TabsDemo() {
  return (
    <Tabs defaultValue="tab-1">
      <TabsList>
        <TabsTab value="tab-1">Tab 1</TabsTab>
        <TabsTab value="tab-2">Tab 2</TabsTab>
        <TabsTab value="tab-3">Tab 3</TabsTab>
      </TabsList>
      <TabsPanel value="tab-1">
        <p className="p-4 text-center text-xs text-muted-foreground">
          Tab 1 content
        </p>
      </TabsPanel>
      <TabsPanel value="tab-2">
        <p className="p-4 text-center text-xs text-muted-foreground">
          Tab 2 content
        </p>
      </TabsPanel>
      <TabsPanel value="tab-3">
        <p className="p-4 text-center text-xs text-muted-foreground">
          Tab 3 content
        </p>
      </TabsPanel>
    </Tabs>
  )
}

Installation


pnpm dlx shadcn@latest add https://coss.com/ui/r/tabs.json

Usage

import { Tabs, TabsList, TabsPanel, TabsTab } from "@/components/ui/tabs"

<Tabs defaultValue="tab-1">
  <TabsList>
    <TabsTab value="tab-1">Tab 1</TabsTab>
    <TabsTab value="tab-2">Tab 2</TabsTab>
    <TabsTab value="tab-3">Tab 3</TabsTab>
  </TabsList>
  <TabsPanel value="tab-1">Tab 1 content</TabsPanel>
  <TabsPanel value="tab-2">Tab 2 content</TabsPanel>
  <TabsPanel value="tab-3">Tab 3 content</TabsPanel>
</Tabs>

Examples

Underline Variant

Tab 1 content

import { Tabs, TabsList, TabsPanel, TabsTab } from "@/components/ui/tabs"

export function TabsUnderline() {
  return (
    <Tabs defaultValue="tab-1">
      <div className="border-b">
        <TabsList variant="underline">
          <TabsTab value="tab-1">Tab 1</TabsTab>
          <TabsTab value="tab-2">Tab 2</TabsTab>
          <TabsTab value="tab-3">Tab 3</TabsTab>
        </TabsList>
      </div>
      <TabsPanel value="tab-1">
        <p className="p-4 text-center text-xs text-muted-foreground">
          Tab 1 content
        </p>
      </TabsPanel>
      <TabsPanel value="tab-2">
        <p className="p-4 text-center text-xs text-muted-foreground">
          Tab 2 content
        </p>
      </TabsPanel>
      <TabsPanel value="tab-3">
        <p className="p-4 text-center text-xs text-muted-foreground">
          Tab 3 content
        </p>
      </TabsPanel>
    </Tabs>
  )
}

Vertical Orientation

Tab 1 content

import { Tabs, TabsList, TabsPanel, TabsTab } from "@/components/ui/tabs"

export function TabsVertical() {
  return (
    <Tabs defaultValue="tab-1" orientation="vertical" className="w-full">
      <TabsList>
        <TabsTab value="tab-1">Tab 1</TabsTab>
        <TabsTab value="tab-2">Tab 2</TabsTab>
        <TabsTab value="tab-3">Tab 3</TabsTab>
      </TabsList>
      <TabsPanel value="tab-1">
        <p className="p-4 text-center text-xs text-muted-foreground">
          Tab 1 content
        </p>
      </TabsPanel>
      <TabsPanel value="tab-2">
        <p className="p-4 text-center text-xs text-muted-foreground">
          Tab 2 content
        </p>
      </TabsPanel>
      <TabsPanel value="tab-3">
        <p className="p-4 text-center text-xs text-muted-foreground">
          Tab 3 content
        </p>
      </TabsPanel>
    </Tabs>
  )
}

Underline with Vertical Orientation

Tab 1 content

import { Tabs, TabsList, TabsPanel, TabsTab } from "@/components/ui/tabs"

export function TabsUnderlineVertical() {
  return (
    <Tabs
      defaultValue="tab-1"
      orientation="vertical"
      className="w-full flex-row"
    >
      <div className="border-s">
        <TabsList variant="underline">
          <TabsTab value="tab-1">Tab 1</TabsTab>
          <TabsTab value="tab-2">Tab 2</TabsTab>
          <TabsTab value="tab-3">Tab 3</TabsTab>
        </TabsList>
      </div>
      <TabsPanel value="tab-1">
        <p className="p-4 text-center text-xs text-muted-foreground">
          Tab 1 content
        </p>
      </TabsPanel>
      <TabsPanel value="tab-2">
        <p className="p-4 text-center text-xs text-muted-foreground">
          Tab 2 content
        </p>
      </TabsPanel>
      <TabsPanel value="tab-3">
        <p className="p-4 text-center text-xs text-muted-foreground">
          Tab 3 content
        </p>
      </TabsPanel>
    </Tabs>
  )
}

Comparing with Radix / shadcn

If you’re already familiar with Radix UI and shadcn/ui, this guide highlights the small differences and similarities so you can get started with coss.com ui quickly.

Quick Checklist

If you used asChild on any parts, switch to the render prop
Use TabsTab going forward; TabsTrigger remains for legacy
Use TabsPanel going forward; TabsContent remains for legacy

Additional Notes

Compared to shadcn/ui, our TabsList component adds variant prop, which allows you to choose between default and underline styles.

Comparison Examples

shadcn/ui

<Tabs defaultValue="tab-1">
  <TabsList>
    <TabsTab value="tab-1">Tab 1</TabsTab>
    <TabsTab value="tab-2">Tab 2</TabsTab>
    <TabsTab value="tab-3">Tab 3</TabsTab>
  </TabsList>
  <TabsContent value="tab-1">Tab 1 content</TabsContent>
  <TabsContent value="tab-2">Tab 2 content</TabsContent>
  <TabsContent value="tab-3">Tab 3 content</TabsContent>
</Tabs>

coss.com ui

<Tabs defaultValue="tab-1">
  <TabsList>
    <TabsTab value="tab-1">Tab 1</TabsTab>
    <TabsTab value="tab-2">Tab 2</TabsTab>
    <TabsTab value="tab-3">Tab 3</TabsTab>
  </TabsList>
  <TabsPanel value="tab-1">Tab 1 content</TabsPanel>
  <TabsPanel value="tab-2">Tab 2 content</TabsPanel>
  <TabsPanel value="tab-3">Tab 3 content</TabsPanel>
</Tabs>

Table Textarea

On This Page

Installation Usage Examples Underline Variant Vertical Orientation Underline with Vertical Orientation Comparing with Radix / shadcn Quick Checklist Additional Notes Comparison Examples