# antuikit / Think

> Think, a folding block that shows a model's reasoning. Draws its icon, loading spinner and folding arrow from the icon pack, and merges `className` through `cn()`.

Docs: https://antuikit.com/docs/components/think

## Install

npx antuikit@latest init
npx antuikit@latest add think

## Import

import { Think } from "@/components/ui/think";

## Demos

- [Basic](https://ui.antuikit.com/embed/think/basic.md): Pass `title` for the header and the reasoning as children, and click the header to fold or unfold it.
- [Loading](https://ui.antuikit.com/embed/think/loading.md): Set `loading` while the model is still thinking to show a spinner, and `blink` to make the title shimmer.
- [Folded](https://ui.antuikit.com/embed/think/collapsed.md): Set `defaultExpanded` to `false` to start folded, so the reader opens the reasoning only when they want it.
- [Controlled](https://ui.antuikit.com/embed/think/controlled.md): Hold `expanded` in state and update it from `onExpand`, so a button outside can fold or unfold the reasoning too.
- [Assistant reply](https://ui.antuikit.com/embed/think/reply.md): An assistant reply in a `Bubble`, with the folded reasoning above the answer.
- [Research assistant](https://ui.antuikit.com/embed/think/research.md): A research panel where the reasoning runs open while the model thinks, folds when it is done, and the answer streams in below.
- [Math tutor](https://ui.antuikit.com/embed/think/math-tutor.md): An algebra tutor that solves an equation with its worked steps open in the reasoning, followed by the answer and follow-up buttons.
- [Support reply draft](https://ui.antuikit.com/embed/think/support-draft.md): A support ticket where the assistant checks the billing history in folded reasoning before suggesting a reply to send.

## Rules

- antuikit components are COPIED into a project from a registry. There is no
  `antuikit` package to import components from at runtime.
- Import from `@/components/ui/think`, never from `antd`. antd stays for
  `theme`, `App`, the `message` / `notification` statics and type-only imports.
- Do not nest a bare `<ConfigProvider theme>` to re-theme a region. Use
  `<ThemeScope theme={...}>`, which also carries the cssVar key class that
  non-antd descendants inherit their tokens from.
- Colors, radii and spacing come from the token contract, not from hardcoded
  values: write `rounded-lg`, `px-xxs`, `bg-warning`, not the raw `var(--ant-*)`.
- `Think` takes every Ant Design v6 prop of the same component. The
  wrapper never narrows that surface, so anything antd documents also works here.