Recorder

A tactile recorder with an animated pixel grid.

Installation

npx shadcn@latest add qubydev/bunui/recorder

How to use

demo.tsx
import { Recorder } from "@/components/ui/recorder"


export function Demo() {
  return (
    <Recorder
      onStop={(duration) => {
        console.log("Recording finished:", duration)
      }}
    />
  )
}

Props

Options you can pass to customize this component.

Prop
Type
Description
state
"idle""recording""done"

Controlled state of the recorder.

defaultState
"idle""recording""done"

Initial uncontrolled state.

onStateChange
(state: RecorderState) => void

Callback fired when the recorder state changes.

onStart
() => void

Callback fired when recording starts.

onStop
(duration: number) => void

Callback fired when recording is marked as done with duration in seconds.

onCancel
() => void

Callback fired when recording is cancelled.

onReset
() => void

Callback fired when reset back to idle.

onPlay
() => void

Callback fired when playback starts in done state.

onPause
() => void

Callback fired when playback is paused in done state.

icon
React.ReactNode

Custom icon for the record button in idle state. Defaults to CircleDot.

recordingLabel
string

Text label displayed beside the timer in recording state.

size
smdefaultlg

Visual scale variant of the recorder.

maxDuration
number

Maximum recording duration in seconds before auto-stopping.

disabled
boolean

Whether interaction is disabled.

className
string

Extra classes merged onto the recorder container element.

Dependencies

lucide-reactmotion@fontsource/chakra-petch

Contact

Found a bug or issue? Open an issue or send a note.

License & Usage

  • •Free to use and modify in personal and commercial projects.
  • •Attribution to Bun UI is appreciated when using a component.
  • •Please do not resell the components as your own kit.