Status Dot.

import { StatusDot } from "@/components/ui/status-dot";

export default function StatusDotDemo() {
  return (
    <div className="grid gap-3 font-mono text-[11px] tracking-[0.15em] uppercase">
      <span className="flex items-center gap-2.5 text-success">
        <StatusDot tone="online" /> Online
      </span>
      <span className="flex items-center gap-2.5 text-primary">
        <StatusDot tone="busy" /> Running
      </span>
      <span className="flex items-center gap-2.5 text-destructive">
        <StatusDot tone="error" pulse={false} /> Error
      </span>
      <span className="flex items-center gap-2.5 text-muted-foreground">
        <StatusDot tone="offline" pulse={false} /> Offline
      </span>
    </div>
  );
}

Installation#

With the CLI

$npx lanterncn add status-dot

This also installs the Lantern theme and any Lantern UI components it depends on. The shadcn CLI works directly too: npx shadcn@latest add httptim/lantern-ui/status-dot. See Installation if your project is not set up yet.

Manually

1. Install the dependencies

   npm install class-variance-authority

2. Copy the source into your project

   components/ui/status-dot.tsx

   import * as React from "react";
   import { cva, type VariantProps } from "class-variance-authority";
   
   import { cn } from "@/lib/utils";
   
   const statusDotVariants = cva("inline-block size-1.5 shrink-0 rounded-full", {
     variants: {
       tone: {
         online: "bg-[#a7c68c] shadow-[0_0_12px_#91aa7880]",
         busy: "bg-primary shadow-[0_0_12px_#f5a66560]",
         offline: "bg-input",
         error: "bg-destructive shadow-[0_0_12px_#e0715f60]",
       },
       pulse: { true: "animate-lantern-pulse", false: "" },
     },
     defaultVariants: { tone: "online", pulse: true },
   });
   
   function StatusDot({
     className,
     tone,
     pulse,
     label,
     ...props
   }: React.ComponentProps<"span"> & VariantProps<typeof statusDotVariants> & { label?: string }) {
     return (
       <span
         data-slot="status-dot"
         role={label ? "status" : undefined}
         aria-label={label}
         aria-hidden={label ? undefined : true}
         className={cn(statusDotVariants({ tone, pulse }), className)}
         {...props}
       />
     );
   }
   
   export { StatusDot, statusDotVariants };

3. Update the import paths to match your project

   The source imports cn from @/lib/utils.

Usage#

import { StatusDot } from "@/components/ui/status-dot";

<StatusDot tone="online" label="Online" />