vibecodng.com

Free MCP betaIndex and tools live

Measured entry

kokonut-ai-voice

carddark-futuristicmotion on file

A client-side React voice-control card distributed through a shadcn registry. It uses Tailwind utility classes, Lucide for the microphone icon, and the shadcn cn helper. Motion is declared as a dependency but is not imported by the component. Its timer and waveform simulate listening state rather than capture audio.

Specimen
Motion capture of the mounted demo, recorded by the harness. No audio track.
Harness screenshot of kokonut-ai-voice at 375 pixels wide
Harness screenshot at 375 pixels wide. No horizontal overflow recorded.
Harness screenshot of kokonut-ai-voice at 768 pixels wide
Harness screenshot at 768 pixels wide. No horizontal overflow recorded.
Harness screenshot of kokonut-ai-voice at 1440 pixels wide
Harness screenshot at 1440 pixels wide. No horizontal overflow recorded.

Measured

Every value below was written by the harness on the run that produced the frames above. None of it is derived from the prose.

Harness measurements recorded for kokonut-ai-voice
BuildOK
MountOK
Console errors0
Uncaught page errors0
Horizontal overflowclean at 375, 768, 1440
Axe critical1
Axe serious0
Axe moderate0
Axe minor0
Gzip marginal30.9 KB (96.4 KB build, 65.5 KB baseline)
Bare modeOK
Provider requiredNO
Demo usedwritten from the component source API

Verdict

A tidy, responsive shell for showing an idle or listening state, but it is only presentation logic. It needs a shadcn-style setup, real audio behavior, an accessible button name, and contrast fixes before production use. Also review whether the unused declared motion dependency should remain.

Use it if

  • You need a compact push-to-speak visual for a voice assistant mockup.
  • Your app already has shadcn-style aliases, utilities, and Tailwind dark-mode styling.
  • You plan to connect the control to your own recording, permission, and transcription logic.

Skip it if

  • You need working microphone capture or audio processing out of the box.
  • You require an accessible production control without first adding a button label and correcting low-contrast text.
  • You want a framework-neutral component with no shadcn path alias or utility helper.
  • You do not want a demo animation that starts automatically and must be removed or adapted.

Install

Installation record for kokonut-ai-voice
Declared dependenciesmotion, lucide-react, clsx, tailwind-merge
Missing on installnone
Bare installbuilds and mounts without the shadcn-style helpers
Providerno provider required in the harness

For a non-shadcn project, add React client-component support, Tailwind utilities with dark-mode handling, the at-sign source alias, a lib/utils module exporting cn, and Lucide React. The registry also declares Motion, though this component does not import it. Then replace the simulated timer loop with your audio workflow.

Source and credit

This page is a review, not a copy. The component source lives with its author and this site does not republish it. Read the license before you use anything.

Author repository

github.com/kokonut-labs/kokonutui
License
MIT
Record published
2026-08-18

Alternatives

Other published entries for the card pattern, ordered by what they measured: mounts first, then clean axe scans, then bare-mode passes, then the smaller bundle.