Device Drop Down

The DeviceDropDown component provides a dropdown menu interface for selecting and managing microphone input devices in your voice application.

Component derives from the Shadcn Dropdown Menu.

import { Button, DeviceDropDownComponent } from "@pipecat-ai/voice-ui-kit";

<DeviceDropDownComponent
  availableDevices={[
    {deviceId: "microphone1", label: "Microphone Device"},
    {deviceId: "microphone2", label: "Another Microphone Device"},
  ]}
  selectedDevice={{deviceId: "microphone1", label: "Microphone 1"}}
  updateDevice={(deviceId) => console.log("Selected:", deviceId)}
>
  <Button variant="outline">Select Device</Button>
</DeviceDropDownComponent>

Component Variants

DeviceDropDown

The DeviceDropDown component is the connected variant that automatically integrates with the Pipecat Client SDK. It must be used within a PipecatClientProvider context.

import { DeviceDropDown, Button } from "@pipecat-ai/voice-ui-kit";

<DeviceDropDown menuLabel="Select Microphone">
  <Button variant="outline">Choose Device</Button>
</DeviceDropDown>

Prop	Type	Default
`children`	`React.ReactNode`	`undefined`
`noMenuLabel?`	`boolean`	`false`
`noMenuSeparator?`	`boolean`	`false`
`menuLabel?`	`string`	`"Device select"`
`classNames?`	`{ dropdownMenuContent?: string; dropdownMenuCheckboxItem?: string; dropdownMenuLabel?: string; }`	`undefined`

DeviceDropDownComponent

The DeviceDropDownComponent is the headless variant that accepts all device data and callbacks as props. This allows you to use it with any framework or state management solution.

import { DeviceDropDownComponent, Button } from "@pipecat-ai/voice-ui-kit";

// Example with mock data
const mockDevices = [
  { deviceId: "mic1", label: "Built-in Microphone" },
  { deviceId: "mic2", label: "External USB Mic" },
];

function Demo() {
  return (
    <DeviceDropDownComponent
      availableDevices={mockDevices}
      selectedDevice={mockDevices[0]}
      updateDevice={(deviceId) => console.log("Selected:", deviceId)}
      menuLabel="Select Microphone"
    >
      <Button variant="outline">Choose Device</Button>
    </DeviceDropDownComponent>
  );
}

render(<Demo />);

Prop	Type	Default
`children`	`React.ReactNode`	`undefined`
`noMenuLabel?`	`boolean`	`false`
`noMenuSeparator?`	`boolean`	`false`
`menuLabel?`	`string`	`"Device select"`
`availableDevices?`	`MediaDeviceInfo[]`	`undefined`
`selectedDevice?`	`OptionalMediaDeviceInfo`	`undefined`
`updateDevice?`	`(deviceId: string) => void`	`undefined`
`classNames?`	`{ dropdownMenuContent?: string; dropdownMenuCheckboxItem?: string; dropdownMenuLabel?: string; }`	`undefined`

Usage Examples

Custom Trigger with Icon

Create a custom trigger with icons or other elements.

import { DeviceDropDownComponent } from "@pipecat-ai/voice-ui-kit";

const mockDevices = [
  { deviceId: "mic1", label: "Built-in Microphone" },
  { deviceId: "mic2", label: "External USB Mic" },
];

function Demo() {
  return (
    <DeviceDropDownComponent
      availableDevices={mockDevices}
      selectedDevice={mockDevices[0]}
      updateDevice={(deviceId) => console.log("Selected:", deviceId)}
    >
      <div className="flex items-center gap-2 px-3 py-2 border rounded-md cursor-pointer hover:bg-gray-50">
        <CircleIcon />
        <span>Select Input</span>
      </div>
    </DeviceDropDownComponent>
  );
}

render(<Demo />);

Customize the menu appearance and behavior.

import { DeviceDropDownComponent, Button } from "@pipecat-ai/voice-ui-kit";

const mockDevices = [
  { deviceId: "mic1", label: "Built-in Microphone" },
  { deviceId: "mic2", label: "External USB Mic" },
];

function Demo() {
  return (
    <DeviceDropDownComponent
      menuLabel="Available Microphones"
      noMenuSeparator={false}
      availableDevices={mockDevices}
      selectedDevice={mockDevices[0]}
      updateDevice={(deviceId) => console.log("Selected:", deviceId)}
      classNames={{
        dropdownMenuLabel: "uppercase text-xs tracking-widest font-bold",
        dropdownMenuContent: "w-64 border-2 shadow-xlong",
        dropdownMenuCheckboxItem: "text-xs uppercase font-mono",
      }}
    >
      <Button variant="ghost">Customized Styles</Button>
    </DeviceDropDownComponent>
  );
}

render(<Demo />);

Create a clean dropdown without labels or separators.

import { DeviceDropDownComponent, Button } from "@pipecat-ai/voice-ui-kit";

const mockDevices = [
  { deviceId: "mic1", label: "Built-in Microphone" },
  { deviceId: "mic2", label: "External USB Mic" },
];

function Demo() {
  return (
    <DeviceDropDownComponent
      noMenuLabel={true}
      noMenuSeparator={true}
      availableDevices={mockDevices}
      selectedDevice={mockDevices[0]}
      updateDevice={(deviceId) => console.log("Selected:", deviceId)}
    >
      <Button variant="outline" size="sm">⚙️</Button>
    </DeviceDropDownComponent>
  );
}

render(<Demo />);

Component Variants

DeviceDropDown

DeviceDropDownComponent

Usage Examples

Custom Trigger with Icon

Custom Menu Label and Styling

Minimal Menu without Label

On this page