Skip to main content

Reasoning

The moment between a request and the first token. A role="status" region announces the label once; the spark pulses (--animate-pulse) and the dots bounce in turn (--animate-bounce, offset by animation-delay). Under prefers-reduced-motion everything holds still and the text alone says "working".

import Reasoning from '@zuilib/ai/reasoning'

Basic

Loading example

Change detail as the work progresses ("Reading 4 files", then "Comparing against last quarter"); the live region announces each change.

Props

PropTypeDefaultDescription
labelReactNode'Working on it'
detailReactNodeWhat is happening right now
size'sm' | 'md''md'
iconReactNodeReplaces the spark
classNamestring