Thinking indicator
An AI working indicator that steps through thinking, searching, analysing and writing.
npm install motion clsx tailwind-merge lucide-react or npx programmable-cli add thinking-indicator
MP4 and GIF exports are for sites that are not on React. Each counts as this month’s download of the component.
What it’s for
- Waiting states while something is generated
- Feature pages that show work in progress
- Onboarding and setup flows
How to use it
- Download the file. ThinkingIndicator.tsx is one self-contained React component. Pick a brand colour above and the file comes in it, where the component has a main colour to replace. Sites not on React can take it as an MP4 or GIF.
- Install what it uses.
npm install motion clsx tailwind-merge lucide-react, with Tailwind CSS set up in your project. - Drop it in.
import { ThinkingIndicator } from "./ThinkingIndicator";then render<ThinkingIndicator />where you want it.
Want it about your product? Make one like it and the studio builds a version with your features, numbers and brand.
Related components
Inspection progressA deep-scan loader: a ring and bar fill as named steps tick past, an ETA counts down, and four work cards light up as they complete.
Comparison tabsSwitch between competitors with a sliding tab and see each feature marked yes, no or partial.
Flip comparison cardsCards that flip on hover from your advantage to the competitor's limitation.
Metric face-offHead-to-head metric bars that grow into view, ending in a win-rate summary.React + Tailwind CSS. Use downloads in your own sites and products; please don’t resell them as a component library. Repeat downloads of the same component in a month don’t count.