Reasoning

The Reasoning primitive renders the model's own thinking tokens (DeepSeek-R1 style) in a collapsible region. It auto-expands while tokens stream — showing an elapsed timer — and auto-collapses when the final answer arrives. The compact ThinkingBar variant is a one-line status strip with inline stop/expand. Together with ChainOfThought it forms a three-tier thinking taxonomy: ThinkingBar → Reasoning → ChainOfThought.

Preview

Installation

pnpm dlx shadcn@latest add @localmode/ui/conversation/reasoning

npx shadcn@latest add @localmode/ui/conversation/reasoning

yarn dlx shadcn@latest add @localmode/ui/conversation/reasoning

bunx --bun shadcn@latest add @localmode/ui/conversation/reasoning

Data source & dependencies

Data source: renders a reasoning string you pass — works with any backend. Recommended producer: a reasoning-capable model via @localmode/react (on-device). See Use with the Vercel AI SDK.

• clsx + tailwind-merge — via the shared cn() util (installed automatically as a registry dependency)

Files installed

• reasoning.tsx — Reasoning, ReasoningTrigger, ReasoningContent, ThinkingBar
• lib/utils.ts — the cn() helper (if not already present)

Props

Examples

Stream reasoning tokens

import { Reasoning, ReasoningContent, ReasoningTrigger } from '@/components/reasoning';

<Reasoning streaming={isThinking}>
  <ReasoningTrigger />
  <ReasoningContent>{thinkTokens}</ReasoningContent>
</Reasoning>

Customization

Pass durationMs to display a known elapsed time instead of the internal timer, or control open/onOpenChange to override the auto-expand/collapse behavior.

These primitives are presentational and hook-driven: they render props and emit callbacks, holding only local view state. The orchestration state (e.g. useGenerateText) lives in your app. Every surface uses shadcn/ui CSS-variable utilities, so it inherits your theme — restyle the copied file freely.