Thread event

Free · MIT

A quiet, centred line in a thread for something that happened rather than something said: "Sam joined", "Switched to the staging environment", "Run stopped by a guardrail". System messages are drawn with it too, so app events and system lines look the same. Text here is the app's own, never model output.

Markdown

Preview

Install

With the Candor CLI

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/thread-event

Brings in: locale, relative-time, utils · npm: lucide-react@^1.67.0

Usage

TSX · The example above

"use client"

import { GitBranch, ShieldAlert, UserPlus } from "lucide-react"
import { ThreadEvent } from "@/components/thread-event"

const minutesAgo = (m: number) => new Date(Date.now() - m * 60_000).toISOString()

export default function Example() {
  return (
    <div className="flex max-w-xl flex-col gap-2">
      <ThreadEvent icon={UserPlus} at={minutesAgo(12)}>
        Sam Lee joined the conversation
      </ThreadEvent>
      <ThreadEvent icon={GitBranch}>Switched to the staging environment</ThreadEvent>
      <ThreadEvent icon={ShieldAlert} tone="attention">
        Run stopped: deletes in production need a second person’s sign-off
      </ThreadEvent>
    </div>
  )
}

<ThreadEvent>

Prop	Type	Default	Description
icon	`LucideIcon \| null \| undefined`	Info	The glyph before the text; `null` for none. Default: an info mark.
tone	`"quiet" \| "attention" \| undefined`	"quiet"	"quiet" (the default) or "attention", for an event a reader shouldn't miss.
at	`string \| undefined`	—	When it happened, shown after the text as a relative time.
timeFormat	`"relative" \| DateStyle \| undefined`	—	"relative" (the default) or an absolute "time", "date" or "datetime" in the locale.
align	`"center" \| "start" \| undefined`	"center"	"center" (the default), or "start": a left-aligned line (right-aligned in RTL) with the time at its end.
childrenrequired	`React.ReactNode`	—	What happened, in a short line.
className	`string \| undefined`	—	Extra classes for the outer element.

Also takes the props of Omit<React.ComponentProps<"div">, "children">.