# Thinking Indicators

> Six small indicators for an AI reply that is on its way, from a pixel trail to a hopping graph, each with an optional shimmering status label.

- Collection: AI Agents
- Tier: pro
- Docs: https://geturui.com/docs/thinking-loaders
- Install: `npx shadcn@latest add @geturui-pro/thinking-loaders`
- Dependencies: motion

## Variants

### Pixel trail

A lit pixel circles a 3×3 grid and leaves a fading trail while the centre breathes.

Install: `npx shadcn@latest add @geturui-pro/thinking-loaders-pixel-trail`

```tsx
import { PixelTrailLoader } from "@/components/ai/thinking-loaders/pixel-trail";

export function AssistantPending() {
  return <PixelTrailLoader label="Thinking…" />;
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| size | `number` | 28 | Width and height of the graphic in px. |
| label | `string | null` | "Thinking…" | Shimmering text beside the loader. Pass null for the graphic alone (a hidden “Loading” label is kept). |
| speed | `number` | 1 | Speed multiplier; 2 runs twice as fast. |
| className | `string` | — | Extra classes on the status wrapper. |

### Scanline

A glowing scan line sweeps a dot matrix and each row lights as it passes.

Install: `npx shadcn@latest add @geturui-pro/thinking-loaders-scanline`

```tsx
import { ScanlineLoader } from "@/components/ai/thinking-loaders/scanline";

export function AssistantPending() {
  return <ScanlineLoader label="Reading files…" />;
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| size | `number` | 28 | Width and height of the graphic in px. |
| label | `string | null` | "Reading files…" | Shimmering text beside the loader. Pass null for the graphic alone (a hidden “Loading” label is kept). |
| speed | `number` | 1 | Speed multiplier; 2 runs twice as fast. |
| density | `3 | 4 | 5` | 4 | Cells per side of the grid. |
| className | `string` | — | Extra classes on the status wrapper. |

### Tile ripple

Squares swell and turn in a wave that rolls from one corner to the other.

Install: `npx shadcn@latest add @geturui-pro/thinking-loaders-tile-ripple`

```tsx
import { TileRippleLoader } from "@/components/ai/thinking-loaders/tile-ripple";

export function AssistantPending() {
  return <TileRippleLoader label="Drafting a plan…" />;
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| size | `number` | 28 | Width and height of the graphic in px. |
| label | `string | null` | "Drafting a plan…" | Shimmering text beside the loader. Pass null for the graphic alone (a hidden “Loading” label is kept). |
| speed | `number` | 1 | Speed multiplier; 2 runs twice as fast. |
| density | `3 | 4 | 5` | 4 | Cells per side of the grid. |
| className | `string` | — | Extra classes on the status wrapper. |

### Quad lock

Four tiles spin in from the corners, lock into a square with a pulse, then scatter.

Install: `npx shadcn@latest add @geturui-pro/thinking-loaders-quad-lock`

```tsx
import { QuadLockLoader } from "@/components/ai/thinking-loaders/quad-lock";

export function AssistantPending() {
  return <QuadLockLoader label="Assembling layout…" />;
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| size | `number` | 28 | Width and height of the graphic in px. |
| label | `string | null` | "Assembling layout…" | Shimmering text beside the loader. Pass null for the graphic alone (a hidden “Loading” label is kept). |
| speed | `number` | 1 | Speed multiplier; 2 runs twice as fast. |
| className | `string` | — | Extra classes on the status wrapper. |

### Comet rhombus

A comet circles a rhombus outline while the inner rhombus turns the other way.

Install: `npx shadcn@latest add @geturui-pro/thinking-loaders-comet-rhombus`

```tsx
import { CometRhombusLoader } from "@/components/ai/thinking-loaders/comet-rhombus";

export function AssistantPending() {
  return <CometRhombusLoader label="Reasoning…" />;
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| size | `number` | 28 | Width and height of the graphic in px. |
| label | `string | null` | "Reasoning…" | Shimmering text beside the loader. Pass null for the graphic alone (a hidden “Loading” label is kept). |
| speed | `number` | 1 | Speed multiplier; 2 runs twice as fast. |
| className | `string` | — | Extra classes on the status wrapper. |

### Graph hop

A pulse hops along the edges of a small graph and each node flashes as it lands.

Install: `npx shadcn@latest add @geturui-pro/thinking-loaders-graph-hop`

```tsx
import { GraphHopLoader } from "@/components/ai/thinking-loaders/graph-hop";

export function AssistantPending() {
  return <GraphHopLoader label="Connecting sources…" />;
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| size | `number` | 28 | Width and height of the graphic in px. |
| label | `string | null` | "Connecting sources…" | Shimmering text beside the loader. Pass null for the graphic alone (a hidden “Loading” label is kept). |
| speed | `number` | 1 | Speed multiplier; 2 runs twice as fast. |
| className | `string` | — | Extra classes on the status wrapper. |

## Accessibility

- Each loader is a role="status" live region; the visible label (or a hidden “Loading”) is what gets announced.
- The graphics are aria-hidden so screen readers never read individual dots or paths.
- With reduced motion every loader renders a still frame and the label stops shimmering.

## Source

Pro item — send `Authorization: Bearer <registry token>` to include the source.