Dashboard Footer React component
An app footer with a live status bar: a pulsing system status that opens 30-day uptime bars per service, region and latency, last synced with Sync now, a version badge with a What's new panel, a language menu, page feedback, and a keyboard shortcuts dialog on ? with a filter.
About the Dashboard Footer component
Dashboard Footer closes an app screen with the small things people look for at the bottom: system status, the version and what changed, links, language, and a list of keyboard shortcuts.
The status bar is live. The status dot opens 30 days of uptime per service, latency updates as you watch, and Sync now refreshes data with a spinner. Press ? anywhere to see every shortcut.
When to use it
Use it at the bottom of dashboards, admin panels and internal tools, especially when people need to know whether something is down or out of date.
For a marketing site footer with columns of links and a newsletter, use a footer section instead.
Installation
Add the Dashboard Footer component to your project with the shadcn CLI. It lands in components/dashboard-footer.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/dashboard-footerOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<DashboardFooter /> accepts 8 props, all optional.
| Prop | Type | Default |
|---|---|---|
| product | string | "Nexora" |
| version | string | "4.2.0" |
| region | string | "eu-central-1" |
| links | { label: string; href: string }[] | LINKS |
| onSync | () => Promise<void> | void | — |
| onLanguageChange | (code: string) => void | — |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- productstringDefault: "Nexora"
- versionstringDefault: "4.2.0"
- regionstringDefault: "eu-central-1"
- links{ label: string; href: string }[]Default: LINKS
- onSync() => Promise<void> | void
- onLanguageChange(code: string) => void
- theme"dark" | "light"Default: "dark"
- classNamestring
npm dependencies
Installed for you by the shadcn CLI.
Dashboard Footer FAQ
- Where does the status come from?
- The demo uses a fixed list of services. Load it from your status page API and set each service's state and day bars; the label and dot color follow automatically.
- What does Sync now do?
- It calls onSync. Return a Promise and the icon keeps spinning until it resolves, then the label shows Synced just now.
- How does the ? shortcut work?
- A key listener opens the shortcuts dialog when ? is pressed outside a text field. Replace the SHORTCUTS list with your app's own keys.
- Do the popovers fit at the bottom of the screen?
- Yes. Every menu and panel opens upward from the footer and is sized to the container, so it stays on screen on phones too.
- Is it accessible?
- Popovers are labelled dialogs or menus that focus their first control, the language list uses menuitemradio with arrow keys, the uptime bars have a text label, sync status is announced, and Escape closes everything.
