Voice Selector

A searchable dialog for picking an AI voice — preview playback, accent / age / gender metadata, and a compact trigger.

Default

Searchable dialog of AI voices with preview playback, accent, age, and gender metadata.

Loading…

Installation

CLI

npx @sonojs/ui@latest add voice-selector

Also needsnpx @sonojs/ui@latest add button command dialog spinner && npm i lucide-react@^1.61.0

Usage

voice-selector.tsx

import { useState } from "react"
import { Button } from "@/components/ui/button"
import {
  VoiceSelector,
  VoiceSelectorContent,
  VoiceSelectorEmpty,
  VoiceSelectorInput,
  VoiceSelectorItem,
  VoiceSelectorList,
  VoiceSelectorName,
  VoiceSelectorTrigger,
} from "@/components/sonojs/voice-selector"

export function Example() {
  const [open, setOpen] = useState(false)

  return (
    <VoiceSelector open={open} onOpenChange={setOpen}>
      <VoiceSelectorTrigger asChild>
        <Button variant="outline">Select a voice...</Button>
      </VoiceSelectorTrigger>
      <VoiceSelectorContent>
        <VoiceSelectorInput placeholder="Search voices..." />
        <VoiceSelectorList>
          <VoiceSelectorEmpty>No voices found.</VoiceSelectorEmpty>
          <VoiceSelectorItem value="liam" onSelect={() => setOpen(false)}>
            <VoiceSelectorName>Liam</VoiceSelectorName>
          </VoiceSelectorItem>
        </VoiceSelectorList>
      </VoiceSelectorContent>
    </VoiceSelector>
  )
}

Props

Prop	Type	Default	Description
value / defaultValue / onValueChange	string	—	Selected voice ID (controlled or uncontrolled).
open / onOpenChange	boolean	—	Dialog open state.
VoiceSelectorPreview	playing? / loading? / onPlay?	—	Play / pause / spinner control for audio previews.
VoiceSelectorGender	value?: male · female · …	—	Gender icon (or custom children).
VoiceSelectorAccent	value?: american · british · …	—	Accent flag emoji (or custom children).
useVoiceSelector()	hook	—	Context: `value`, `setValue`, `open`, `setOpen` inside the tree.