beUI Pro para móvil ya está disponible: 50 bloques y pantallas de React Native

Voice Agent

2 variantes

Flexible voice-agent layouts with liquid or halo orbs, animated session states, optional transcripts, and call controls.

Orb session

voice-agent-session.tsx

A centered voice session with liquid or halo orbs, adjustable size and speed, custom visualizer slots, and optional card or minimal surfaces.

Voice assistant

Start a conversation with your agent.

Interactive demo · No microphone access

TSXcomponents/previews/premium/voice-agent-session-preview.tsx

"use client";

import { useState } from "react";
import type { VoiceAgentOrbOptions } from "@/components/premium/voice-agent";
import { VoiceAgentSession } from "@/components/premium/voice-agent/voice-agent-session";
import { useVoiceAgentDemo } from "./use-voice-agent-demo";
import { VoiceAgentPreviewOptions } from "./voice-agent-preview-options";

export function VoiceAgentSessionPreview() {
  const demo = useVoiceAgentDemo();
  const [appearance, setAppearance] =
    useState<NonNullable<VoiceAgentOrbOptions["appearance"]>>("halo");
  return (
    <div className="flex w-full flex-col items-center gap-4 p-4">
      <VoiceAgentSession {...demo} orbOptions={{ appearance }} />
      <VoiceAgentPreviewOptions
        appearance={appearance}
        onAppearanceChange={setAppearance}
      />
      <p className="text-xs text-muted-foreground">
        Interactive demo · No microphone access
      </p>
    </div>
  );
}

Instalar

$ bunx --bun shadcn add @beui-pro/

Voice dock

voice-agent-dock.tsx

A compact voice dock that keeps its shape across call states. Customize its orb, surface, and optional transcript, then place it beside your workspace or in a floating wrapper.

Voice assistant

Interactive demo · No microphone access

TSXcomponents/previews/premium/voice-agent-dock-preview.tsx

"use client";

import { useState } from "react";
import type { VoiceAgentOrbOptions } from "@/components/premium/voice-agent";
import { VoiceAgentDock } from "@/components/premium/voice-agent/voice-agent-dock";
import { useVoiceAgentDemo } from "./use-voice-agent-demo";
import { VoiceAgentPreviewOptions } from "./voice-agent-preview-options";

export function VoiceAgentDockPreview() {
  const demo = useVoiceAgentDemo();
  const [appearance, setAppearance] =
    useState<NonNullable<VoiceAgentOrbOptions["appearance"]>>("liquid");
  return (
    <div className="flex min-h-72 w-full flex-col items-center justify-center gap-4 p-4">
      <VoiceAgentDock {...demo} orbOptions={{ appearance }} />
      <VoiceAgentPreviewOptions
        appearance={appearance}
        onAppearanceChange={setAppearance}
      />
      <p className="text-xs text-muted-foreground">
        Interactive demo · No microphone access
      </p>
    </div>
  );
}

Instalar

$ bunx --bun shadcn add @beui-pro/

Voice Agent

Orb session

Voice assistant

El código fuente está bloqueado

Instalar

Voice dock

Voice assistant

El código fuente está bloqueado

Instalar