|Design System

Core Component

Tabs

Horizontal tab navigation for switching between content panels without page navigation.

Preview

Conversation messages appear here.

Source

Full component implementation using the design system tokens.

tsx
"use client";

import { useState } from "react";

export function DSTabs({
  tabs,
  defaultTab,
}: {
  tabs: { label: string; content: React.ReactNode }[];
  defaultTab?: number;
}) {
  const [active, setActive] = useState(defaultTab ?? 0);

  return (
    <div className="w-full">
      <div className="flex border-b border-overlay/10" role="tablist">
        {tabs.map((tab, i) => (
          <button
            key={tab.label}
            role="tab"
            aria-selected={active === i}
            onClick={() => setActive(i)}
            className={`px-4 py-2.5 text-sm font-medium transition-colors relative ${
              active === i
                ? "text-foreground"
                : "text-tertiary hover:text-secondary"
            }`}
          >
            {tab.label}
            {active === i && (
              <span className="absolute bottom-0 left-0 right-0 h-0.5 bg-accent rounded-full" />
            )}
          </button>
        ))}
      </div>
      <div role="tabpanel" className="pt-4">
        {tabs[active]?.content}
      </div>
    </div>
  );
}

Props

All available props with types and defaults.

PropTypeDescription
tabs*{ label: string; content: ReactNode }[]Array of tab definitions with labels and content
defaultTabnumberIndex of the initially active tab

Variants

Default

Standard tabs with underline indicator.

Chat panel content

tsx
<DSTabs
  tabs={[
    { label: "Chat", content: <ChatPanel /> },
    { label: "Artifacts", content: <ArtifactsList /> },
    { label: "Settings", content: <SettingsPanel /> },
  ]}
/>

Prompt Guide

Prompt Guide — Tabs

Use for

  • Switching between Chat / Artifacts / Settings panels
  • Model comparison views (side-by-side responses)
  • Code language selection in artifact viewers
  • Dashboard sections (Usage / Billing / API Keys)

Don't use for

  • Navigation between pages — use links/routes
  • Binary choices — use Toggle
  • More than 5 tabs — consider a sidebar or dropdown

AI Context

Tabs organize parallel content in AI dashboards. The most common pattern: Chat | Artifacts | Settings. The active tab uses an accent underline — subtle but clear. Content panels mount/unmount on switch (not hidden) to keep the DOM lean. For AI comparison views, tabs let users flip between model responses.