AI Prompt Input
An expanding prompt area with a glowing drop zone that breathes open to meet you as you type a thought or drag a file.
Agentic AI Interfaces
Agentic AI interface components for React: a complete AI chat, an agent UI for tool calls and reasoning steps, typing indicators, AI buttons, prompt inputs, model pickers and voice orbs.
12 components
Animated Loading Skeleton
An organic loading state instead of a spinner, with a slow aurora that breathes in the space where your content will land.
Voice Reactive Orb
A breathing voice orb that swells with speech and settles between turns, never jittery and always organic to look at.
AI Model Selector
An AI model selector dropdown that scales out from its trigger and glides the selection pill to whichever model you pick.
AI Image Loading Animation
Dots rise from a dark floor, form the picture, and clear into the photograph.
AI Chat Interface
A complete AI chat interface for React: streaming replies, web search with cited sources, stop, retry and a model picker.
AI Typing Indicator
A typing indicator for React AI chat: typing dots in a bubble, or a thinking label that names each step with its own icon.
Which agentic AI component should I use?
The whole chat
- AI Chat Interface
- You need the full chat screen rather than one part: streaming replies, cited web search, stop, retry and the composer in one file.
Showing the agent's work
- AI Agent UI
- Your model calls tools. Each search, command and edit shows as a step with its output, and risky calls wait for Allow or Deny.
Taking the request
- AI Prompt Input
- The prompt box is the main event. It expands as you type and opens a drop zone for files rather than hiding attachment behind a button.
- AI Button
- AI is one action inside your app, such as Generate or Summarize. The button shows loading, lets people stop, then confirms done.
- AI Model Selector
- People choose a model before they send. The selection pill glides across to whatever they land on, so the active choice stays obvious.
While the model works
- AI Typing Indicator
- A chat reply is on its way. Typing dots in a bubble, or a label that names each step with its own animated icon.
- Animated Loading Skeleton
- The wait before a response should read as generative rather than blank. Organic placeholder motion suits streaming output better than a plain loading bar.
- AI Orb
- An image model is working and the wait needs one calm focal point. A dark glass sphere with a slowly drifting violet rim, and no label competing with it.
- AI Image Loading Animation
- The result is a picture, so the wait should build toward it. Dots rise from a dark floor and settle into the photograph, which makes the reveal the loading state.
Orbs that show presence
Three answers to the same brief. Weight is what separates them.
- Voice Reactive Orb
- The interface is listening. A breathing orb with distinct listening states, so someone can tell whether their voice is actually being heard.
- ChatGPT Orb
- You want a presence marker that costs almost nothing to run. Fractal noise blooms white ink inside a soft circular mask.
- Siri Orb
- The orb should look like glass with a spectrum caught inside it. Heavier than the ChatGPT orb, smoked in dark mode and clear in light.
More categories
Browse other categories
Cinematic Interactions
21 componentsBig-feeling motion: parallax, scrub-scroll sequences, sticky storytelling, page transitions and cursor trails. The components that make a marketing site feel alive.
Explore categoryHeavy SaaS Blocks
5 componentsCommand palettes, kanban boards, data tables, pricing toggles, RBAC controls - the dense product surfaces real apps need on day one.
Explore categoryElite Micro-Interactions
16 componentsThe 200-millisecond moments that elevate every flow: magnifying docks, animated hamburger menus, star ratings, liquid glass buttons, tag inputs and loaders. Polish without theatrics.
Explore category