Workspace header

A workspace switcher, the section's tabs underneath, and help, notifications and the account menu.

$ pnpm dlx shadcn@latest add @dashral/workspace-header

When to use

A header for apps with several workspaces or projects, with the section's tabs underneath.
Project tools and agencies' client workspaces, where switching context is part of the day.

When not to use

Apps with a single workspace: Dashboard header is simpler.
Public sites: Website header.

Usage

Workspace header with your own data: every prop has the sample as its default, so pass only what you have.

example.tsx

1import { WorkspaceHeader } from "@/components/dashral/blocks/workspace-header"
2
3<WorkspaceHeader
4  workspaces={workspaces}
5  workspace={workspaceId}
6  onWorkspaceChange={(id) => router.push(`/w/${id}`)}
7  sections={sections}
8  section={section}
9  onSectionChange={setSection}
10  user={user}
11  onAction={(action) => handleHeaderAction(action)}
12/>

API reference

WorkspaceHeader

Two rows: the workspace and project switchers with help, notifications and the account menu on top, and the section's tabs underneath, with an underline that slides to the one you pick. Every part comes from props: what's picked can be controlled, and every menu item and button tells onAction.

Prop	Type	Default
`workspaces`	`Workspace[]`	`sample`
`workspace`	`string` The workspace picked, by id (the header keeps it without it).	—
`onWorkspaceChange`	`(id: string) => void`	—
`projects`	`Project[]` The projects in it; none hides the project switcher.	`sample`
`project`	`string`	—
`onProjectChange`	`(id: string) => void`	—
`sections`	`Section[]` The tabs underneath: links (href), or picked in place (onSectionChange); none hides the row.	`sample`
`section`	`string`	—
`onSectionChange`	`(label: string) => void`	—
`user`	`{ name: string; email: string; src?: string }`	`sample`
`notifications`	`number` Unread notifications: a dot on the bell when there are any.	`2`
`onAction`	`(action: HeaderAction) => void`	—

type Workspace

Prop	Type	Default
`id`	`string`	—
`name`	`string`	—
`plan`	`string`	—
`color`	`string`	—

type Project

Prop	Type	Default
`id`	`string`	—
`name`	`string`	—
`status`	`string`	—

type Section

Prop	Type	Default
`label`	`string`	—
`href`	`string`	—

type HeaderAction

What the account menu and the workspace and project menus can ask for.

= "create-workspace" | "workspace-settings" | "new-project" | "feedback" | "help" | "notifications" | "profile" | "billing" | "sign-out"