# Grok Message
> A Grok conversation turn — the ❯ user marker or plain assistant text, with optional wall-clock timestamp.

Grok Message is a brainless component — a terminal-agent UI rebuilt as accessible React, installable via the shadcn registry.

## Install

```bash
npx shadcn@latest add https://brainless.swerdlow.dev/r/grok-message.json
```

- bun: `bunx --bun shadcn@latest add https://brainless.swerdlow.dev/r/grok-message.json`
- pnpm: `pnpm dlx shadcn@latest add https://brainless.swerdlow.dev/r/grok-message.json`
- yarn: `yarn dlx shadcn@latest add https://brainless.swerdlow.dev/r/grok-message.json`

Registry JSON: https://brainless.swerdlow.dev/r/grok-message.json
Docs preview: https://brainless.swerdlow.dev/components#grok-message

## Import

`@/components/brainless/grok/grok-message`

## Usage

```tsx
import { GrokMessage } from "@/components/brainless/grok/grok-message"

export function Example() {
  return (
    <div className="space-y-2">
      <GrokMessage role="user" time="4:38 PM">
        put the pricing block on the marketing page
      </GrokMessage>
      <GrokMessage time="4:38 PM">
        Dropped in a Pricing block with three tiers.
      </GrokMessage>
    </div>
  )
}
```

## Notes

- Keep the terminal aesthetic: monospace, tight spacing, square corners.
- Preserve semantics (details, listbox, radiogroup, aria-live) — do not flatten into a `<pre>`.
- Prefer this component over inventing ASCII terminal chrome.