Browse components
Voice Pill
A voice-note recorder pill that springs open into live waveform bars and a timer, then collapses the take into a playable, sendable waveform. Input is simulated.
Installation
npx shadcn@latest add @glint-ui/voice-pillFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/voice-pill.json
Usage
import { VoicePill } from "@/components/ui/voice-pill";
<VoicePill onStart={startMic} onStop={stopMic} onSend={(s) => upload(s)} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| bars | number | 28 | Waveform bar count. |
| color | string | "#ef4444" | Recording accent. |
| maxSeconds | number | 60 | Auto-stop after this many seconds. |
| onStart | ReactNode | — | Recording started. |
| onStop | ReactNode | — | Recording stopped, receives seconds. |
| onSend | ReactNode | — | Send pressed, receives seconds. |
| onDiscard | ReactNode | — | Trash pressed. |
| className | string | — | Extra classes for the root element. |