Top Bar
Workspace header bar for titles, leading controls, centered navigation, and trailing actions.
Preview
Switch between light and dark to inspect the embedded Storybook preview.
Installation
pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/top-bar.jsonStorybook
Explore all variants, controls, and accessibility checks in the interactive Storybook playground.
View in StorybookCode
import { forwardRef } from "react";
import type { ReactNode } from "react";
import { cn } from "../../lib/utils";
export type TopBarProps = React.ComponentPropsWithoutRef<"header"> & {
leading?: ReactNode;
subtitle?: ReactNode;
title?: ReactNode;
trailing?: ReactNode;
};
const TopBar = forwardRef<HTMLElement, TopBarProps>(
(
{ children, className, leading, subtitle, title, trailing, ...props },
ref,
) => (
<header
className={cn(
"flex min-h-14 items-center justify-between gap-3 border-b border-border bg-background px-4 font-mono",
className,
)}
ref={ref}
{...props}
>
<div className="flex min-w-0 flex-1 items-center gap-3">
{leading ? (
<div className="flex shrink-0 items-center gap-2">{leading}</div>
) : null}
{title || subtitle ? (
<div className="min-w-0">
{title ? (
<div className="truncate text-sm font-medium uppercase tracking-[0.18em] text-foreground">
{title}
</div>
) : null}
{subtitle ? (
<div className="truncate text-[11px] uppercase tracking-[0.18em] text-muted-foreground">
{subtitle}
</div>
) : null}
</div>
) : null}
</div>
{children ? (
<div className="flex flex-1 items-center justify-center">
{children}
</div>
) : null}
<div className="flex min-w-0 flex-1 items-center justify-end gap-2">
{trailing}
</div>
</header>
),
);
TopBar.displayName = "TopBar";
export { TopBar };