1 variant

Voice Input

Name: easeUI Pro
Price: 99.00 USD

A mic button that records from the real microphone, with bars that follow your voice and a timer, handing back the audio for speech to text.

Tap to dictate

Your recording plays back here. Nothing leaves your browser.

usage.tsx

import { VoiceInput } from "@/components/registry/voice-input";

export function Dictate() {
  return (
    <VoiceInput
      onRecorded={async (audio) => {
        const text = await transcribe(audio);
        setPrompt(text);
      }}
    />
  );
}

"use client";

import { Mic, Square, X } from "lucide-react";
import { useEffect, useRef, useState } from "react";
import { cn } from "@/lib/utils";

export interface VoiceInputProps {
  /** Gets the recording once someone stops, with its length in ms. Send it to your speech to text API. */
  onRecorded?: (audio: Blob, duration: number) => void;
  /** Called when a recording is thrown away. */
  onCancel?: () => void;
  /** The prompt beside the mic while idle. */

197 more lines ship with an easeUI Pro license.

Buy a license

Install

$ bunx --bun shadcn add @easeui-pro/voice-input