Enterprise UI Kit

Tabs

Underline

Snoozed content.

Pill

Snoozed content.

Card (with icon)

Tab completions content.

Rounded

Snoozed content.

How to use

Tabs with variant: underline, pill, rounded, card. TabItem: id, label, content, optional icon. Copy the examples below.

1. Import

tsx

import { Tabs } from "@/app/components/ui";
import type { TabItem } from "@/app/components/ui";
import { Sparkles } from "lucide-react";

2. Tab data (TabItem[])

tsx

const tabs: TabItem[] = [
  { id: "one", label: "One", content: "Content 1." },
  { id: "two", label: "Two", content: "Content 2." },
  { id: "three", label: "Three", content: "Content 3." },
];

3. Underline

tsx

<Tabs
  tabs={tabs}
  activeId={activeId}
  onTabChange={setActiveId}
  variant="underline"
/>

4. Pill

tsx

<Tabs
  tabs={tabs}
  activeId={activeId}
  onTabChange={setActiveId}
  variant="pill"
/>

5. Rounded

tsx

<Tabs
  tabs={tabs}
  activeId={activeId}
  onTabChange={setActiveId}
  variant="rounded"
/>

6. Card (with icon)

tsx

const tabsWithIcon: TabItem[] = [
  { id: "copilot", label: "Code Copilot", content: "Code Copilot content." },
  {
    id: "completions",
    label: "Tab Completions",
    content: "Tab completions content.",
    icon: <Sparkles />,
  },
  { id: "snippets", label: "Custom Snippets", content: "Custom snippets content." },
];

<Tabs
  tabs={tabsWithIcon}
  activeId={activeId}
  onTabChange={setActiveId}
  variant="card"
/>