Status

Renders a status indicator and label. It shows a colored circle and text based on the status. Use it to display service uptime or status information.

byShadcnblocks.com from Kibo UI

Installation

terminal

pnpm dlx layro-cli add @shadcnblocks/status

npx layro-cli add @shadcnblocks/status

npx layro-cli add @shadcnblocks/status

bunx layro-cli add @shadcnblocks/status

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Dependencies

Demo

import type { ComponentProps, HTMLAttributes } from "react";
import { Badge } from "@/components/ui/badge";
import { cn } from "@/lib/utils";

export type StatusProps = ComponentProps<typeof Badge> & {
  status: "online" | "offline" | "maintenance" | "degraded";
};

export const Status = ({ className, status, ...props }: StatusProps) => (
  <Badge
    className={cn("flex items-center gap-2", "group", status, className)}
    variant="secondary"
    {...props}
  />