Kevin

Thinking State

Component 3

About

A minimal shimmering text label that signals an AI agent is processing before it answers.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Thinking State to your project and fits it to your theme.

Code

How Thinking State is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { ThinkingState } from "@/components/ui/thinking-state";

export default function Default() {
  return (
    <div className="flex min-h-[220px] w-full items-center justify-center">
      <ThinkingState />
    </div>
  );
}

More by Kevin

View all
  • Image Generation

    Image Generation

    255
  • Thinking Reasoning

    Thinking Reasoning

    86
  • Agent To-do List

    Agent To-do List

    51
  • Orbs Morph

    Orbs Morph

    35
  • Orbs Helix

    Orbs Helix

    34
  • Web Search

    Web Search

    32
  • AI Agent Input

    AI Agent Input

    31
  • File Diff

    File Diff

    22

Explore more

Part of AIcss — browse the full library on 21st.dev.