Tabs

Component 17

About

Tabs with varients

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Tabs to your project and fits it to your theme.

Code

How Tabs is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client"

import * as React from "react"
import {
  Tabs,
  TabsList,
  TabsTrigger,
  TabsContent,
} from "@/components/ui/tabs"

function BaseTabs({ variant }: { variant: any }) {
  return (
    <Tabs defaultValue="tab1" variant={variant} className="w-full max-w-md mx-auto">
      <TabsList>
        <TabsTrigger value="tab1">Tab One</TabsTrigger>
        <TabsTrigger value="tab2">Tab Two</TabsTrigger>
        <TabsTrigger value="tab3">Tab Three</TabsTrigger>
      </TabsList>
      <TabsContent value="tab1">This is tab one content.</TabsContent>
      <TabsContent value="tab2">Here goes content for tab two.</TabsContent>
      <TabsContent value="tab3">Tab three's content shows here.</TabsContent>
    </Tabs>
  )
}

function DemoDefault() {
  return <BaseTabs variant="default" />
}

function DemoUnderline() {
  return <BaseTabs variant="underline" />
}

function DemoPill() {
  return <BaseTabs variant="pill" />
}

function DemoRounded() {
  return <BaseTabs variant="rounded" />
}

function DemoFolder() {
  return <BaseTabs variant="folder" />
}

export {
  DemoDefault,
  DemoUnderline,
  DemoPill,
  DemoRounded,
  DemoFolder,
}