Component Registry

Install beautiful, accessible React components for status pages. Pre-built, customizable components compatible with shadcn/ui.

Build your status page in minutes, not hours. The Openstatus registry gives you production-ready React components specifically designed for status pages. Built on top of shadcn/ui, these components are accessible, customizable, and battle-tested in production.

What is the Registry?

The Openstatus registry is a shadcn/ui-compatible collection of pre-built components for common status page patterns. Instead of building status indicators, event timelines, and monitoring displays from scratch, you can 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
• Production-ready - Battle-tested in production at Openstatus

Complete Example

Hover the example below to learn which component is being used.

We are working on matching the component Props and the @openstatus/sdk-node return values, allowing you to use our SDK to build your own custom status page.

See the complete example for full source code and usage patterns.

Installation

Install any component with a single shadcn CLI command:

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

Available Components

Components are organized by function:

• Collections: status-complete, status-essentials - Full status page bundles
• Building Blocks: status-banner, status-bar, status-feed, status-events, status-component, status-icon, status-layout, status-timestamp - Individual components

Browse the full registry at openstatus.dev/r/registry.json

Using openstatus but want a custom theme?

Learn More

• Complete Example - See all components in action
• Openstatus SDK - Build on top of openstatus with our SDK
• shadcn/ui Documentation - Learn about the underlying component system
• Openstatus GitHub - Star the project and contribute
• Component Source Code - Browse the implementation
• Theme Explorer - Explore community themes

Support

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

• Open an issue
• Join our Discord
• Check the documentation
• Send an email