UI / Components / layout / SurfaceTabBar

SurfaceTabBar

Drag-reorder tabs with overlay × on hover.

Chrome-style tab bar with drag-to-reorder + hover-revealed close button. Optional kebab menu per tab (rename, pin, archive). For workspace surfaces, browser tabs, doc tabs.

$npx dock-ui add surface-tab-bar

Usage

import { SurfaceTabBar } from "@/components/ui/surface-tab-bar";

<SurfaceTabBar tabs={tabs} activeId={activeId} onSelect={setActive} onClose={close} />

Install

via CLI

$ npx dock-ui add surface-tab-bar

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

For agents

curl -L https://ui.trydock.ai/r/surface-tab-bar.json

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

← All components

Themes·Component kit · glossary

View on GitHub →