Components

Beautifully designed components built with Radix UI and Tailwind CSS.

If animations are not visible on Eleven Labs components, check that your system or browser has not enabled “reduce motion”.

Voice

Bar Visualizer

Animated frequency bars for voice assistant states (listening, speaking, etc.).

Conversation

Scrollable conversation container with stick-to-bottom and empty state.

Live Waveform

Real-time waveform visualization from microphone or audio stream.

Message

Chat message bubble with user/assistant variants and avatar.

Mic Selector

Dropdown to select microphone device with mute and live waveform.

Orb

3D orb visualization that reacts to agent state and volume.

Response

Streaming markdown response renderer for AI replies.

Shimmering Text

Text with a shimmer animation effect.

Speech Input

Microphone input with real-time transcription via ElevenLabs Scribe.

Transcript Viewer

Word-level transcript viewer synced with audio playback.

Voice Button

Button for voice recording with state (idle, recording, processing).

Voice Picker

Dropdown to select an ElevenLabs voice with preview.

Waveform

Static or scrolling waveform from numeric data.

Google UI

Google Meet Card

Glassmorphism card with one centered avatar, Google Meet style. Use the button to toggle the speaking state.

Forms

Checkbox

A control that allows the user to toggle between checked and not checked.

Input

Displays a form input field or a component that looks like an input field.

Select

Displays a list of options for the user to pick from—triggered by a button.

Slider

An input where the user selects a value from a given range.

Switch

A control that allows the user to toggle between checked and not checked.

Textarea

Displays a form textarea field or a component that looks like a textarea field.

Radio Group

A set of checkable buttons—known as radio buttons—where no more than one button can be checked at a time.

Input OTP

A specialized input for one-time passwords.

Data display

Button

Displays a button or a component that looks like a button.

Card

Displays a card with header, content, and footer.

Accordion

A vertically stacked set of interactive headings that each reveal an associated section of content.

Badge

Displays a badge or a component that looks like a badge.

Avatar

An image element with a fallback for representing the user.

Pagination

Pagination with previous and next buttons.

Calendar

A date picker component that allows users to select a date from a calendar.

Table

A responsive table component.

Command

A fast, composable, unstyled command menu for React.

Toggle

A two-state button that can be either on or off.

Toggle Group

A set of two-state buttons that can be toggled on or off.

Layout

Resizable

Accessible resizable panel groups and handles with keyboard support.

Overlay

Alert Dialog

A modal dialog that interrupts the user with important content and expects a response.

Dialog

A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.

Popover

Displays rich content in a portal, triggered by a button.

Sheet

An extended version of a dialog component that is used to display content that is not as critical to the task flow, or to provide more options or data for the user.

Tooltip

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

Hover Card

For sighted users to preview content available behind a link.

Context Menu

Displays a menu to the user — such as a set of actions or functions — triggered by a right-click.

Feedback

Alert

Displays a callout for user attention.

Skeleton

Use to show a placeholder while content is loading.

Progress

Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.