Think is installed into your project as a file you own. It takes the same props as Ant Design X's Think. The kit changes the defaults of icon and loading to draw from your icon pack, and adds a ref, all marked antuikit in the API table. The folding arrow comes from the icon pack too.
Install
npx antuikit@latest init
npx antuikit@latest add think
The first command installs AntuikitProvider and the theme tokens, the second adds this component.
Import
From @/components/ui/think, never from @ant-design/x. The file lives in your project, so the import is a path, not a package.
import { Think } from "@/components/ui/think"
The header
The header is one row: an icon, the title and the folding arrow. The reasoning goes in children.
title is the status text. Change it when the model finishes, from “Thinking” to “Thought for 4 seconds”.
icon defaults to the icon pack's sparkle glyph. Pass any node to replace it.
loading swaps the icon for a spinning loading glyph from the icon pack. Pass a node instead of true to draw your own.
blink makes the title shimmer. Turn it on and off with loading.
1
<Think
2
title={done ? "Thought for 4 seconds" : "Thinking"}
3
loading={!done}
4
blink={!done}
5
>
6
{reasoning}
7
</Think>
Folding
The block starts unfolded. Set defaultExpanded to false to start folded.
expanded with onExpand controls it from your state, for example to fold the reasoning once the answer starts.
destroyOnHidden removes the reasoning from the page while the block is folded. It is on by default.
Events
onExpand fires when the header is clicked, with the new folded state.
Styling
classNames and styles take three keys: root, status for the header and content for the reasoning.
1
<Think
2
classNames={{
3
root: "…",
4
status: "…",
5
content: "…",
6
}}
7
/>
API Reference
Think
Think's props. Rows marked antuikit in the Version column are added or changed by the kit.