@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.

26 components react shadcn-cli AGPL-3.0

website ↗ github ↗ registry ↗

Install this registry

shadcn (npm) npx shadcn@latest add https://openstatus.dev/r/registry.json

pnpm pnpm dlx shadcn@latest add https://openstatus.dev/r/registry.json

bun bunx shadcn@latest add https://openstatus.dev/r/registry.json

fetch registry curl -s https://openstatus.dev/r/registry.json

Components

26 total

Use Media Query hook

React hook for responsive media query detection

npx shadcn@latest add https://openstatus.dev/r/use-media-query.json

Use Copy to Clipboard 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 lib

TypeScript type definitions for status components

npx shadcn@latest add https://openstatus.dev/r/status-types.json

Status Utilities lib

Utility functions for status formatting and display

npx shadcn@latest add https://openstatus.dev/r/status-utils.json

Status Icon block

Unified status icon component with variants for different contexts

npx shadcn@latest add https://openstatus.dev/r/status-icon.json

Status Layout block

Layout primitives for composing status displays (Status, StatusHeader, StatusTitle, etc.)

npx shadcn@latest add https://openstatus.dev/r/status-layout.json

Status Blank States block

Empty and skeleton state components for loading and no-data scenarios

npx shadcn@latest add https://openstatus.dev/r/status-blank.json

Status Blocks i18n Provider 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 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 block

Alert-style status banner with tabs support and timestamp display

npx shadcn@latest add https://openstatus.dev/r/status-banner.json

Status Component block

Monitor component primitives for building status displays

npx shadcn@latest add https://openstatus.dev/r/status-component.json

Status Component Group block

Collapsible group wrapper for status components

npx shadcn@latest add https://openstatus.dev/r/status-component-group.json

Status Events block

Event timeline components for displaying status reports and maintenance updates

npx shadcn@latest add https://openstatus.dev/r/status-events.json

Status Bar block

Interactive status timeline with hover, keyboard navigation, and event display

npx shadcn@latest add https://openstatus.dev/r/status-bar.json

Status Calendar 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 block

Unified feed component combining status reports and maintenance events

npx shadcn@latest add https://openstatus.dev/r/status-feed.json

Status Theme Switcher 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 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 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 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 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 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 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 Page Chrome 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 Page (Complete) 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 Page (Essentials) block

Essential status page components for basic status displays

npx shadcn@latest add https://openstatus.dev/r/status-essentials.json