AI Chat Card

Overview

An AI chat card that types prompts into its composer, with send, attach and reset actions.

This card component is intended for interfaces that need an AI chat card that types prompts into its composer, with send, attach and reset actions, SaaS dashboards, and product pages. Its implementation is provided as editable source so the final behavior and styling stay inside your project.

Technologies

React
TypeScript
Tailwind CSS
Motion

Detected package dependencies: motion, lucide-react.

@spectrumui/ai-chat-card

New Chat

How can I help you today?

Morning, Arihant!

What are we working on today? Press send to start a new conversation

Ask anything…

Installation

Login to view commandCreate a free account to access the install command

Usage

import { AIChatCard } from "@/components/spectrumui/ai-chat-card"
<AIChatCard
  greeting="Morning, Arihant!"
  prompts={["Make my hero section feel more premium", "Add a pricing table"]}
  onSend={(message) => console.log(message)}
/>

API Reference

AIChatCard

Shows an empty-state greeting above a composer. While in view the composer types each entry of prompts on a loop; clicking into it hands the text over to the user and stops the typing. The reset button in the header clears the composer and restarts the loop.

PropTypeDefaultDescription
promptsstring[]-Prompts the composer types out on a loop
autoTypebooleantrueTurn the prompt-typing animation off
titlestring"New Chat"Header title
subtitlestring"How can I help you today?"Header subtitle
greetingstring"Morning, Arihant!"Empty-state heading
promptstring-Empty-state copy under the greeting
placeholderstring"Ask anything…"Composer placeholder while empty
iconReactNode-Empty-state icon; defaults to a dashed chat bubble
onSend(message: string) => void-Fires with the composer text when send is pressed
onReset() => void-Fires when the header reset button is pressed
onAttach() => void-Fires when the attach button is pressed
classNamestring-Additional classes merged with the root styles

Use cases

  • interfaces that need an AI chat card that types prompts into its composer, with send, attach and reset actions
  • SaaS dashboards
  • product pages

Features

  • Copy-paste source that remains in your repository
  • TypeScript source included with the component
  • Tailwind CSS classes editable in the component source
  • Animation implemented with Motion
  • Spectrum UI registry dependencies: @spectrumui/use-typewriter

Accessibility

  • The source includes ARIA attributes or roles; preserve them when customizing the component.
  • No reduced-motion marker was detected; add or verify a reduced-motion path before production use.
  • Test focus order, keyboard operation, labels, contrast, and screen-reader output in the final application context.

Customization

  • Edit the Tailwind utility classes in the copied source to match your spacing, color, and typography tokens.
  • Use the documented className surface for local layout adjustments, then edit the source for structural changes.
  • Adjust Motion transitions in the source and keep the reduced-motion behavior aligned with the final interaction.

Related components

Animated Card
A card that animates on hover to showcase tools, technologies, and features.
Beam Card
A card wrapped in an animated border beam, traveling or breathing, in four color palettes.
Card
A set of pre-designed cards for login, signup, pricing, and dashboards.
3D Tilt Card
A 3D card that tilts toward the pointer with parallax depth and glare.

AI Chat Card FAQ

Is AI Chat Card free to use in commercial projects?

Yes. The public AI Chat Card source is available under the Apache License 2.0, including for commercial use, subject to the LICENSE terms.

How do I install AI Chat Card?

Run npx shadcn@latest add @spectrumui/ai-chat-card. The page also exposes the source for manual installation.

Does AI Chat Card require Motion?

Yes. Motion usage was detected in the documented source or registry dependencies for AI Chat Card.

Does AI Chat Card use shadcn/ui or Radix UI?

No shadcn/ui or Radix UI dependency was detected in the documented AI Chat Card source.

Can I use AI Chat Card in Next.js?

The documented React source is used in this Next.js application. Keep its use client directive when copying it into the App Router. Install the detected dependencies and verify any application-specific data or image configuration.

What accessibility checks should I run for AI Chat Card?

The source includes ARIA markup. Test the finished interface with keyboard and screen-reader workflows.

Work with me