184 Components
AI Chat Bubble
CardsSpring-entrance chat message bubble for AI interfaces. Supports user (right, filled) and assistant (left, outlined) roles, animated typing dots state, optional avatar initials, and timestamp.
AI Conversation Stage
U
Can you create an accessible spring modal for Next.js?
10:24 AM
AI
Here's an accessible modal with Framer Motion spring physics, focus trap, and keyboard Escape handling built for BoseUI.
10:24 AM
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/ai-chat-bubble.json"
Props
TypeScript props supported by <AIChatBubble />.
| Prop | Type | Default | Description |
|---|---|---|---|
| role | "user" | "assistant" | — | Controls bubble alignment and color scheme. |
| content | string | — | Message text content. |
| typing | boolean | false | Show animated typing dots instead of content. |
| avatar | string | — | Optional avatar initials or emoji. |
| timestamp | string | — | Optional timestamp string shown below content. |
Key Features
- Spring entrance animation: y:16→0 + opacity fade.
- Role-aware layout: user right-aligned filled, assistant left outlined.
- Typing dots variant with staggered bounce animation.
- Optional avatar initials and timestamp.
- prefers-reduced-motion: static render without animation.
Keyboard & Accessibility
- Text content fully accessible to screen readers.
- No motion when prefers-reduced-motion is set.