Back to components
AI Generating Card React component

What is this?

A dusk-toned AI tile. The prompt sits in a glass bubble, then the answer panel shows a shimmering “Thinking” label with skeleton lines before the reply streams in word by word behind a blinking caret. The full answer reserves its space, so the card never jumps. Under reduced motion it shows the final answer only. Swap the prompt, answer, labels, or background photo, then drop it into an AI feature grid.

Component

AI Generating Card

A dusk-toned AI tile. The prompt sits in a glass bubble, then the answer panel shows a shimmering “Thinking” label with skeleton lines before the reply streams in word by word behind a blinking caret. The full answer reserves its space, so the card never jumps. Under reduced motion it shows the final answer only. Swap the prompt, answer, labels, or background photo, then drop it into an AI feature grid.

Checking access…
Live Preview

Verified Technical Spec

Animation
CSS / Tailwind
Reduced motion
Verified
Keyboard focus
Not detected in source
Compatibility
Tailwind CSS v3.4 + v4 · React 19 / Next.js 15 App Router + Vite / Remix compatible

Included

  • Copy source into Cursor or Claude for agent install
  • Finished React · TypeScript · Tailwind CSS · Lucide UI

Dependencies

  • React 19.0.0
  • Typescript 5.7.2
  • Tailwindcss 3.4.16
  • Lucide-react 1.23.0

Tech Stack

  • React
  • TypeScript
  • Tailwind CSS
  • Lucide

Version 1.0.0