103 Pro components and page blocks

Get Pro
uibrik

Voice Note

Pro

Preview

Customize

Max duration60s
Width340px
Bars28
Accent
Record colour
Send delay700ms

Installation

Pro

Voice Note is a Pro component

Sign in to see the source, or install it with a license key. The live preview and props above are free to explore.

Sign inGet Pro

Install with a key

  1. Add the Pro registry to components.json:
    components.json
    {
  "registries": {
    "@uibrik-pro": {
      "url": "https://uibrik.com/r/pro/{name}.json",
      "headers": { "Authorization": "Bearer ${UIBRIK_LICENSE}" }
    }
  }
}
  2. Put your key in .env.local and add that file to .gitignore:
    .env.local
    UIBRIK_LICENSE=your-license-key
  3. Install it:
    Terminal
    npx shadcn@latest add @uibrik-pro/voice-note

Usage

import { VoiceNote } from "@/components/uibrik/voice-note/voice-note";​<VoiceNote  maxDuration={60}  width={340}  bars={28}  accent=""  recordColor=""  onSend={(note) => {}}  onError={(error) => {}}/>

Props

VoiceNote
maxDuration
Type number
60
Longest note; recording stops by itself there.
width
Type number
340
Width of the open pill; never wider than its container.
bars
Type number
28
Bars in the waveform.
accent
Type string
""
The mic and send button and the played part of the waveform. Empty uses Apple's system blue.
recordColor
Type string
""
The recording dot, the live waveform and the stop button. Empty uses Apple's system red.
onSend
Type (note: { blob, duration, peaks }) => void | Promise
–
Called on send. Return a promise to hold the pill in a sending state; a rejection shakes it and keeps it open. blob is the recorded audio.
onError
Type (error) => void
–
Called when the microphone can't be used: no permission, no device or no MediaRecorder. The button shakes and shows a crossed-out mic.
className
Type string
–
Classes for the pill.