shadcn.io is not affiliated with official shadcn/ui
Audio Diary Music Block for Ark UI
A voice diary of eight typed entries grouped by week, each with a play toggle, a length, a mood word with a glyph, a transcript preview with a full transcript, a search that marks matches, a mood filter, a simulated New recording and titles you can rename.
Installation
Overview
Give a voice journal a way back to what was said, with this audio diary for React with Ark UI. It lists eight Dayhum entries in a hairline frame with a plus mark on each corner, grouped by week, each with a Toggle that marks it as playing, a rename button on its title (Editable), its date, length and a mood word beside a glyph, a one-line transcript and a Collapsible with the full text. A search box marks matches across every transcript with Search Highlight Text and says how many entries mention the word, and a Toggle Group narrows the list by mood. New recording is simulated: a strip shows the clock of an eight-second take, no microphone is used, and Stop adds an untitled entry at the top. The list sits in a region of one height with an Empty state. There is no primary button. It's built from Input, Search Highlight Text, Collapsible, Toggle, Editable, Toggle Group and Guides, with a CSS entrance only. For journals, voice memos and any searchable archive.
FAQ
How do I fill it with my own entries?
Edit START: each entry has a day (an ISO date), a length in seconds, a mood (calm, bright, heavy or restless), a title, a one-line preview and the rest of the transcript in rest. AS_OF is the Monday the diary is read on; weeks, dates and totals are worked out from the days without the clock.
How does the search work?
It looks for the typed word, ignoring case, in the title, the preview and the rest of each transcript, and shows only entries that match the mood too. Matches are marked in the preview and in the full transcript, and an entry whose match is in the folded part opens by itself. The count under the list says "3 entries mention ferry".
Does it record or transcribe, and what stays local?
No. New recording runs a clock of up to eight seconds and the status line says no microphone is used; Stop adds an entry titled Untitled with a note that no transcript is made. Entries and titles live in the page and are gone on reload. To make it real, record with MediaRecorder, send the audio to your transcription service and fill preview and rest from the result.
How do I rename an entry?
Press the pencil beside the title (it shows on hover and focus), type, and press Enter to save or Escape to cancel. After Stop, focus moves to the new entry's pencil so you can name it at once.
How do I use it from the keyboard?
Tab runs the search, New recording, the mood group, then each entry's play toggle, rename button, transcript toggle and so on down the list. The mood group moves with the arrow keys. Every control is named with the entry it belongs to, such as "Rename Rain on the skylight".