Status
Service status indicator component for React and Next.js applications. Built with TypeScript support, Tailwind CSS styling, and shadcn/ui design featuring automatic colors, ping animations, and customizable labels.
Installation
npx shadcn@latest add https://www.shadcn.io/registry/status.jsonnpx shadcn@latest add https://www.shadcn.io/registry/status.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/status.jsonbunx shadcn@latest add https://www.shadcn.io/registry/status.jsonFeatures
- Service status display - Visual uptime and health indicators using JavaScript state management
- Automatic coloring - Status-based color schemes with built-in themes for React applications
- Ping animations - Pulse effects for live status updates using Tailwind CSS animations
- Customizable labels - Flexible text and color controls using TypeScript props
- Multiple variants - Different indicator styles and sizes for Next.js projects
- Accessibility features - Screen reader support and semantic markup using shadcn/ui patterns
- Open source - Free status component with responsive design and theme integration
Examples
Custom styles
Use Cases
- Service monitoring - API and server uptime status displays
- System dashboards - Health indicators for infrastructure monitoring
- User interfaces - Connection status and availability indicators
- Real-time updates - Live status feeds with automatic color coding
Implementation
Built with automatic status-to-color mapping. Uses CSS animations for ping effects. Supports custom labels and styling. Responsive design with accessibility features.
QR Code
QR code generator component for React and Next.js applications. Built with TypeScript support, Tailwind CSS styling, and shadcn/ui design featuring SVG rendering, custom colors, and server component support.
Terminal
Animated terminal emulator component for React and Next.js applications. Built with TypeScript support, Tailwind CSS styling, and shadcn/ui design featuring typing effects, macOS styling, and Motion animations.