vibecodng.com

Free MCP betaIndex and tools live

Measured entry

kokonut-bento-grid

feature-griddark-futuristicmotion on file

A client-side bento feature section with animated cards for capabilities, typed code, partner marks, a timeline, and a voice-assistant demo. It ships as registry source built for React, Next Link, Tailwind utilities, Motion, Lucide icons, bundled provider SVGs, and a shared cn helper.

Specimen
Motion capture of the mounted demo, recorded by the harness. No audio track.
Harness screenshot of kokonut-bento-grid at 375 pixels wide
Harness screenshot at 375 pixels wide. No horizontal overflow recorded.
Harness screenshot of kokonut-bento-grid at 768 pixels wide
Harness screenshot at 768 pixels wide. No horizontal overflow recorded.
Harness screenshot of kokonut-bento-grid 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-bento-grid
BuildOK
MountOK
Console errors0
Uncaught page errors0
Horizontal overflowclean at 375, 768, 1440
Axe critical1
Axe serious0
Axe moderate0
Axe minor0
Gzip marginal93.8 KB (159.2 KB build, 65.4 KB baseline)
Bare modeFAIL
Provider requiredNO
Demo usedwritten from the component source API

What the harness recorded

BARE BUILD

✗ Build failed in 1m 18s
error during build:
[vite:load-fallback] Could not load <sandbox>/src/lib/utils (imported by src/cut/components/kokonutui/bento-grid.tsx): ENOENT: no such file or directory, open '<sandbox>/src/lib/utils'

Verdict

A polished, content-rich starting point for AI product pages, but not a true drop-in. It needs a shadcn-style setup, carries a notable animation cost, and requires an accessible name for the voice button before production use.

Use it if

  • You need a ready-made AI or developer-services feature section with varied card content.
  • Your site already uses Next, Tailwind, and a shadcn-style alias and utility layout.
  • You are willing to replace the demo copy, placeholder links, and simulated voice interaction with product-specific content.

Skip it if

  • You need an accessible drop-in without remediation, because the voice control has no discernible name.
  • You want a lean static feature grid without a substantial animation dependency cost.
  • Your stack is not Next-based and you do not want to adapt its Link import, path aliases, and client-only code.
  • You need a functional voice input rather than a visual demo driven by local timers.

Install

Installation record for kokonut-bento-grid
Declared dependencieslucide-react, motion
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 with dark-mode support, configure the at-sign source alias, provide a cn class-merging helper, install Motion and Lucide React, copy the included provider icon components, and supply Next Link or replace it with your router's link component. Also label the icon-only voice button.

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-14

Alternatives

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