Voice Note

A chat voice message you can scrub like a waveform, with a play button that morphs to pause, a speed chip that rolls, and a transcript that follows along word by word.

akaaudio message·voice message·waveform

Install

Run this in any project set up for the shadcn CLI. It copies the Voice Note source into your components folder, so the code is yours to change.

npx shadcn@latest add https://devl.dev/r/voice-note.json

Use it

Import it and render it. Every prop has a typed default, so it works straight away, and you pass your own data when you’re ready.

import { VoiceNote } from "@/components/voice-note";

export default function Page() {
  return <VoiceNote />;
}

Built with

A free React component in the Conversation collection, written in TypeScript with Tailwind CSS on coss ui. MIT licensed.

npm: lucide-react, motion

Props

Read from the Voice Note source. Everything is optional unless it says required.

Prop	Type	Default
sender	VoiceNoteSender	{ name: "Noor Haddad", initials: "NH", avatarClassName: "bg-violet-100 text-violet-700 dark:bg-violet-950 dark:text-violet-300", }
sentAt	string	"9:41"
duration	number	—
src	string	—
peaks	number[]	—
transcript	VoiceNoteWord[]	defaultTranscript
speeds	number[]	[1, 1.5, 2]
defaultTranscriptOpen	boolean	true
unplayed	boolean	true
className	string	—

More in Conversation

009

Prompt Bar

A prompt box that grows as you type, with attachments, a model menu, an approval toggle and a mic that opens into a live level meter, plus a send button that only lights up when there's something to send.

010

Streamed Reply

An answer that reads its sources first, then softly streams in word by word, with little numbered chips you can hover to peek at each source, all in a card that holds its size the whole time.

011

Footnoted Answer

An answer whose footnotes really point somewhere: hover a number and its sentence lights up in the source's colour, click it and the quoted passage unfolds with the matching words marked.

012

Reply Toolbar

The quiet row under an AI reply where every small action gives something back: copy draws a check, regenerate opens a version switcher, a thumb asks what worked and read aloud turns into an equaliser.

Prop

Type

Default

sender

VoiceNoteSender

{ name: "Noor Haddad", initials: "NH", avatarClassName: "bg-violet-100 text-violet-700 dark:bg-violet-950 dark:text-violet-300", }

sentAt

string

"9:41"

duration

number

—

src

string

—

peaks

number[]

—

transcript

VoiceNoteWord[]

defaultTranscript

speeds

number[]

[1, 1.5, 2]

defaultTranscriptOpen

boolean

true

unplayed

boolean

true

className

string

—