Registry Index

Search the catalog

Type to search items across every indexed registry, or pick a page.

ExampleReactregistry:exampleSelf-contained

Status indicator demo

status-indicator-demo

A status indicator demo component

A demo of status-indicator

registry/8starlabs-ui/examples/status-indicator-demo.tsxcomponents/8starlabs-ui/examples/status-indicator-demo.tsx
15 lines
import StatusIndicator from "@/registry/8starlabs-ui/blocks/status-indicator";

export default function StatusIndicatorDemo() {
  return (
    <div className="flex flex-col gap-4">
      <StatusIndicator state="active" label="All systems operational" />
      <StatusIndicator state="down" label="Systems down" />
      <StatusIndicator state="idle" label="Systems idle" />
      <StatusIndicator state="fixing" label="Diagnosing issue, fixing" />
      <StatusIndicator state="active" label="Small size" size="sm" />
      <StatusIndicator state="fixing" label="Large size" size="lg" />
    </div>
  );
}
@8starlabs-ui

More from @8starlabs-ui

A transport badge component

A Base UI collapsible component

A Base UI separator component

A Stripe-style perspective error shake for form fields, with a declarative wrapper and an imperative hook

A status indicator component

A compact status history bar for showing service uptime across days or hours.

A styled input component

A styled label component