UI / Components / layout / Tabs

Tabs

Standard horizontal tabs. ARIA-compliant.

Horizontal tabs with keyboard nav (arrow keys, Home, End). Active-tab underline animates between positions. ARIA `tablist` / `tab` / `tabpanel` markup.

$npx dock-ui add tabs

Usage

import { Tabs } from "@/components/ui/tabs";

<Tabs value={tab} onValueChange={setTab} tabs={[
  { value: "overview", label: "Overview", content: <Overview /> },
  { value: "billing", label: "Billing", content: <Billing /> },
]} />

Install

via CLI

$ npx dock-ui add tabs

Writes the file(s) directly to your components/ui/ folder. You own the code.

For agents

curl -L https://ui.trydock.ai/r/tabs.json

Returns a JSON manifest with file paths + contents. Agent-readable, LLM-fetchable.

← All components

Themes·Component kit · glossary

View on GitHub →