Omarchy Status

ui

A semantic status badge backed by the active Omarchy palette.

bunx --bun shadcn@latest add yamz8/omarchy-shadcn-registry/omarchy-status

Preview

activeidleofflineerror

Dependencies

npm
cn
registry
badge

Source

registry/ui/omarchy-status.tsx
import * as React from "react"
import { cn } from "cn"

import { Badge } from "@/components/ui/badge"

const statusColors = {
  active: "var(--omarchy-green)",
  idle: "var(--omarchy-yellow)",
  offline: "var(--muted-foreground)",
  error: "var(--destructive)",
} as const

function OmarchyStatus({
  status,
  children,
  className,
  style,
  ...props
}: React.ComponentProps<typeof Badge> & {
  status: keyof typeof statusColors
}) {
  return (
    <Badge
      variant="outline"
      data-slot="omarchy-status"
      data-status={status}
      className={cn("gap-1.5", className)}
      style={
        {
          "--omarchy-status-color": statusColors[status],
          ...style,
        } as React.CSSProperties
      }
      {...props}
    >
      <span
        aria-hidden
        className="size-1.5 rounded-full bg-[var(--omarchy-status-color)]"
      />
      {children ?? status}
    </Badge>
  )
}

export { OmarchyStatus }