UI / Components / layout / TopBar

TopBar

App header. Logo + nav + user-row pattern.

App header bar. Logo on the left, optional nav items center-left, user row on the right (avatar + dropdown). Theme-aware borders and background.

$npx dock-ui add topbar

import { TopBar } from "@/components/ui/topbar";

<TopBar logo={<Logo />} nav={[{href: "/", label: "Home"}]} userRow={<UserMenu />} />

via CLI

$ npx dock-ui add topbar

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

For agents

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

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