Structured answerPro

An answer laid out like a good magazine page: the one line answer, the key facts in a row of figures, the prose, then where to go next.

Markdown

On this page

ProWhat a three person studio in Porto costs: the one line answer, four figures, the reasoning, then where to go next.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/structured-answer

Usage

tsx

import { StructuredAnswer } from "@/components/ui/chatcn/pro/structured-answer"

<StructuredAnswer
  title="About €14,000 a month"
  facts={[{ label: "Studio rent", value: "€1,850", unit: "a month" }]}
  followUps={["Draft a six month cash flow table"]}
  onFollowUp={send}
  status={status}
>
  <Markdown>{prose}</Markdown>
</StructuredAnswer>

Two to four facts sit between hairlines, never in boxes: a label, a tabular figure with a quieter unit, and a one line note. Two columns on phones, one row from 640 px. A fact without a value yet holds a skeleton at its final size, so figures settle in place while the prose streams below without moving. Follow ups are the free FollowUps list, with its streaming placeholders. A reply that stops says so under the prose with Retry response, and everything above stays.

Examples

States

ProFacts still coming, two facts, three without a title, stopped before it finished, and long values.

Props

Prop	Type	Notes
`title`	`ReactNode`	The answer in one line. Optional
`facts`	`StructuredFact[]`	`{ label, value?, unit?, note? }`
`children`	`ReactNode`	The prose
`followUps`, `onFollowUp`	`string[]`, `(text) => void`
`status`	`"streaming" \| "done" \| "error"`	Default `done`
`expectedFollowUps`	`number`	Placeholders while streaming. Default 3
`errorText`, `onRetry`	`ReactNode`, `() => void`

Keyboard

Key	Action
Up and Down in follow ups	Move between suggestions

Accessibility

The answer is an article named by its title; the facts are a description list.
Skeletons are hidden from assistive tech; the article is aria-busy while streaming.

Motion

Each figure fades in over 150 ms when it lands, in a cell that already had its size. Nothing else moves.