Top Bar

Spans the top of a dashboard with the brand, the nav, and the account cluster.

Configurations

Supported configurations for this component.

3 examples

Actions

Size md

One command adds this component to your project.

Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.

npx shadcn@latest add @aicanvas/••••••••••••

Light and dark both come with the install and follow the dark class on <html>, the shadcn dark mode setup (next-themes with attribute="class").

Every prop this component accepts. Any other prop is forwarded to the underlying element.

Prop	Type	Default	Description
labelreq	`string`	-	Nav label; also the row's React key.
active	`boolean`	-	Current page — semibold primary ink plus the active line.
onClick	`() => void`	-	Navigate handler.

Prop	Type	Default	Description
logo	`React.ReactNode`	-	The mark at the head of the brand lockup. Defaults to `AndromedaIcon` at `iconSize.xl`. Size a replacement to the same 22px box so the lockup keeps its proportions; `null` drops the mark and the wordmark leads.
wordmark	`React.ReactNode`	'Andromeda'	The product name, the lockup's first line, set in the same uppercase label treatment. `null` drops the line.
title	`React.ReactNode`	-	Screen name, set under the wordmark in the brand lockup. Omitted, the second line is not rendered at all and the wordmark sits alone, centred on the bar — no empty line, no height change.
links	`TopBarLink[]`	-	Nav links. Empty drops the nav AND its divider, so the brand doesn't sit beside an orphaned hairline.
size	`'sm'\|'md'`	'sm'	Rung for the bar's own nav: the links render at textSm / textMd in a `tokens.control[size]` box (28 / 32px), and the nav gap steps with them. The bar's HEIGHT is `layout.headerHeight` at both rungs — this sizes the nav, not the strip. The three cluster slots are the caller's: pass Button / UserMenu at the MATCHING rung, or the row mixes sizes.
badge	`React.ReactNode`	-	Status slot — a live/degraded reading, never decoration.
cta	`React.ReactNode`	-	One primary action for the whole screen.
user	`React.ReactNode`	-	Identity slot (UserMenu).
className	`string`	-	Additional CSS classes applied to the root element.
style	`React.CSSProperties`	-	Inline styles applied to the root element.

Displays a status message in the flow of the page, at a severity from note to fault.

Represents a person as a square image tile that falls back to their initials.

Displays the state a row or cell reports, such as online, queued, or fault.