Thinking

The animated sparkle with a shimmering status label.

import { Card } from "@/components/ui/card";

import { GeminiThinking } from "../components/gemini-thinking";

export default function GeminiThinkingExample() {
  return (
    <Card className="border-gemini-border bg-gemini-bg flex w-full min-w-0 flex-col gap-6 overflow-hidden rounded-2xl border px-4 py-8 text-base ring-0">
      <GeminiThinking />
      <GeminiThinking label="Thinking" />
    </Card>
  );
}

$ bunx --bun shadcn@latest add @notra/gemini-thinking

GeminiThinking pairs an animated GeminiSparkle with a label that runs the Shimmer. It’s a polite live region, so screen readers announce label changes.

Prop	Default	Description
`label`	`Searching the web`	The status text. Gemini also shows “Thinking”.
`reducedMotion`	system setting	Stops the sparkle when `true`.

Used in

Gemini

A full recreation of the Gemini chat with the animated sparkle, streamed replies and a model picker.