HomeDocsComponentsBlocksChartsThemes
Introduction
  • Introduction
  • Installation
  • Themes
  • llms.txt
Components
  • Accordion
  • Alert
  • Alert Dialog
  • Amount
  • Aspect Ratio
  • Audio Player
  • Avatar
  • Avatar Upload
  • Badge
  • Banner
  • Breadcrumb
  • Button
  • Button Group
  • Calendar
  • Card
  • Carousel
  • Chart
  • Checkbox
  • Code Block
  • Collapsible
  • Color Picker
  • Combobox
  • Command
  • Context Menu
  • Copy Button
  • Countdown
  • Data Grid
  • Data Table
  • Date Picker
  • Date Range Picker
  • Description List
  • Device Mockup
  • Dialog
  • Direction
  • Dot Loader
  • Drawer
  • Dropdown Menu
  • Empty
  • Field
  • File Upload
  • Hover Card
  • Input
  • Input Group
  • Input OTP
  • Item
  • Kanban
  • Kbd
  • Label
  • Menubar
  • Meter
  • Multi Select
  • Native Select
  • Navigation Menu
  • Number Field
  • Pagination
  • Password Strength
  • Phone Input
  • Popover
  • Progress
  • Progress Circle
  • Radio Group
  • Rating
  • Resizable
  • Responsive Dialog
  • Rich Text Editor
  • Scroll Area
  • Segmented Control
  • Select
  • Separator
  • Sheet
  • Sidebar
  • Signature
  • Skeleton
  • Slider
  • Sortable
  • Spinner
  • Stat
  • Stepper
  • Switch
  • Table
  • Tabs
  • Tag Input
  • Terminal
  • Textarea
  • Time Field
  • Timeline
  • Toast
  • Toggle
  • Toggle Group
  • Tooltip
  • Tree
  • Typography
  • Video Player
  • Window Mockup
AI
  • Message Scroller
  • Message
  • Bubble
  • Marker
  • Attachment
  • Questionnaire
  • Composer
  • Reasoning
  • Tool Call
  • Approval Card
  • Citations
Blocks
  • Airtable
  • Airtable Kanban
  • ClickUp List
  • ClickUp Kanban
  • Repeatable Group
  • Command Palette
  • Sign In and Sign Up
  • Availability Scheduler
  • AI Chat
  • Action Bar
  • Notion
  • Banking
  • Lineup Builder
  • Sports Score
  • Strava
  • Sheets
  • Notices
  • Settings
  • Billing
Utilities
  • motion
  • sounds
  • scroll-fade
  • shimmer
Another UI. Built on shadcn/ui with Phosphor icons.

Reasoning

PreviousNext

The thinking trace above an AI answer, with a live timer, a step for each search, read or tool call, and a fold that closes itself when the answer starts.

Base UIReact AriaRadix UI
Invoices assistant
Which invoices are overdue right now?
Three invoices are overdue for $5,225 in total. Northwind is the largest at $2,400, 12 days late. Nothing came in through Stripe since Monday.
Finished, opened
  1. Matching the receipt to a vendor
  2. Searching past Staples receipts
    • Receipts, 2026
  3. Posting to Office Supplies
    The books are locked for September.

Installation#

pnpm dlx shadcn@latest add https://anotherui.dev/r/reasoning.json

Usage#

import { Reasoning, type ReasoningStep } from "@/components/ui/reasoning"
<Message>
  <MessageContent>
    <Reasoning
      streaming={thinking}
      steps={[
        { id: "1", kind: "think", title: "Working out what counts as overdue", status: "done" },
        { id: "2", kind: "search", title: "Searching invoices", status: "running" },
      ]}
    />
    <Bubble variant="ghost">
      <BubbleContent>{answer}</BubbleContent>
    </Bubble>
  </MessageContent>
</Message>

Parts#

  • Header. While streaming, it reads "Thinking..." with a light sweeping across the text and a timer. When streaming ends it reads "Thought for 12s", or "Stopped after 12s" if a step failed. Pass duration in milliseconds to show a stored time instead of the measured one.
  • Steps. Each step has a kind that picks its icon: think, search, read, code or tool. A running step shows a spinner and shimmers its title, a pending step is faded, and an error step turns red. Steps fade up as they arrive.
  • Detail and sources. detail sits under the title and keeps line breaks, so streamed text can grow in place. sources adds small chips, linked when they have an href.
  • Open and close. It opens when streaming starts and folds away when it ends. Turn this off with autoOpen and autoClose, or control it with open and onOpenChange.
  • Children. Anything passed as children shows under the steps, for a short summary.
RatingResizable

On This Page

InstallationUsageParts