Tabs

import { Tabs, TabsList, TabsTrigger, TabsContent } from "@hummingbirdui/react";

export default function TabsDefault() {
  return (
    <Tabs defaultValue="account" className="mx-auto max-w-xl">
      <TabsList>
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="password">Password</TabsTrigger>
        <TabsTrigger value="team">Team</TabsTrigger>
      </TabsList>
      <TabsContent value="account" className="py-4">
        Manage your account details and profile information.
      </TabsContent>
      <TabsContent value="password" className="py-4">
        Change your password and review active sessions.
      </TabsContent>
      <TabsContent value="team" className="py-4">
        Invite teammates and manage their roles.
      </TabsContent>
    </Tabs>
  );
}

import { Tabs, TabsList, TabsTrigger, TabsContent } from "@hummingbirdui/react";

export default function TabsUnderline() {
  return (
    <Tabs defaultValue="overview" className="mx-auto max-w-xl">
      <TabsList variant="underline">
        <TabsTrigger value="overview">Overview</TabsTrigger>
        <TabsTrigger value="activity">Activity</TabsTrigger>
        <TabsTrigger value="settings">Settings</TabsTrigger>
      </TabsList>
      <TabsContent value="overview" className="py-4">
        A high-level summary of the project.
      </TabsContent>
      <TabsContent value="activity" className="py-4">
        Recent activity and events.
      </TabsContent>
      <TabsContent value="settings" className="py-4">
        Project configuration and preferences.
      </TabsContent>
    </Tabs>
  );
}

import { Tabs, TabsList, TabsTrigger, TabsContent } from "@hummingbirdui/react";

export default function TabsPlain() {
  return (
    <Tabs defaultValue="home" className="mx-auto max-w-xl">
      <TabsList variant="default">
        <TabsTrigger value="home">Home</TabsTrigger>
        <TabsTrigger value="profile">Profile</TabsTrigger>
        <TabsTrigger value="contact">Contact</TabsTrigger>
      </TabsList>
      <TabsContent value="home" className="py-4">
        Welcome back to your dashboard.
      </TabsContent>
      <TabsContent value="profile" className="py-4">
        View and edit your public profile.
      </TabsContent>
      <TabsContent value="contact" className="py-4">
        Reach out to the support team.
      </TabsContent>
    </Tabs>
  );
}

import { Tabs, TabsList, TabsTrigger, TabsContent } from "@hummingbirdui/react";

export default function TabsColors() {
  return (
    <div className="mx-auto flex max-w-xl flex-col gap-8">
      <Tabs defaultValue="one">
        <TabsList variant="underline" color="success">
          <TabsTrigger value="one">Active</TabsTrigger>
          <TabsTrigger value="two">Pending</TabsTrigger>
          <TabsTrigger value="three">Archived</TabsTrigger>
        </TabsList>
        <TabsContent value="one" className="py-4">
          Records that are currently active.
        </TabsContent>
        <TabsContent value="two" className="py-4">
          Records awaiting approval.
        </TabsContent>
        <TabsContent value="three" className="py-4">
          Records that have been archived.
        </TabsContent>
      </Tabs>

      <Tabs defaultValue="alpha">
        <TabsList variant="underline" color="danger">
          <TabsTrigger value="alpha">Errors</TabsTrigger>
          <TabsTrigger value="beta">Warnings</TabsTrigger>
          <TabsTrigger value="gamma">Info</TabsTrigger>
        </TabsList>
        <TabsContent value="alpha" className="py-4">
          Failures that need attention.
        </TabsContent>
        <TabsContent value="beta" className="py-4">
          Non-blocking warnings.
        </TabsContent>
        <TabsContent value="gamma" className="py-4">
          Informational messages.
        </TabsContent>
      </Tabs>
    </div>
  );
}

import { Tabs, TabsList, TabsTrigger, TabsContent } from "@hummingbirdui/react";

export default function TabsDisabled() {
  return (
    <Tabs defaultValue="general" className="mx-auto max-w-xl">
      <TabsList>
        <TabsTrigger value="general">General</TabsTrigger>
        <TabsTrigger value="billing" disabled>
          Billing
        </TabsTrigger>
        <TabsTrigger value="advanced">Advanced</TabsTrigger>
      </TabsList>
      <TabsContent value="general" className="py-4">
        General workspace preferences.
      </TabsContent>
      <TabsContent value="billing" className="py-4">
        Billing details are unavailable on this plan.
      </TabsContent>
      <TabsContent value="advanced" className="py-4">
        Advanced configuration options.
      </TabsContent>
    </Tabs>
  );
}