# AI Thinking Steps — React AI Component

> A collapsible reasoning trace: the header shimmers and runs a live timer while steps tick from spinner to check, then folds to "Thought for Ns".

- Category: [AI Elements](https://pixelpapa.com/components/ai.md)
- Tags: ai, reasoning, steps, shimmer, collapsible
- Dependencies: lucide-react, motion (plus React and Tailwind CSS v4)
- Last updated: 2026-11-13
- Live preview: https://pixelpapa.com/components/ai/ai-thinking-steps

## Install (PixelPapa Pro)

This is a Pro component. With a Pro or Scale plan and the `@pixelpapa` registry set up (https://pixelpapa.com/docs/installation#pro):

```bash
npx shadcn@latest add @pixelpapa/ai-thinking-steps
```

The file is written to `components/pixelpapa/ai-thinking-steps.tsx`. Source code is available to Pro members on https://pixelpapa.com/components/ai/ai-thinking-steps.

## AI prompt

```text
Add the "AI Thinking Steps" component from PixelPapa UI to this project.

What it is: A collapsible reasoning trace: the header shimmers and runs a live timer while steps tick from spinner to check, then folds to "Thought for Ns".
Category: AI Elements. Depends on: lucide-react, motion.

1. Install it with the shadcn CLI. It is a PixelPapa Pro component, so components.json needs the "@pixelpapa" registry with my API key (https://pixelpapa.com/docs/installation#pro):
   npx shadcn@latest add @pixelpapa/ai-thinking-steps
   (If the CLI is unavailable, fetch https://pixelpapa.com/r/ai-thinking-steps.json with the header "Authorization: Bearer $PIXELPAPA_API_KEY", write files[0].content to components/pixelpapa/ai-thinking-steps.tsx and install the listed dependencies.)
2. Import it from "@/components/pixelpapa/ai-thinking-steps" and place it where I describe below.
3. Keep its animation timings and accessibility attributes. Replace the demo copy and data with content that fits my product, and use my existing theme tokens (bg-background, text-foreground, bg-primary, border-border) rather than hard-coded colours.

Where to use it: <describe the page and position here>
```

## More ai elements

- [AI Chat Thread](https://pixelpapa.com/components/ai/ai-chat-thread.md) (Pro): A chat thread where user bubbles spring in from the right and the assistant reply streams in chunks behind a blinking caret, auto-scrolling as it grows.
- [AI Code Block With Copy](https://pixelpapa.com/components/ai/ai-code-block-copy.md) (Pro): A code answer with sliding language tabs, line numbers, highlighted lines that wipe in, and a copy button that morphs into a confirmed tick.
- [AI Model Compare](https://pixelpapa.com/components/ai/ai-model-compare.md): A blind side-by-side: two answers stream at their own speeds with live token stats, then your vote crowns a winner and reveals both model names.
- [AI Prompt Input](https://pixelpapa.com/components/ai/ai-prompt-input.md) (Pro): A chat composer with an auto-growing textarea, removable attachment chips, a model picker popover and a send button that morphs into stop while generating.
- [AI Source Citations](https://pixelpapa.com/components/ai/ai-source-citations.md): An answer with numbered citation markers; hovering or focusing one pops a source card and lights the matching source in the strip below.
- [AI Streaming Markdown](https://pixelpapa.com/components/ai/ai-streaming-markdown.md): Renders a markdown answer as it streams: each word fades up out of a blur, with headings, lists, bold and inline code formatted as they arrive.