

<Preview name="ReasoningShowcaseExample" />

## Overview [#overview]

`Reasoning` displays model reasoning or thinking text behind a collapsible trigger. Consumers own the text, streaming status, and persistence.

The trigger shows active thinking with `isStreaming`, auto-opens when reasoning starts, and auto-closes after reasoning finishes.

## Usage [#usage]

```tsx
import {
  Reasoning,
  ReasoningContent,
  ReasoningTrigger,
} from "@tilt-legal/cubitt-components/chat-elements";
```

## Examples [#examples]

### Default [#default]

<Tabs items="['Preview', 'Code']">
  <Tab value="Preview">
    <Preview name="ReasoningDefaultExample" />
  </Tab>

  <Tab value="Code">
    ```tsx
    <Reasoning defaultOpen duration={4}>
      <ReasoningTrigger />
      <ReasoningContent>
        I checked the uploaded lease summary first because it contains the operative termination language.
      </ReasoningContent>
    </Reasoning>
    ```
  </Tab>
</Tabs>

### Streaming [#streaming]

<Tabs items="['Preview', 'Code']">
  <Tab value="Preview">
    <Preview name="ReasoningStreamingExample" />
  </Tab>

  <Tab value="Code">
    ```tsx
    <Reasoning isStreaming>
      <ReasoningTrigger />
      <ReasoningContent>
        Checking the matter sources before drafting the final response...
      </ReasoningContent>
    </Reasoning>
    ```
  </Tab>
</Tabs>
