vibecodng.com

Free MCP betaIndex and tools live

Measured entry

kokonut-ai-prompt

chatdark-futuristicmotion on file

A client-side React prompt composer with an auto-growing textarea, animated model picker, file control, and submit callback. It ships as a shadcn registry component with a companion hook and model icons, and relies on Tailwind utilities, path aliases, shadcn textarea, button, and dropdown primitives, plus Lucide, Motion, Radix, and a cn helper.

Specimen
Motion capture of the mounted demo, recorded by the harness. No audio track.
Harness screenshot of kokonut-ai-prompt at 375 pixels wide
Harness screenshot at 375 pixels wide. No horizontal overflow recorded.
Harness screenshot of kokonut-ai-prompt at 768 pixels wide
Harness screenshot at 768 pixels wide. No horizontal overflow recorded.
Harness screenshot of kokonut-ai-prompt 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-prompt
BuildOK
MountOK
Console errors0
Uncaught page errors0
Horizontal overflowclean at 375, 768, 1440
Axe critical0
Axe serious1
Axe moderate0
Axe minor0
Gzip marginal106.4 KB (171.9 KB build, 65.5 KB baseline)
Bare modeFAIL
Provider requiredNO
Demo usedwritten from the component source API

What the harness recorded

BARE BUILD

✗ Build failed in 1.89s
error during build:
[vite]: Rollup failed to resolve import "class-variance-authority" from "<sandbox>re-cc9771e92ef0/src/components/ui/button.tsx".

Verdict

A credible visual shell for an AI composer, but not a finished interaction. Keyboard submit and model selection are useful; click submission, upload behavior, and accessibility need work. It also needs a shadcn-style setup, since the bare project cannot resolve its shared utility import.

Use it if

  • You already run a shadcn-style React app and want a polished starting point for an AI prompt composer.
  • Your flow needs model selection, multiline input, keyboard submission, and a replaceable submit callback.
  • You are prepared to wire the attachment control and send button into real application behavior.

Skip it if

  • You need an accessible component ready for release without fixing prohibited ARIA usage and low-contrast text.
  • You expect the visible send button to submit as shipped; only the keyboard path calls the submit callback.
  • You need a framework-neutral input without Tailwind, aliases, shadcn primitives, or animation dependencies.
  • You need file uploads to work without adding selection, validation, and upload handling.

Install

Installation record for kokonut-ai-prompt
Declared dependencieslucide-react, motion, radix-ui, clsx, tailwind-merge
Missing on installnone
Bare installfails once the shadcn-style helpers are removed, so it needs that setup
Providerno provider required in the harness

In a non-shadcn project, add Tailwind styling and dark-mode conventions, configure the at-sign path alias, provide the cn utility and auto-resize hook, add compatible textarea, button, and dropdown primitives backed by Radix, include the supplied model icons, and install Lucide and Motion. Then wire click submission and file handling explicitly.

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 chat pattern, ordered by what they measured: mounts first, then clean axe scans, then bare-mode passes, then the smaller bundle.