Status

A small status component with customizable variants, indicator and shiny animation effects.

Online

Offline

Away

Info

Warning

Idle

Error

Pending

Success

Error

Busy

Online

Installation

npx shadcn@latest add https://scrollxui.dev/registry/status.json

Add Utilities

tailwind.config.ts

module.exports = { 
   theme: { 
     extend: { 
       keyframes: { 
         shine: { 
           '0%': { 'background-position': '100%' }, 
          '100%': { 'background-position': '-100%' }, 
         }, 
      }, 
       animation: { 
        shine: 'shine 5s linear infinite', 
       }, 
     }, 
    }, 
    plugins: [], 
 };

Usage

import { Status } from "@/components/ui/status";

<div className="flex gap-3">
<Status status="online" statusindicator>Online</Status>
<Status status="pending" shiny shinySpeed={2}>Fast Shine</Status>
</div>

Examples

Indicator

Online

Busy

Away

Service Outage

All Systems Operational

Shiny

Processing

Fast Shine

Shiny with Dot

API Reference

Status

The Status component creates a customizable label with optional indicator and shine.

Props

Property	Type	Default	Description
`status`	"online" \| "offline" \| "away" \| "busy" \| "idle" \| "pending" \| "success" \| "error" \| "warning" \| "info"	`"offline"`	Semantic status — controls the badge background color.
`statusindicator`	boolean	`false`	When true shows a small circular indicator to the left of the label.
`indicatorClassName`	string	`—`	Additional classes applied to the indicator (use w-/h- classes to set size).
`shiny`	boolean	`false`	Enable the animated shine effect (forwarded to the underlying Badge).
`shinySpeed`	number	`—`	Shine animation speed in seconds (forwarded to the Badge).
`className`	string	`—`	Custom class names applied to the outer Badge element.
`children`	React.ReactNode	`—`	Content rendered inside the Status (typically a text label).
`...props`	HTMLDivElement attributes	`—`	All other standard div props/events are supported and forwarded to the Badge.