Status

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

Installation

npx shadcn@latest add @scrollxui/status

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

Shiny

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.