---
title: "Component Registry"
url: "https://www.openstatus.dev/registry"
date: "2026-02-08"
author: "openstatus"
description: "Install beautiful, accessible React components for status pages. Pre-built, customizable components compatible with shadcn/ui."
category: "Documentation"
---

Build your status page in minutes, not hours. The openstatus registry provides production-ready React components specifically designed for status pages. Built on top of [shadcn/ui](https://ui.shadcn.com), these components are accessible, customizable, and battle-tested in production.

## What is the Registry?

The openstatus registry is a collection of shadcn/ui-compatible, pre-built components for common status page patterns. Instead of building status indicators, event timelines, and monitoring displays from scratch, install and customize these components directly into your project.

All components are:
- **Accessible** - Built with ARIA patterns and keyboard navigation
- **Customizable** - Fully themeable with Tailwind CSS
- **Type-safe** - Written in TypeScript with complete type definitions
- **Localizable** - Optional i18n provider for translated labels and locale-aware date formatters; English defaults out of the box
- **Production-ready** - Battle-tested in production at openstatus

## Example

Hover over the example below to see which component is being used.

> We are working on aligning component `Props` with [`@openstatus/sdk-node`](https://jsr.io/@openstatus/sdk-node) return values, enabling you to use our SDK to build your own custom status page.

View the [GitHub source code](https://github.com/openstatusHQ/openstatus/tree/main/apps/web/src/content/shadcn-registry-example.tsx) for examples and usage patterns.

## Installation

> **Prerequisites:** these components target an initialised **shadcn project on Tailwind CSS v4**. If you're starting from scratch (Astro, Vite, etc.), run `shadcn init` first — it creates `components.json`, the `@/*` path alias, and your Tailwind v4 CSS entry. Tested with the latest shadcn CLI (`shadcn@latest`).

Install any component with a single [shadcn CLI](https://ui.shadcn.com/docs/cli) command:

```bash
npx shadcn@latest add https://openstatus.dev/r/status-complete
```

Or install the registry first:

```bash
pnpm dlx shadcn@latest registry add @openstatus
```

 And install the component via:

```bash
pnpm dlx shadcn@latest add @openstatus/status-complete
```

### Available Components

Components are organized by functionality:

- **Collections:** `status-complete` (everything — body + chrome), `status-essentials` (body subset), `status-chrome` (header + footer + switchers + status-updates) - Full status page bundles
- **Body Blocks:** `status-banner`, `status-bar`, `status-calendar`, `status-feed`, `status-events`, `status-component`, `status-component-group`, `status-blank`, `status-icon`, `status-layout`, `status-timestamp` - Individual components for the page body
- **Chrome Blocks:** `status-page-shell`, `status-page-header`, `status-page-footer`, `status-page-get-in-touch`, `status-updates`, `status-theme-switcher`, `status-locale-switcher` - Header, footer, and surrounding chrome for a full status page
- **i18n:** `status-i18n` - Optional context provider + hook for translated labels and locale-aware date formatters (auto-installed as a dependency of the blocks above)

Explore the full registry at [openstatus.dev/r/registry.json](https://openstatus.dev/r/registry.json)

> **Tip:** `status-complete` installs every feature and pulls extra dependencies (`next-themes`, `sonner`, `react-day-picker`, `@date-fns/utc`). If you only need the page body, `status-essentials` is the lighter entry point.

### Localization

Blocks ship with English (`en-US`) defaults and require zero setup. To localize, mount `<StatusBlocksI18nProvider>` near your app root and pass a `StatusBlocksLabels` value (translated strings + locale-aware date formatters built from your own i18n library — `next-intl`, `react-intl`, or whatever you use). Blocks read labels via `useStatusBlocksLabels()`; if no provider is mounted, they fall back to `defaultStatusBlocksLabels`.

This contract keeps the registry library-agnostic — `@openstatus/ui` does not depend on `next-intl` or any other i18n package directly.

---

Want to customize your theme?

## Learn More

- [Source Code Example](https://github.com/openstatusHQ/openstatus/tree/main/apps/web/src/content/shadcn-registry-example.tsx) - See all components in action
- [Blog Post](/blog/shadcn-component-registry) - How We Build Our shadcn Component Registry
- [Openstatus SDK](https://jsr.io/@openstatus/sdk-node) - Build on top of openstatus with our SDK
- [shadcn/ui Documentation](https://ui.shadcn.com) - Learn about the underlying component system
- [Openstatus GitHub](https://github.com/openstatusHQ/openstatus) - Star the project and contribute
- [Theme Explorer](https://themes.openstatus.dev) - Explore community themes

## Support

If you encounter issues, have questions, or want to share feedback:

- [Open an issue](https://github.com/openstatusHQ/openstatus/issues)
- [Join our Discord](https://openstatus.dev/discord)
- [Check the documentation](https://www.openstatus.dev/docs)
- [Send an email](mailto:ping@openstatus.dev)