Uptime Bar
A status-page uptime strip: one bar per day tinted by availability, rising in one after another, with a tooltip per day and the period's uptime figure.
- Category: React Chart and Data Table Components
- Licence: Free, MIT
- Built with: React 19, Tailwind CSS 4, Motion
- Dependencies: motion, clsx, tailwind-merge
Examples
Uptime Bar
API reference
| Prop | Type | Default | Description |
|---|---|---|---|
name | string | "API" | |
days | { label: string; uptime: number; note?: string }[] | — |
About Uptime Bar
Uptime Bar shows a service's availability as one bar per day, tinted by uptime and rising in one after another, with a tooltip for each day and the period's uptime figure beside the name.
Uptime Bar is an animated chart for React 19, styled with Tailwind CSS 4 and animated with Motion. It drops into Next.js, Vite, Remix or Astro through the shadcn CLI as a single file you own.
When to use Uptime Bar
- Public status pages.
- Internal service health dashboards.
- SLA reports for customers.
- Monitoring overviews.
How it works
Tints step from healthy to degraded to down by thresholds. Each day is focusable with its date and uptime in the label, and the overall figure is calculated from the days you pass.
Each chart has a text alternative, hover tooltips are mirrored by keyboard focus where data points are interactive, and colour is never the only way a value is shown. With prefers-reduced-motion on, it holds still or settles instantly instead of animating.
Customizing Uptime Bar
Every prop is documented in the API reference above with its type and default. The ones you will reach for first are listed here.
Style it with className like any other element. It only uses your theme's tokens, so it follows light and dark mode without extra work.
- name (string, default "API").
- days.
Goes well with Uptime Bar
These charts pieces share its tokens and motion language, so they sit together on one page without clashing.
- Bar Chart: An animated React bar chart that springs up in sequence with an accessible table
- Funnel Chart: A React conversion funnel that shows the drop-off between every stage
- Donut Chart: An animated React donut chart: segments draw in and thicken on hover
- Activity Heatmap: A React contribution heatmap with four shades, tooltips and keyboard navigation
- Sparkline: An animated React sparkline with fill, trend colour and a pulsing end dot
Install Uptime Bar
npx shadcn@latest add https://charcoalui.com/r/uptime-bar.jsonUptime Bar is free and MIT licensed. The command copies uptime-bar.tsx into components/ui and installs clsx, tailwind-merge; you can also copy the source from the Code tab by hand.
Charcoal UI Pro adds 393 more showpiece components, 112 sections and 100 templates built the same way.
Frequently asked questions
- How do I install Uptime Bar?
- Run npx shadcn@latest add https://charcoalui.com/r/uptime-bar.json. The shadcn CLI copies uptime-bar.tsx into components/ui and installs motion, clsx, tailwind-merge. You can also copy the source from this page by hand.
- Is Uptime Bar free for commercial use?
- Yes. Uptime Bar is MIT licensed: use it in any personal or commercial project and change it however you like.
- Does Uptime Bar work with Next.js?
- Yes. It is a client component for React 19 styled with Tailwind CSS 4, so it works in the Next.js App Router and Pages Router, Vite, Remix and Astro.
- Can an AI coding agent install Uptime Bar?
- Yes. Connect the Charcoal UI MCP server (https://charcoalui.com/mcp) to Claude Code, Cursor or any MCP client; get_component returns Uptime Bar's props and source and get_install_command returns the exact command.