---
name: "@openstatus"
slug: "openstatus"
description: "Hand-crafted, accessible shadcn-registry components extracted from the OpenStatus open-source status page and uptime monitoring platform (AGPL-3.0). The registry ships status-page-specific primitives including StatusPage shell, StatusPageHeader, StatusPageFooter, StatusBanner, StatusBar, StatusComponent, StatusComponentGroup, StatusFeed, StatusEvents, StatusTimestamp, StatusLocale Switcher, StatusTheme Switcher, and incident-related components. Built with Tailwind CSS and React. The broader platform supports 28-region uptime monitoring, incident communication, and subscriber notifications. Use for: building branded incident/status page UIs or embedding live service health widgets into existing Next.js or React applications."
category: "Niche/single-purpose"
tags: ["accessibility", "buttons", "cards", "components", "design-system", "developer-tools", "forms", "hooks", "icons", "mobile", "overlays", "pro-available", "theming"]
framework: "react"
license: "AGPL-3.0"
author: "openstatusHQ"
website: "https://openstatus.dev/registry"
github: "https://github.com/openstatusHQ/openstatus"
registry: "https://openstatus.dev/r/registry.json"
pro: true
pro_url: "https://openstatus.dev/pricing"
github_stars: 8843
component_count: 26
generated_at: "2026-07-28T08:00:50.948Z"
---

# @openstatus

Hand-crafted, accessible shadcn-registry components extracted from the OpenStatus open-source status page and uptime monitoring platform (AGPL-3.0). The registry ships status-page-specific primitives including StatusPage shell, StatusPageHeader, StatusPageFooter, StatusBanner, StatusBar, StatusComponent, StatusComponentGroup, StatusFeed, StatusEvents, StatusTimestamp, StatusLocale Switcher, StatusTheme Switcher, and incident-related components. Built with Tailwind CSS and React. The broader platform supports 28-region uptime monitoring, incident communication, and subscriber notifications. Use for: building branded incident/status page UIs or embedding live service health widgets into existing Next.js or React applications.

## Links

- Website: https://openstatus.dev/registry
- GitHub: https://github.com/openstatusHQ/openstatus
- Registry JSON: https://openstatus.dev/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/openstatus
- This file: https://sh4dcn.vercel.app/md/openstatus.md
- Pro / pricing: https://openstatus.dev/pricing

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://openstatus.dev/r/registry.json
pnpm dlx shadcn@latest add https://openstatus.dev/r/registry.json
bunx shadcn@latest add https://openstatus.dev/r/registry.json
# clone the source repo
git clone https://github.com/openstatusHQ/openstatus.git
# fetch the raw registry index
curl -s https://openstatus.dev/r/registry.json
```

## Components (26)

| name | type | description | install |
| --- | --- | --- | --- |
| use-media-query | registry:hook | React hook for responsive media query detection | `npx shadcn@latest add https://openstatus.dev/r/use-media-query.json` |
| use-copy-to-clipboard | registry:hook | React hook for copying text to clipboard with toast notifications | `npx shadcn@latest add https://openstatus.dev/r/use-copy-to-clipboard.json` |
| status-types | registry:lib | TypeScript type definitions for status components | `npx shadcn@latest add https://openstatus.dev/r/status-types.json` |
| status-utils | registry:lib | Utility functions for status formatting and display | `npx shadcn@latest add https://openstatus.dev/r/status-utils.json` |
| status-icon | registry:block | Unified status icon component with variants for different contexts | `npx shadcn@latest add https://openstatus.dev/r/status-icon.json` |
| status-layout | registry:block | Layout primitives for composing status displays (Status, StatusHeader, StatusTitle, etc.) | `npx shadcn@latest add https://openstatus.dev/r/status-layout.json` |
| status-blank | registry:block | Empty and skeleton state components for loading and no-data scenarios | `npx shadcn@latest add https://openstatus.dev/r/status-blank.json` |
| status-i18n | registry:block | React context for supplying translated labels and locale-aware date formatters to status blocks. Optional — blocks fall back to defaultStatusBlocksLabels (en-U… | `npx shadcn@latest add https://openstatus.dev/r/status-i18n.json` |
| status-timestamp | registry:block | Interactive timestamp display with tooltip (simple) or hover-card (rich) variants showing multiple timezone formats | `npx shadcn@latest add https://openstatus.dev/r/status-timestamp.json` |
| status-banner | registry:block | Alert-style status banner with tabs support and timestamp display | `npx shadcn@latest add https://openstatus.dev/r/status-banner.json` |
| status-component | registry:block | Monitor component primitives for building status displays | `npx shadcn@latest add https://openstatus.dev/r/status-component.json` |
| status-component-group | registry:block | Collapsible group wrapper for status components | `npx shadcn@latest add https://openstatus.dev/r/status-component-group.json` |
| status-events | registry:block | Event timeline components for displaying status reports and maintenance updates | `npx shadcn@latest add https://openstatus.dev/r/status-events.json` |
| status-bar | registry:block | Interactive status timeline with hover, keyboard navigation, and event display | `npx shadcn@latest add https://openstatus.dev/r/status-bar.json` |
| status-calendar | registry:block | Monthly calendar view of status history with per-day markers and event hover cards | `npx shadcn@latest add https://openstatus.dev/r/status-calendar.json` |
| status-feed | registry:block | Unified feed component combining status reports and maintenance events | `npx shadcn@latest add https://openstatus.dev/r/status-feed.json` |
| status-theme-switcher | registry:block | Agnostic light/dark/system theme switcher. Caller owns the value and onValueChange wiring (next-themes, form state, etc.) | `npx shadcn@latest add https://openstatus.dev/r/status-theme-switcher.json` |
| status-locale-switcher | registry:block | Agnostic locale picker. Caller owns value, onValueChange, and label resolution — no next-intl, router, or locale detection | `npx shadcn@latest add https://openstatus.dev/r/status-locale-switcher.json` |
| status-updates | registry:block | Popover with copy-link primitives for RSS, Atom, JSON, Slack, and SSH subscription channels. Flat exports — caller composes layout (tabs, sections, etc.) | `npx shadcn@latest add https://openstatus.dev/r/status-updates.json` |
| status-page-get-in-touch | registry:block | Two flat button primitives (icon + text) with tooltip chrome for the contact link in a status page header | `npx shadcn@latest add https://openstatus.dev/r/status-page-get-in-touch.json` |
| status-page-header | registry:block | Presentation-only header chrome (brand, nav, actions). Routing-agnostic — apps inject their own Link component via asChild | `npx shadcn@latest add https://openstatus.dev/r/status-page-header.json` |
| status-page-footer | registry:block | Presentation-only footer chrome (powered-by, action cluster). Embed/white-label gating, switchers, and tRPC fetch stay in the wrapping app | `npx shadcn@latest add https://openstatus.dev/r/status-page-footer.json` |
| status-page-shell | registry:block | Outer chrome wrappers (StatusPageShell + StatusPageMain) around header / main / footer. Routing-agnostic with embed-aware Tailwind classes that activate only w… | `npx shadcn@latest add https://openstatus.dev/r/status-page-shell.json` |
| status-chrome | registry:block | Full status page chrome — shell, header, footer, get-in-touch, status-updates, theme + locale switchers. Combine with status-essentials or status-complete for … | `npx shadcn@latest add https://openstatus.dev/r/status-chrome.json` |
| status-complete | registry:block | Complete status page components including all primitives, displays, interactive elements, and chrome (header / footer / switchers) | `npx shadcn@latest add https://openstatus.dev/r/status-complete.json` |
| status-essentials | registry:block | Essential status page components for basic status displays | `npx shadcn@latest add https://openstatus.dev/r/status-essentials.json` |

## For AI agents

```text
You are adding components from @openstatus to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/openstatus.md) for the component list.
2. Fetch the machine-readable index: https://openstatus.dev/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: openstatus).
```