Feedback

Status

A small lamp. Colour is the state and blinking means live.

ui.netm8.com preview staging archive

npx shadcn@latest add https://ui.netm8.com/r/status.json

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

export default function StatusDemo() {
  return (
    <div className="grid gap-3 font-mono text-xs text-dim">
      <span className="flex items-center gap-3">
        <Status tone="ok" live label="Live" /> ui.netm8.com
      </span>
      <span className="flex items-center gap-3">
        <Status tone="warn" label="Building" /> preview
      </span>
      <span className="flex items-center gap-3">
        <Status tone="bad" label="Failed" /> staging
      </span>
      <span className="flex items-center gap-3">
        <Status tone="idle" label="Idle" /> archive
      </span>
    </div>
  )
}

class-variance-authority