Dashboard Header React component
A complete dashboard header: a top bar with a workspace switcher, tabs with a sliding underline, ⌘K search that expands in place with keyboard results, notifications with unread counts and mark all read, and an account menu, over a page header with a live status line, a date range control that updates a KPI strip, and export with progress.
About the Dashboard Header component
Dashboard Header is everything at the top of a dashboard in one block: the app bar with workspace switcher, tabs, search, notifications and account menu, and the page header below it with a status line, a date range and the main actions.
Every part works. Search opens in place with ⌘K and is driven by the keyboard, notifications keep an unread count, the date range updates the numbers underneath, and Export shows progress before it confirms.
When to use it
Use it at the top of analytics dashboards, admin panels and SaaS apps where people switch workspaces and move between a few main sections.
If your app has many sections, pair a sidebar with just the page header part, or use App Shell with Sidebar.
Installation
Add the Dashboard Header component to your project with the shadcn CLI. It lands in components/dashboard-header.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/dashboard-headerOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<DashboardHeader /> accepts 8 props, all optional.
| Prop | Type | Default |
|---|---|---|
| user | { name: string; email: string } | { name: "Lena Brandt", email: "lena@nexora.io" } |
| workspaces | { id: string; name: string; plan: string; color: string }[] | WORKSPACES |
| tabs | string[] | TABS |
| defaultRange | "7d" | "30d" | "90d" | "12m" | "30d" |
| onRangeChange | (range: Range) => void | — |
| onNavigate | (tab: string) => void | — |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- user{ name: string; email: string }Default: { name: "Lena Brandt", email: "lena@nexora.io" }
- workspaces{ id: string; name: string; plan: string; color: string }[]Default: WORKSPACES
- tabsstring[]Default: TABS
- defaultRange"7d" | "30d" | "90d" | "12m"Default: "30d"
- onRangeChange(range: Range) => void
- onNavigate(tab: string) => void
- theme"dark" | "light"Default: "dark"
- classNamestring
npm dependencies
Installed for you by the shadcn CLI.
Dashboard Header FAQ
- How do I connect search to real data?
- Replace the SEARCH list with results from your API as the query changes. The combobox keeps working: arrow keys move the highlight and Enter opens the active result.
- Can only one menu be open?
- Yes. Opening a menu closes the others, and Escape or a click outside closes whichever is open.
- Does the date range filter my charts?
- Pass onRangeChange and refetch your data with the new range. The KPI strip shows how values update in place.
- What happens on phones?
- The tabs move into a dropdown behind a menu button, search becomes an icon that expands, and the KPI cells stack.
- Is it accessible?
- Menus use menu roles with arrow-key movement, the workspace list uses menuitemradio, search is a combobox with a listbox, the bell announces the unread count, tabs mark the current page and actions report through a status message.
