Install a component, copy a working configuration and connect it to your application's state and design system.
Use Components to choose by purpose, or browse Examples to compare states and materials. Open a component or an example to try it live. Studio offers the same controls and generated code for all seven libraries.
| Goal | Component |
|---|---|
| Highlight an action, input or card | Border beam |
| Show searching, listening or composing | Thinking orbs |
| Add reflective actions, labels or badges | Metal |
| Animate menus, sliders and draggable items | Gooey |
| Visualize speech or audio activity | Voice |
| Reveal an image with an animated transition | Image |
| Express an assistant's state and personality | Bot avatars |
Each playground has a Use in your project section with an installation command for npm, pnpm or Bun. The command copies the component's complete editable source from the Liven UI registry into your project. It does not install the reference project's effect packages.
For example, open Thinking orbs, choose Install & Usage and copy the command for your package manager. The command uses this website's configured registry origin.
The installed entry is components/livenui/orbs.tsx, with the rendering engine and types alongside it. Imports in the examples use @/components/livenui; adjust that prefix to your project's configured component alias. Components require React 18 or newer. Image also installs Three.js. Metal uses a shader dependency listed in its registry payload. Licenses and notices are included with the downloaded source.
The installer handles copying files; the component source comes from Liven UI. You can inspect and change that source in your application without waiting for an upstream effect-package release.
Try a starting example on a component guide and adjust Quick settings. Open Studio to use all controls, choose a Starting point or edit JSON. In Studio, Code contains the source command and your configured React snippet; the preview stays visible while you copy. On guides, Your React code follows quick settings and Install & Usage contains installation steps. In a server-rendered application, place animated components inside a client component.
'use client'
import { ThinkingOrb } from '@/components/livenui/orbs'
export function WorkingIndicator() {
return (
<div role="status" aria-live="polite">
<ThinkingOrb state="working" size={64} />
<span>Working on your request…</span>
</div>
)
}Connect visual states to your application's actual state. The playground demonstrates the interaction; it does not run an agent or generate images. For example, use working while a request is in progress and use breathing when it finishes.
Retain semantic buttons, labels and loading text. Match the component's theme to your application. Keep decorative effects separate from the accessible status message. Use your existing color and spacing tokens for host content.
Honor reduced motion and pause animations that are not visible. Clean up rendering resources when components unmount. The preview starts paused when the browser requests reduced motion; its Play and Pause buttons let you compare both states.
For advanced configuration in Studio, open API reference in Customize. Use Edit JSON to edit structured props; functions, streams and element references belong in application code.
Open Presets beside Customize and Code, or choose Save preset in the Studio header to focus the name field. Presets stay in this browser. Open Import & export in Customize to export a JSON file or import a configuration. Copy prompt in Code includes installation instructions, your props and the API reference. Open in Studio on a component guide carries its current configuration and playback into Studio through the link.
For Voice, simulation works without microphone permission. Microphone access starts only after you choose it; processing stays local and tracks stop when the preview unmounts.
Download the integration reference for your coding agent. The documentation is also available through the LLM endpoints.