jengacore components · @jengacore/live-dot

LiveDot

The live indicator, one of the two loops the motion rules allow.

Install

terminal

npx shadcn@latest add @jengacore/live-dot

Without the namespace configured: npx shadcn@latest add https://ui.jengacore.com/r/<new-york-v4|base-nova>/live-dot.json

Registry dependencies

@jengacore/theme

Source

components/jc/live-dot.tsx

import * as React from "react"

import { cn } from "@/lib/utils"

/** The live indicator: the only element, with the SLA-breach tick, allowed to loop. */
export function LiveDot({ label = "Live", className }: { label?: string; className?: string }) {
  return (
    <span data-slot="live-dot" className={cn("inline-flex items-center gap-2 font-mono text-[11px] tracking-[0.12em] text-muted-foreground uppercase", className)}>
      <span className="size-2 rounded-full bg-emerald-400 animate-pulse-live" aria-hidden />
      {label}
    </span>
  )
}