Reasoning.
Watch it think, then tuck it away.
The model's visible thinking. It opens while thinking streams so the reader can follow, then closes once to a single line: Thought for N seconds. A reader who toggled it keeps their choice.
Make it yours
Preparing the example…
Composition
AnatomyDuration is measured from the streaming prop unless you pass it. Control open yourself to turn off the automatic behavior.
Reasoning.Root (streaming, autoClose, duration) — Collapsible.Root
├── Reasoning.Trigger — Shimmer “Thinking…” → “Thought for N seconds”
└── Reasoning.Content — Collapsible.Panel, usually a ResponseA place to start
UsageImport the stylesheet once at your application root. This complete example reflects the properties selected above.
Loading example…
Details that make a difference
Examples & statesThe finer details
API referenceGenerated from Dixy’s local TypeScript interfaces. Native and Base UI Collapsible props are forwarded; this table covers the options Dixy adds.
ReasoningRoot
| Prop | Type / description | Default |
|---|---|---|
streaming | booleanThe model is still thinking. Opens the panel so the reader can follow, then closes it once when thinking ends. | false |
open | booleanControlled open state. Stops the automatic open and close. | — |
defaultOpen | booleanInitial open state when uncontrolled. | false |
onOpenChange | ((open: boolean) => void)Called when the reader opens or closes it. | — |
duration | numberThinking time in seconds. Measured from `streaming` when omitted. | — |
autoClose | booleanClose automatically when thinking ends. A reader who toggled the panel keeps their choice. | true |
ReasoningTrigger
| Prop | Type / description | Default |
|---|---|---|
children | ReactNode | ((state: { streaming: boolean; duration?: number; }) => ReactNode)Replace the label. Receives the state the default label uses. | — |
thinkingLabel | stringLabel while thinking. | Thinking… |
formatDuration | ((seconds: number) => string)Label once done. | "Thought for N seconds" |
Built from the same foundations
Styling tokensChange Theme settings above to compare appearance, accent, neutral, radius, spacing density, motion and direction. Override component aliases on a Theme root so custom properties follow portaled content too. The wrapper merges className, style, refs and render composition with its owning primitive.
| Token | Purpose |
|---|---|
--dixy-disclosure-motion-reveal | The component-specific starting point. |
--dixy-font-label-md | Control label font and line height; body roles remain readable in text inputs. |
--dixy-color-background-selected | Selected surfaces use semantic color across appearances. |
--dixy-color-border-focus | Focus indication remains visible independently of shadows. |
--dixy-spacing-inset-sm | Density-aware component padding. |
--dixy-motion-transition-feedback | Short state feedback, reduced by the inherited motion setting. |
Consider everyone
AccessibilityThe trigger is a real button with aria-expanded and aria-controls from Base UI Collapsible. The shimmer is visual only; the label is read normally, and reduced motion makes it static.
Target: WCAG 2.2 AA. Automated tests cover selected behavior; manual screen-reader, contrast, and zoom validation remain part of the release checklist.
Build it. Then understand it.
Automatic behavior must yield to the person. One ref remembers that the reader touched the disclosure, and the auto-close never overrides them.
--dixy-disclosure-motion-reveal