KOMA UI
Components

Thinking Loader

A simple loading indicator that cycles through a list of status messages. It uses a smooth vertical scroll animation to show users exactly what your AI is doing behind the scenes, from "Thinking" to "Generating."

Thinking ...
Searching Web
Extracting Relevant Info
Generating Answer
Thinking ...

Installation

bunx --bun shadcn@latest add https://komaui.iamkunal.in/r/thinking-loader.json

Usages

"use client"

import ThinkingLoader from "@/components/ui/thinking-loader"

export default function ThinkingLoaderDemo() {
	const thinkingText = [
		"Analyzing your prompt...",
		"Searching knowledge base...",
		"Synthesizing results...",
		"Formulating response..."
	];

	return (
		<ThinkingLoader thinkingText={thinkingText} />
	)
}

Props

PropertyTypeRequiredDescription
thinkingTextString[]Notext of string to render