Chat Bubble

A transcript with the agent: the user speaks in soft glass, the agent answers on quiet paper with a directional corner. Four surface variants (solid, soft, outline, ghost), an ember accent tone, author and timestamp lines, a crest avatar, a typing state, file-card attachments and a frosted composer.

Draw

draw a card

$npx shadcn@latest add @clow/chat-bubble

First time? Point @clow at the registry

Once per project, add the registry to your components.json. Then draw any card by name.

"registries": {
  "@clow": "https://clow.cards/r/{name}.json"
}

Full setup →

Playground

Relay agent

Done. 214 packets parsed and saved as structured data.

09:41

props

from

variant

tone

typing

author

authorVariant

timestamp

avatar

attachment

attachmentMeta

entrance

children

<ChatBubble>Done. 214 packets parsed and saved as structured data.</ChatBubble>

Examples

basic

Pull the last transmission log from relay KX-7 and save it as structured data.

09:40

Done. 214 packets parsed from the northern array, timestamps normalized and checksums verified. Saved as a structured notebook.

kx7-transmission-logNotebook · JSON

09:41

Auto-run

conversation

Bring relay KX-7 back on the mesh.

Rerouted through the northern array. Back online.

Props

prop	type	default
from	user \| agent	agent
variant	solid \| soft \| outline \| ghost	soft
tone	neutral \| accent	neutral
typing	boolean	false
author	text	Relay agent
authorVariant	quiet \| mono \| ink	quiet
timestamp	text	09:41
avatar	text	C
attachment	text
attachmentMeta	text	Notebook · JSON
entrance	none \| rise	none
children	text	Done. 214 packets parsed and saved as structured data.