Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Shadcn Status for React Radix UI

Color-coded status for process or state.

Framework
UI library

Installation

bunx --bun shadcn@latest add https://kit.dev/r/radix/status.json

Usage

import { Status } from "@/components/ui/status";
<div className="flex gap-4">
  <Status />
  <Status variant="success" />
  <Status variant="info" />
  <Status variant="warning" />
  <Status variant="destructive" />
</div>

Demos

Custom Color

Custom Size

Size Lg

Size Md

Size Sm

Variant Default

Variant Destructive

Variant Info

Variant Success

Variant Warning

With Badge

With Icon

API Reference

Status

span

PropType
AttributeType