Stop Rebuilding UI

Shadcn.io is not affiliated with official shadcn/ui

Previous: React AI Panel
Next: React AI Plan

React AI Persona

React AI persona component with animated Rive avatars for AI assistants

Give your AI a visual presence with animated avatars. This component renders Rive animations that respond to AI state—idle, listening, thinking, speaking, or asleep. Six beautiful variants: obsidian, mana, opal, halo, glint, and command. Some variants dynamically adapt colors to your theme (light/dark). Perfect for voice AI interfaces, chat assistants, or anywhere you want a visual representation of AI activity.

Persona preview

Scroll to load preview

Installation

React AI Message

Chat message bubbles

React AI Speech Input

Voice recording button

React AI Voice Selector

TTS voice selection

React AI Transcription

Speech transcript display

React AI Audio Player

Audio playback controls

React AI Reasoning

Thinking process display

FAQ

React AI Panel

React AI panel component with card styling for ReactFlow canvas overlays and toolbars

React AI Plan

React AI plan component with collapsible card showing task planning with streaming shimmer effect