SLARIVO / AI CHATS

AI Chats Components

Browse 233 exact locally owned demos. Filter the collection, inspect a focused preview, and unlock its implementation prompt.

• Slarivo AI Input

  AI Chats component from the 21st.dev community.

• Slarivo AI Chat

  ai chat card animated

• Slarivo IA Siri Chat

  Voice Chat IA siri

• Slarivo AI Assistant Interface

  An AI chat interface, with input, file uploads, suggestions and an animated logo

• Slarivo AI Chat Input

  Animated and interactive AI chat input component.

• Slarivo AI Input

  AI Input popover

• Slarivo AI Chat Input

  Open ended prompt inputs that can be used in AI conversations and other natural language prompting

• Slarivo AI Chat Image Generation

  Simulates an AI Chat generating and image

• Slarivo AI Suggested Actions

  Responsive grid of suggestion buttons that display quick chat prompts users can click to start or steer a conversation.

• Slarivo AI Chat Input Block

  A block for AI product for prompting and tool usage.

• Slarivo v0 AI Chat

  Design of the v0 AI Chat

• Slarivo Chatgpt Prompt Input

  This is a complete replica of the chatgpt prompt input some may call it chat input or prompt box or promptbox

• Slarivo AI Input

  A modern, animated textarea input component designed for AI chat interfaces. It features auto-resizing, a voice input toggle, and an animated submit button. Features: • Auto-resizing textarea • Voice input toggle • Animated submit button • Press Enter to submit (Shift+Enter for a new line) • Dark mode support • Customizable height limits • Smooth animations • Mobile responsiveness

• Slarivo AI Input With Search

  A modern chat input component with a web search toggle and file upload functionality. This component features an animated search toggle, file attachment support, and smooth transitions. Features: • Animated search toggle button • File upload support • Auto-resizing textarea • Dark mode compatibility • Keyboard shortcuts • Framer Motion animations for enhanced user experience • Mobile responsiveness

• Slarivo Animated AI Input

  AI input with animated model switching.

• Slarivo Message loading

  Message Loading animation

• Slarivo Claude Style AI Input

  Claude style dynamic chat input that adapts its preview based on content type - showing code snippets for programming files, content previews for documents, and traditional previews for media.

• Slarivo AI Input With Loading

  A chat input component with a loading state animation featuring an auto-resizing textarea, loading spinner, and status message. Features: • Loading state animation • Auto-resizing textarea • Customizable loading durations • Dark mode support • Status messages • Keyboard shortcuts • Auto-animation mode • Mobile responsiveness

• Slarivo Chat Input

  AI Chat Input

• Slarivo Chat Bubble

  The ChatBubble component chat-bubble.tsx is the main component in this library. It is used to display a chat bubble along with its message, avatar and other content. Wrap the ChatBubble component with ChatMessageList to properly show the chat bubbles.

• Slarivo Ruixen Moon Chat

  This RuixenMoonChat component is a visually minimalistic AI chat-style interface designed to sit just below the center of the screen against a full-screen moon-themed background image. The interface is inspired by the first empty-chat look of modern AI tools like ChatGPT, keeping the design lightweight, monochromatic (black, white, and neutral grays), and distraction-free. At the top center, there’s a bold white heading with a short tagline encouraging users to start typing. The main chat input box appears closer to the lower half of the screen and includes an auto-resizing textarea for smooth typing without manual resizing. A row of Quick Action buttons below the input provides ready-to-use prompts such as Generate Code, Launch App, UI Components, and more—ideal for developers exploring new ideas quickly. These buttons are styled as rounded, subtle pills with borders and icons from Lucide to keep the experience consistent and professional. The design avoids scroll bars and dark/light theme toggles, offering a clean black-and-white look that emphasizes the background image and central chat input. Overall, this component works well as a starting point for an AI-powered coding assistant or creative brainstorming tool.

• Slarivo Features

  Here is Features Component

• Slarivo Claude-style Chat Input

  A replica of the Claude AI chat interface featuring a polished, auto-resizing text input, file attachment previews, and quick action chips. Includes smooth animations, dark mode support, and a refined "swoosh" underline aesthetic.

• Slarivo Response Stream

  A component for displaying text with streaming animations, perfect for chat interfaces, AI responses, or any text that should appear progressively.

• Slarivo Hero 1

  Hero component for AI chat websites.

• Slarivo AI Input with Suggestions

  A sophisticated text input component with selectable action buttons. It features an auto-resizing textarea, customizable actions, and visual feedback. Features: • Customizable action buttons • Auto-resizing textarea • Visual feedback for selected actions • Dark mode support • Keyboard shortcuts • Animated transitions • Mobile responsiveness

• Slarivo AI Input With File

  An enhanced chat input component with file upload capabilities. It features an auto-resizing textarea, file attachment preview, and submit button. Features: • File upload with preview • Auto-resizing textarea • File type restrictions • File size limits • Dark mode support • Mobile responsiveness • Keyboard shortcuts • Animated UI elements

• Slarivo Bolt Style Chat

  A Bolt inspired hero chat interface with a prompt input, model selector, glowing ray background, and modern dark UI for AI product landing pages.

• Slarivo AI Assistant Card

  A clean, task-focused AI assistant panel, welcoming, structured, and equipped with quick actions, input, and model controls for seamless interaction.

• Slarivo AI Thinking Block

  A thinking block component that simulates AI processing/thinking time before responding.

• Slarivo Prompt Input dynamic grow

  A prompt input that grow on click, with subtle glow, and a onFocus on click ripple effect. shrink when not anymore inFocus

• Slarivo Prompt Suggestion

  A component for implementing interactive prompt suggestions in AI interfaces. The PromptSuggestion component offers two distinct modes: Normal Mode: Renders clickable, pill-shaped buttons ideal for suggesting quick prompts in chat interfaces Highlight Mode: Provides text highlighting to highlight a part of the suggestion

• Slarivo Ai Assistant

  The AI Message Bar is an interactive chat interface with a modern design featuring a sleek gradient background. It allows users to communicate with an AI assistant through a message input field, displaying both user messages and AI responses in a conversational format. The component includes visual indicators when the AI is "typing," animations for message appearance, and the ability to clear chat history, all within a responsive design that adapts to different screen sizes.

• Slarivo Message

  Here is Message component

• Slarivo Audio Chat

  Polished voice chat component with smooth expand/collapse animations.

• Slarivo Floating Chat Widget

  Floating chat widget with AI agent selection dropdown and animations

• Slarivo Ai Models Preview

  Ai Models Preview with dialog details smooth sleek animation designed block with props

• Slarivo Advanced Ai Chat Input

  Advanced Chat Input A sophisticated chat input component that supports file attachments, custom action icons, and an animated send button. It automatically resizes based on content.

• Slarivo Conversation

  Here is Conversation component

• Slarivo Ruixen Query Box

  RuixenQueryBox is a modern, interactive chat input component designed for AI-powered interfaces. It features an auto-resizing textarea that expands smoothly as the user types, along with quick access buttons for voice input, sending messages, and uploading files via a popover—similar to GPT-style chat interfaces. The component has a clean white design with a visually appealing gradient background, providing a polished, user-friendly experience for submitting queries and interacting with AI assistants.

• Slarivo Chat Suggestions

  A composable set of components for displaying chat prompt suggestions as clickable buttons, ideal for onboarding or empty chat states.

• Slarivo AI Prompt Box

  An animated AI prompt input with expanding textarea, keyboard shortcuts, model selector, and file attachments.

• Slarivo Agent Chat

  Drop-in chat shell composing a scrollable message list with an input composer at the bottom. Supports user/assistant text bubbles, error states, attachment chips, and a centered empty state. Self-contained port from 21st.dev Agent Elements.

• Slarivo Agent Chat

  Drop-in chat shell composing a scrollable message list with an input composer at the bottom. Supports user/assistant text bubbles, error states, attachment chips, and a centered empty state. Self-contained port from 21st.dev Agent Elements.

• Slarivo Agent Chat

  Drop-in chat shell composing a scrollable message list with an input composer at the bottom. Supports user/assistant text bubbles, error states, attachment chips, and a centered empty state. Self-contained port from 21st.dev Agent Elements.

• Slarivo Flux Card Hero

  FluxCardHero is a dynamic, interactive hero section component that showcases multiple AI platform features through an innovative layered card animation system. The component features a floating glass-morphism navigation bar and automatically cycles through different AI interface mockups including chat conversations, performance analytics, project management, and chat history. Key Features: Floating Navigation: Translucent white navbar with backdrop blur effect, centered and elevated Animated Card Stack: Multi-layered cards with staggered rotations and smooth color transitions Content Morphing: Each card displays different AI platform interfaces (chat, analytics, projects, history) Micro-interactions: Hover effects, scaling animations, and smooth transitions throughout Responsive Design: Adapts seamlessly across desktop and mobile viewports Auto-cycling: Cards automatically transition every 3 seconds with manual navigation dots Glass-morphism UI: Semi-transparent overlays with backdrop blur for modern aesthetics Perfect for AI/SaaS landing pages that want to demonstrate platform versatility while maintaining visual engagement through continuous, subtle animations.

• Slarivo File Upload and Chat

  A reusable and responsive file upload and chat component

• Slarivo Reasoning

  A collapsible component for showing AI reasoning, explanations, or logic. You can control it manually or let it auto-close when the stream ends. Markdown is supported.

• Slarivo Ruixen Prompt Box

  RuixenPromptBox is a sleek and modern AI-powered text input component designed to enhance user messages effortlessly. It allows users to write or paste text and apply intelligent transformations such as summarization, grammar correction, or compression with a single click. The component features an auto-resizing textarea, ensuring a comfortable typing experience, while the clean black background and white text provide excellent readability. Transform options are displayed as interactive buttons, allowing users to select and visualize the applied transformation instantly. With a convenient send button and smooth interaction, RuixenChatRefiner is perfect for building AI chat interfaces, content refinement tools, or any application where polished text output is essential.

• Slarivo Ai chat input

  A modular, single-file React input bar designed for generative AI interfaces and agentic chat workloads, built on the shadcn/ui and Tailwind CSS architecture. Features dynamic spring-physics transitions (cubic-bezier engine) for height scaling, state-morphing typography, an integ

• Slarivo AI prompt Box

  AI prompt Box, AI chat Input, AI chat box, with search, with think, with thinking, with canvas, with audio recording

• Slarivo Animated AI Chat

  An AI chat interface with glass-morphism design and smart command features. Built with React and Framer Motion for smooth animations and professional interactions.

• Slarivo Hero

  A hero section component with animated gradient background and customizable content. Features - Animated gradient background - Customizable title and subtitle - Configurable action buttons - Responsive design - Motion animations - Optional blur effect

• Slarivo Interactive Image Accordion

  Interactive Image Accordion

• Slarivo AI Loader

  ai loader background and animation

• Slarivo ai loader

  A smooth, animated circular loader that gives the impression of thought, processing, or idea formation — like an AI "thinking" or "creating" something in real time.

• Slarivo Shining Text

  Animate text with a shining effect.

• Slarivo Features

  Here is Features Component

• Slarivo Features

  Here is Features Component

• Slarivo Features

  Here is Features Component

• Slarivo Features

  Here is Features Component

• Slarivo Features

  Here is Features Component

• Slarivo Features

  Here is Features Component

• Slarivo Features

  Here is Features Component

• Slarivo Myna Hero

  Animated hero and navbar

• Slarivo CTA with Marquee

  Here is CTA with Marquee component

• Slarivo Sticky scroll cards section

  Sticky scroll cards section – React + Tailwind + Framer Motion

• Slarivo Feature Block Animated Card

  Feature Block Animated Card with logos

• Slarivo AI Gen

  AI Image Gen

• Slarivo AI Image Generator Hero

  Images component from the 21st.dev community.

• Slarivo Animated Generate Button (shadcn + Tailwind)

  A reusable, accessible React button that mirrors the Uiverse “dexter-st” glow/flicker animation using Tailwind utilities and scoped CSS. It integrates with shadcn theme tokens, supports idle/active labels, a controllable generating state, and a customizable highlight hue for easy theming.

• Slarivo Button

  Here is magic button component

• Slarivo GPT-Vis

  A React chart component that renders AI/LLM-generated data visualizations from vis-syntax strings or config objects, supporting 26 chart types via @antv/gpt-vis.

• Slarivo Content Default

  Here is Content component

• Slarivo Call to Action

  Here is Call to Action components

• Slarivo Hero

  animated hero

• Slarivo AI Actions

  A group of interactive buttons with optional tooltips, commonly used for message-level interactions like copy, like, share, etc.

• Slarivo Canvas Effect

  Canvas Effect Chat Box

• Slarivo Modern Hero Section

  Modern hero section featuring bold headline typography, AI-focused subtext, and a collage of rounded-corner images arranged in an overlapping, floating layout to create depth and visual engagement.

• Slarivo Bot Detection

  Here is Bot Detection component

• Slarivo Orb

  Here is Orb component

• Slarivo A modern Hero Section

  A modern hero section for your AI Platform

• Slarivo Bento Grid

  All-in-one tools for automation, content management, scheduling, and AI-powered efficiency.

• Slarivo Hero Section 06

  This HeroSection_06 component is a highly interactive and visually dynamic landing section built with Next.js, Tailwind CSS, and custom animations. It combines eye-catching elements like animated orbiting circles, glowing gradients, and animated badges to draw the user’s attention immediately upon landing. The section highlights a compelling headline and subtext, promoting AI-powered growth tools,

• Slarivo Modern Hero section

  MinimalHeroSection – Interactive AI-Powered Hero Banner A visually rich and interactive hero section built with React and Tailwind CSS, featuring an SVG-based animated background that subtly responds to mouse movement. Dynamic SVG Grid – Renders a responsive grid with hover effects and highlighted tiles for visual depth. Mouse-Follow Glow Effect – Creates a radial gradient glow that follows the user’s cursor in real time. Responsive Layout – Fully adaptable to screen sizes with well-spaced typography and content hierarchy. Call-to-Action Focused – Includes a prominent “Get Started Free” button with hover animations to increase engagement. Trust Indicators – Displays key stats (Developer count, Uptime, Enterprise readiness) to build credibility. This component is ideal for modern SaaS or AI startup landing pages, providing a high-quality, interactive first impression while maintaining performance and accessibility.

• Slarivo AI Planning

  AI Planning Workflow

• Slarivo Terminal Control Section Animated

  Terminal Control Section Animated. Responsive, accessible UI with animated tabs and a code-diff preview powered by Framer Motion.

• Slarivo Glowing Input

  Glowing Input

• Slarivo JSX Preview

  A component for rendering JSX strings as React components, with support for streaming content and automatic tag completion.

• Slarivo Banner Ui

  Here is Banner ui component

• Slarivo Content Block

  Here is Content Block component

• Slarivo Content Block

  Here is Content Block component

• Slarivo Response

  Here is Response component

• Slarivo Navbar Section 2

  A dark navigation bar with an animated expanding mega-menu dropdown and a light hero section, inspired by the xAI marketing layout.

• Slarivo neurons hero

  It features an interactive visualization of a neural network. As you move your mouse, the neurons near your cursor "fire," sending pulses of light along their connections, creating a beautiful and complex ripple effect through the network.

• Slarivo Job Slider

  The JobSlider component is a modern, responsive carousel designed to showcase trending AI and Computer Vision job roles in an interactive and visually appealing way. Built with Next.js, Shadcn UI, and Tailwind CSS, it adapts seamlessly to both light and dark themes, ensuring a consistent user experience across devices and preferences. The component displays a two-column grid of job cards inside a smooth sliding panel, with intuitive navigation arrows for exploring multiple slides. Each card highlights the role name and the number of available jobs, making it ideal for career portals, hiring platforms, or AI-focused job boards. With its minimal code, smooth transitions, and theme-aware design, the JobSlider enhances both usability and aesthetics for modern web applications.

• Slarivo Model Selector

  Here is Model Selector Component

• Slarivo Smart Textbox

  Rich text input with @mentions and AI autocomplete. Inline tag chips, ghost text suggestions. Keyboard-first, fully customizable.

• Slarivo Text Generate Effect

  Animated text that fades and blurs in word by word, as if being generated by AI.

• Slarivo Shimmer Text

  Texts component from the 21st.dev community.

• Slarivo Inline Citation

  Here is Inline Citation component

• Slarivo MCP Tool

  Render an MCP tool call with verb-conjugated label, sorted argument subtitle, and an optional collapsible JSON output panel. State-driven (completed / pending / interrupted). Self-contained port from 21st.dev Agent Elements.

• Slarivo Question Tool

  Clarifying-question form for agents. Single / multi / text answer kinds with optional custom input. Self-contained port from 21st.dev Agent Elements.

• Slarivo Question Tool

  Clarifying-question form for agents. Single / multi / text answer kinds with optional custom input. Self-contained port from 21st.dev Agent Elements.

• Slarivo Hero AI Value Proposition

  A hero section that presents an AI product's value proposition with an animated headline, CTA, social proof avatars, and a dashboard mockup preview.

• Slarivo Sources

  Here is Sources component

• Slarivo AI Suggestions

  A horizontally scrollable row of AI prompt suggestion chips that animate in and out, for chat and prompt input interfaces.

• Slarivo Video Generator Card

  This file contains the reusable VideoGeneratorCard component. It's built with shadcn/ui primitives and is fully typed with TypeScript. Props like storyboardImages, initialPrompt, onGenerate, and isLoading make it flexible for various use cases.

• Slarivo Feature Hero

  A centered hero section with heading, subtext, and a grid of icon-based feature cards highlighting product capabilities.

• Slarivo Message Draft

  A review card that shows a drafted email or Slack message with Send/Cancel actions and an undo grace period before it sends.

• Slarivo Chat Tool

  A chat component that displays an AI tool call, its input and output, inside a collapsible accordion.

• Slarivo Tool Calls Section

  An expandable section that shows AI agent tool usage as a collapsible timeline with stacked category icons and per-call inputs and outputs.

• Slarivo Mode Selector

  Standalone mode selector pill button with built-in popover. Bring your own icons or omit them; renders a non-interactive label when given a single mode. Self-contained port from 21st.dev Agent Elements.

• Slarivo Border Beam

  Animated border beam effect for React. Wraps any element with a traveling, hue-shifting glow around its border. This demo shows an AI chat/prompt composer with the medium full-border beam.

• Slarivo Modal Card

  modern modal card

• Slarivo AI Streaming Text

  Animated text that streams in character-by-character or word-by-word with a blinking cursor, simulating an AI typewriter response.

• Slarivo Auth Section 2

  A split-screen sign-up page with an animated AI-image showcase panel and a social + email registration form.

• Slarivo Prompt Composer

  A production-grade prompt input: typed variable chips, attachment queue with upload states, template menu, model picker and a live token budget that warns before you overflow.

• Slarivo FoxifyHero

  A responsive, animated hero component with glassmorphic header, floating blurred gradient backgrounds, badge support, configurable navigation and auth buttons, gradient-styled title, description, and primary/secondary CTA buttons.

• Slarivo Agent Dock

  A compact control surface for switching between voice, chat, and lightweight agent states without pulling focus from the current screen. The dark dock shows an agent avatar, name, and an animated status line, with Voice and Chat actions (keyboard hints). Clicking Chat expands an inline composer that springs open; submitting a message flips the status to a working state. Built with motion/react, it animates height and status crossfades and respects reduced-motion preferences.

• Slarivo AI Latency Meter

  Response time visualization for AI requests showing TTFB and total duration with color-coded performance indicators, an animated progress bar, and compact or expanded variants.

• Slarivo Streaming Text

  A token-by-token streaming text effect with a blinking caret, skip and replay controls, and reduced-motion support for AI chat responses.

• Slarivo Error Message

  Compact red-tinted error card with optional title and message body. Self-contained port from 21st.dev Agent Elements.

• Slarivo Error Message

  Compact red-tinted error card with optional title and message body. Self-contained port from 21st.dev Agent Elements.

• Slarivo AI Error Handler

  An alert component that displays AI or API error messages with optional retry and dismiss actions.

• Slarivo Integrations Component

  Here is Integrations Components

• Slarivo Promt Input with Actions

  Here is Promt Input with Actions component

• Slarivo MCP Tool

  Render an MCP tool call with verb-conjugated label, sorted argument subtitle, and an optional collapsible JSON output panel. State-driven (completed / pending / interrupted). Self-contained port from 21st.dev Agent Elements.

• Slarivo MCP Tool

  Render an MCP tool call with verb-conjugated label, sorted argument subtitle, and an optional collapsible JSON output panel. State-driven (completed / pending / interrupted). Self-contained port from 21st.dev Agent Elements.

• Slarivo Tool Invocation

  A composable card that displays an AI tool call with state icons (loading, success, error) and collapsible tool details showing arguments and results.

• Slarivo Liquid Metal

  Animated liquid-metal border effect (metal-fx). Wrap any element — a button, link, or icon — with a live metallic ring driven by a shared WebGL renderer. Three presets (chromatic, silver, gold), button and circle variants, adjustable strength, glow and proximity reflections, theme-aware (auto/dark/light).

• Slarivo Liquid Metal

  Animated liquid-metal border effect (metal-fx). Wrap any element — a button, link, or icon — with a live metallic ring driven by a shared WebGL renderer. Three presets (chromatic, silver, gold), button and circle variants, adjustable strength, glow and proximity reflections, theme-aware (auto/dark/light).

• Slarivo Liquid Metal

  Animated liquid-metal border effect (metal-fx). Wrap any element — a button, link, or icon — with a live metallic ring driven by a shared WebGL renderer. Three presets (chromatic, silver, gold), button and circle variants, adjustable strength, glow and proximity reflections, theme-aware (auto/dark/light).

• Slarivo Generic Tool

  Render a simple tool row for custom tools. Provide title/subtitle and toggle the shimmer with isPending. Optional left icon. Self-contained port from 21st.dev Agent Elements.

• Slarivo Generic Tool

  Render a simple tool row for custom tools. Provide title/subtitle and toggle the shimmer with isPending. Optional left icon. Self-contained port from 21st.dev Agent Elements.

• Slarivo Generic Tool

  Render a simple tool row for custom tools. Provide title/subtitle and toggle the shimmer with isPending. Optional left icon. Self-contained port from 21st.dev Agent Elements.

• Slarivo Subagent Tool

  Render a subagent task row with elapsed time and the last nested tool while running. State-driven (completed / pending / interrupted). Self-contained port from 21st.dev Agent Elements.

• Slarivo Task

  Here is Task component

• Slarivo Send Button

  Round send/stop button for AI chat input — idle, typing, streaming states. Self-contained port from 21st.dev Agent Elements.

• Slarivo Send Button

  Round send/stop button for AI chat input — idle, typing, streaming states. Self-contained port from 21st.dev Agent Elements.

• Slarivo Thinking Tool

  Render assistant reasoning in a collapsible row. State-driven (thinking shimmer / thought static). Self-contained port from 21st.dev Agent Elements with React-only collapsible (no @base-ui/react) and inline shimmer keyframes.

• Slarivo Thinking Tool

  Render assistant reasoning in a collapsible row. State-driven (thinking shimmer / thought static). Self-contained port from 21st.dev Agent Elements with React-only collapsible (no @base-ui/react) and inline shimmer keyframes.

• Slarivo Plan Tool

  Display a plan title and summary with expand/collapse and an Approve action. State-driven (idle / pending). Self-contained port from 21st.dev Agent Elements without the Markdown dep — summary renders as plain prose.

• Slarivo Plan Tool

  Display a plan title and summary with expand/collapse and an Approve action. State-driven (idle / pending). Self-contained port from 21st.dev Agent Elements without the Markdown dep — summary renders as plain prose.

• Slarivo AI Thinking

  An animated AI reasoning panel that auto-scrolls a streaming chain-of-thought with an elapsed timer and fading edges.

• Slarivo Chat Reasoning

  A collapsible reasoning panel for AI chat that shows a model's step-by-step thinking and tool calls, ready for the Vercel AI SDK useChat().

• Slarivo Input Bar

  Chat composer with auto-resizing textarea, attachment chips for staged images/files, send/stop button, and slot-based left/right toolbar actions for mode pickers, model selectors, etc. Self-contained port from 21st.dev Agent Elements.

• Slarivo Input Bar

  Chat composer with auto-resizing textarea, attachment chips for staged images/files, send/stop button, and slot-based left/right toolbar actions for mode pickers, model selectors, etc. Self-contained port from 21st.dev Agent Elements.

• Slarivo Suggestion

  Here is Suggestion component

• Slarivo Search Tool

  Render grouped search results as a collapsible tool card. State-driven (searching shimmer / done static). Provide a query and an optional results array. Self-contained port from 21st.dev Agent Elements.

• Slarivo Search Tool

  Render grouped search results as a collapsible tool card. State-driven (searching shimmer / done static). Provide a query and an optional results array. Self-contained port from 21st.dev Agent Elements.

• Slarivo Search Tool

  Render grouped search results as a collapsible tool card. State-driven (searching shimmer / done static). Provide a query and an optional results array. Self-contained port from 21st.dev Agent Elements.

• Slarivo Siri Orb

  Siri-style animated audio visualizer orb with conic gradients, smooth rotation, and customizable colors. Pure CSS animation, respects prefers-reduced-motion.

• Slarivo Model Picker

  Standalone model picker pill button with built-in popover. Renders model name + version split (e.g. Sonnet 4.6). Supports controlled and uncontrolled modes. Self-contained port from 21st.dev Agent Elements.

• Slarivo Model Picker

  Standalone model picker pill button with built-in popover. Renders model name + version split (e.g. Sonnet 4.6). Supports controlled and uncontrolled modes. Self-contained port from 21st.dev Agent Elements.

• Slarivo clipped-video-tab

  A cinematic clipped video section built with React, TailwindCSS, and Framer Motion for modern UI experiences.

• Slarivo Model Selector Prompt

  A benchmark-informed prompt composer with an advanced LLM model selector for comparing frontier models across capability, speed, context, and cost. The model dropdown is searchable; hovering a model opens a preview card with animated metric bars (intelligence, speed, context, cost) and inline reasoning/speed configuration that adjusts the metrics live. Includes provider marks, per-model configuration badges, a scroll-faded list, and a Send action. Built on Base UI Combobox + Preview Card.

• Slarivo Chat Messages

  Animated chat conversation with sequential message bubbles, typing indicators, and optional interactive input for AI and chatbot demos.

• Slarivo AI Agent Pipeline

  An animated visualization of an AI agent pipeline — shows a request flowing from trigger through vector search into an LLM agent, then fanning out into parallel tool calls (email, CRM, report generation), with live stats and a scrolling execution log.

• Slarivo Suggestions

  Quick prompt chips for AI chat input — text-only or with icons. Self-contained port from 21st.dev Agent Elements.

• Slarivo Suggestions

  Quick prompt chips for AI chat input — text-only or with icons. Self-contained port from 21st.dev Agent Elements.

• Slarivo User Message

  Right-aligned user chat bubble. Renders text, image previews, and non-image file attachments from a UIMessage payload. Self-contained port from 21st.dev Agent Elements.

• Slarivo User Message

  Right-aligned user chat bubble. Renders text, image previews, and non-image file attachments from a UIMessage payload. Self-contained port from 21st.dev Agent Elements.

• Slarivo Todo Tool

  Render task list with status icons (pending / in_progress / completed) and an optional shimmer 'Updating to-dos...' streaming state. Self-contained port from 21st.dev Agent Elements with inline SVG icons + shimmer keyframes.

• Slarivo Edit Tool

  Render a file edit/write tool call as a diff card with header, +/- line stats, line-level diff body, and an optional Apply/Skip approval footer. State-driven (completed / pending / waiting). Self-contained port from 21st.dev Agent Elements.

• Slarivo AI Routing Indicator

  A multi-agent routing visualizer that highlights matched patterns in the input, shows the target agent with a confidence score, and animates an active routing state.

• Slarivo Thinking Orbs

  Animated thinking/agent orb — six hand-tuned canvas states (working, searching, solving, listening, composing, shaping) in two tuned size presets (64px avatar / 20px inline). Theme-aware (auto/dark/light), SSR-safe, with speed and paused controls. Great for AI chat avatars and inline agent status indicators.

• Slarivo Thinking Orbs

  Animated thinking/agent orb — six hand-tuned canvas states (working, searching, solving, listening, composing, shaping) in two tuned size presets (64px avatar / 20px inline). Theme-aware (auto/dark/light), SSR-safe, with speed and paused controls. Great for AI chat avatars and inline agent status indicators.

• Slarivo Thinking Orbs

  Animated thinking/agent orb — six hand-tuned canvas states (working, searching, solving, listening, composing, shaping) in two tuned size presets (64px avatar / 20px inline). Theme-aware (auto/dark/light), SSR-safe, with speed and paused controls. Great for AI chat avatars and inline agent status indicators.

• Slarivo Thinking Orbs

  Animated thinking/agent orb — six hand-tuned canvas states (working, searching, solving, listening, composing, shaping) in two tuned size presets (64px avatar / 20px inline). Theme-aware (auto/dark/light), SSR-safe, with speed and paused controls. Great for AI chat avatars and inline agent status indicators.

• Slarivo Thinking Orbs

  Animated thinking/agent orb — six hand-tuned canvas states (working, searching, solving, listening, composing, shaping) in two tuned size presets (64px avatar / 20px inline). Theme-aware (auto/dark/light), SSR-safe, with speed and paused controls. Great for AI chat avatars and inline agent status indicators.

• Slarivo Thinking Orbs

  Animated thinking/agent orb — six hand-tuned canvas states (working, searching, solving, listening, composing, shaping) in two tuned size presets (64px avatar / 20px inline). Theme-aware (auto/dark/light), SSR-safe, with speed and paused controls. Great for AI chat avatars and inline agent status indicators.

• Slarivo Tool Group

  Collapsible header summarizing nested tool calls (files / searches / commands). State-driven (completed / pending streaming / interrupted) with shimmer label and elapsed time. Self-contained port from 21st.dev Agent Elements.

• Slarivo Tool Group

  Collapsible header summarizing nested tool calls (files / searches / commands). State-driven (completed / pending streaming / interrupted) with shimmer label and elapsed time. Self-contained port from 21st.dev Agent Elements.

• Slarivo Tool Group

  Collapsible header summarizing nested tool calls (files / searches / commands). State-driven (completed / pending streaming / interrupted) with shimmer label and elapsed time. Self-contained port from 21st.dev Agent Elements.

• Slarivo AI Loading State

  An animated AI loading state that cycles through task statuses with scrolling terminal-style log lines and a colorful circular progress spinner.

• Slarivo Forge AI Command Bar

  A glassmorphic command input bar for AI copilots with an animated motion layout container.

• Slarivo AI Chain of Thought

  Collapsible component that visualizes AI reasoning as step-by-step thinking with status indicators, search results, and images.

• Slarivo Ask Nexus Input

  An AI-style ask input with a rotating placeholder and a canvas particle disintegration animation that dissolves the query text on submit.

• Slarivo AI Message Bubble

  Chat message bubble with user and assistant roles, provider avatars, timestamps, streaming cursor, and copy-on-hover.

• Slarivo AI Conversation Tree

  A compound component that visualizes branching AI conversations as an expandable tree with node type indicators, active path highlighting, and click-to-navigate selection.

• Slarivo AI Prompt Diff

  Compound component that compares two system prompts with unified or side-by-side diff views, added/removed line highlighting, line numbers, and copy buttons.

• Slarivo AI Tool Call

  Compound component for displaying AI tool and function invocations with status badges, JSON input/output, and a collapsible interface for MCP and function-calling workflows.

• Slarivo Subagent Tool

  Render a subagent task row with elapsed time and the last nested tool while running. State-driven (completed / pending / interrupted). Self-contained port from 21st.dev Agent Elements.

• Slarivo Todo Tool

  Render task list with status icons (pending / in_progress / completed) and an optional shimmer 'Updating to-dos...' streaming state. Self-contained port from 21st.dev Agent Elements with inline SVG icons + shimmer keyframes.

• Slarivo Edit Tool

  Render a file edit/write tool call as a diff card with header, +/- line stats, line-level diff body, and an optional Apply/Skip approval footer. State-driven (completed / pending / waiting). Self-contained port from 21st.dev Agent Elements.

• Slarivo Bash Tool

  Render a command tool card. State-driven (idle / running) with optional output and an approval footer (Skip / Run). Self-contained port from 21st.dev Agent Elements with inline shimmer + dot keyframes.

• Slarivo AI Model Select

  Cursor-style AI model picker with Effort, Context, Fast and Thinking controls plus a hover Edit flyout.

• Slarivo AI Message

  Chat message row for user and assistant turns, with copy, retry and vote actions that reveal on hover instead of crowding the bubble. Respects prefers-reduced-motion.

• Slarivo AI Suggestions

  Follow-up suggestion chips that stagger in after a reply and clear themselves once one is chosen. Respects prefers-reduced-motion.

• Slarivo AI Diff

  Proposed code edit where added lines wipe in from the left and rejected lines collapse to nothing, with accept and reject actions. Respects prefers-reduced-motion.

• Slarivo AI Context Meter

  Context window meter whose ring fills and shifts hue at the warning threshold, never changing size. Hover for a token breakdown. Respects prefers-reduced-motion.

• Slarivo AI Artifact

  Generated-artifact frame whose preview and code panes swap along a shared axis rather than cross-fading, with copy built in. Respects prefers-reduced-motion.

• Slarivo Agent Avatar

  Canvas-based generative pixel avatar for AI agents, deterministic per seed and gently breathing while the agent works. Respects prefers-reduced-motion.

• Slarivo AI Tool Call

  Agent tool-call card that stays collapsed while running and expands to its arguments and result, with success, running and error states. Respects prefers-reduced-motion.

• Slarivo AI Reasoning

  Collapsible model-reasoning trace that times itself while streaming and folds away once the answer lands. Respects prefers-reduced-motion.

• Slarivo AI Citation

  Inline citation pill that opens an origin-aware source card anchored to the pill you clicked, instead of a floating popover. Respects prefers-reduced-motion.

• Slarivo AI Approval

  Human-in-the-loop approval card where the chosen option expands to fill the card while the alternatives collapse away. Respects prefers-reduced-motion.

• Slarivo AI Task List

  Agent plan checklist with nested subtasks and pending, running, done and failed states, each transitioning in place. Respects prefers-reduced-motion.

• Slarivo AI Loader

  Working indicator in dots, bar and grid variants with an optional elapsed timer, tuned so it reads as progress rather than noise. Respects prefers-reduced-motion.

• Slarivo AI Sources

  Collapsible source list for a grounded answer, with per-source snippets that expand in place rather than opening a dialog. Respects prefers-reduced-motion.

• Slarivo AI Response

  Streaming answer body that reveals text as it arrives and anchors inline citation markers to their sources. Respects prefers-reduced-motion.

• Slarivo AI Prompt Input

  Premium AI prompt composer with rotating placeholders, floating toolbar, and Cursor-style model selector.

• Slarivo Loading State

  A compact pixel-grid loader with an animated wavefront, a shimmering status label, and a live elapsed timer for long-running or agent tasks.

• Slarivo Thinking

  An expandable AI agent thinking trace that streams steps, reasoning, web-search results, or tool calls with a shimmering label and collapsible timeline.

• Slarivo Agent Wave Loader

  A loading indicator for AI agent work — a signal arcs across Claude Code, Codex, Gemini, DeepSeek and Kimi marks, lifting each as it passes. Respects prefers-reduced-motion.

• Slarivo Image Generation

  An animated "generating image" placeholder that shows a shimmering label, a morphing glow inside a canvas, a prompt caption and a resolution badge while an AI image is being created.

• Slarivo Streaming Text

  Streamed AI answer that reveals word by word with inline source citations, expandable sources, action buttons, and follow-up prompts.

• Slarivo Subagent Tool

  Render a subagent task row with elapsed time and the last nested tool while running. State-driven (completed / pending / interrupted). Self-contained port from 21st.dev Agent Elements.

• Slarivo Plan Tool

  Display a plan title and summary with expand/collapse and an Approve action. State-driven (idle / pending). Self-contained port from 21st.dev Agent Elements without the Markdown dep — summary renders as plain prose.

• Slarivo Edit Tool

  Render a file edit/write tool call as a diff card with header, +/- line stats, line-level diff body, and an optional Apply/Skip approval footer. State-driven (completed / pending / waiting). Self-contained port from 21st.dev Agent Elements.

• Slarivo Edit Tool

  Render a file edit/write tool call as a diff card with header, +/- line stats, line-level diff body, and an optional Apply/Skip approval footer. State-driven (completed / pending / waiting). Self-contained port from 21st.dev Agent Elements.

• Slarivo Todo Tool

  Render task list with status icons (pending / in_progress / completed) and an optional shimmer 'Updating to-dos...' streaming state. Self-contained port from 21st.dev Agent Elements with inline SVG icons + shimmer keyframes.

• Slarivo AI Response Text Generate Card

  An AI assistant chat card that animates its response with a word-by-word text-generate effect and regenerates on demand.

• Slarivo Orbs Morph

  Compact animated morph activity indicators for showing agent status without blocking the thread.

• Slarivo Chat Panel

  Tabbed AI chat panel with animated reasoning replies and a message composer for agent interfaces.

• Slarivo Bash Tool

  Render a command tool card. State-driven (idle / running) with optional output and an approval footer (Skip / Run). Self-contained port from 21st.dev Agent Elements with inline shimmer + dot keyframes.

• Slarivo Bash Tool

  Render a command tool card. State-driven (idle / running) with optional output and an approval footer (Skip / Run). Self-contained port from 21st.dev Agent Elements with inline shimmer + dot keyframes.

• Slarivo Thinking Reasoning

  An animated, collapsible AI thinking block whose shimmering label expands to stream the agent's reasoning, then folds into a "Thought for Ns" summary.

• Slarivo AI Agent Response

  Interactive Claude & Cursor-style AI execution trace with nested reasoning, bash terminal outputs, and live Git diff inspect. (124 chars).

• Slarivo AI Response Writer

  An auto-scrolling text display that smoothly keeps the latest streamed AI response always visible as new text arrives.

• Slarivo Prompt Bar

  Barre de prompt avec contour metallique anime et menus interactifs.

• Slarivo Model Picker

  A Model Picker component for AI conversations, reasoning states, tool activity, and assistant workflows, featuring ai, chat, popover, select.

• Slarivo Ask AI

  A popover prompt launcher with an animated mascot trigger, one-click query links for major AI providers, and instant clipboard fallback.

• Slarivo Vibe-to-Prompt AI Input

  A fluid, glowing command interface designed to visually transform vague coding ideas into structured, production-ready prompts. Features a continuous conic-gradient border, physics-based state transitions, and an animated layout shift that snaps…

• Slarivo AI Reasoning Block

  A restrained collapsible thinking section for AI responses that automatically closes when the final answer begins streaming.

• Slarivo Streaming Chat Response

  A focused AI response component with character-by-character streaming, a live cursor, stop generation, and regenerate states.

• Slarivo Tool Call Inspector

  A compact agent tool-call row that expands into readable input and result panels, with running and completed states for AI product interfaces.

• Slarivo Agent Trace

  Waterfall timeline for AI agent runs with a replay scrubber: drag the playhead and spans fill, statuses flip from queued to running to done, token counts tick up. Nested sub-agents, retries, errors. No chart library, keyboard-accessible, theme tokens.

• Slarivo Tool Approval

  A human-in-the-loop permission card that shows an AI agent's requested tool call and lets a user allow once, always allow, or deny before it runs.

• Slarivo Suggestions

  A row of clickable prompt suggestion chips that let users pick a common query to fill an AI chat input, with optional variants, vertical layout, and an expandable panel of related suggestions.

• Slarivo Feedback Bar

  A compact inline bar for collecting thumbs-up/thumbs-down feedback on AI chat responses, with a dismiss button.

• Slarivo Thread

  A scrollable chat message container that automatically sticks to the bottom as new messages arrive and shows a jump-to-bottom button when the user scrolls up.