Text Shimmer

A reusable shimmer-text effect for whatever's actively running — an in-progress task, a streaming response, a loading label. Built on the shimmer utility already shipped by this project's shadcn Tailwind layer.

pnpm dlx shadcn@latest add @ditherui/text-shimmer

Generating response…

Install

$ pnpm dlx shadcn@latest add @ditherui/text-shimmer

Props

PropTypeDefault

durationnumber (ms)2000

pausedbooleanfalse

asChildbooleanfalse

className / style / ...span propsReact.ComponentProps<"span">—

When to use the agent task list

Use the task list to show the steps an agent is working through. The active task shimmers and tasks complete one at a time in order.

Open the CLI tab on any preview above for the exact shadcn command. The source is copied into your project, so you can edit it like any other file.

Suggested components

TSsum.ts
const sum = (a: number, b: number) => a + b console.info(sum(2, 3))
Code BlockSyntax-highlighted code with copy feedback and a tidy header.

TSformat-price.ts+1-1

export function formatPrice(cents: number) {
  return `$${(cents / 100).toFixed(2)}`
  return fmt.format(cents / 100)
}

Inline DiffInline additions and removals so users can review what an agent changed.

R
Refactor agent
Ready · 0.0s
Agent RunA step-by-step run timeline with tool calls and approval gates.