vibecodng.com

Free MCP betaIndex and tools live

Measured entry

kokonut-gradient-button

buttondark-futuristic

A React gradient call-to-action with emerald, purple, and orange variants plus light and dark styling. It ships as a shadcn registry component and wraps the local Button primitive, using the cn utility, Tailwind utility classes, and the declared Radix dependency.

Specimen
Harness screenshot of kokonut-gradient-button at 375 pixels wide
Harness screenshot at 375 pixels wide. No horizontal overflow recorded.
Harness screenshot of kokonut-gradient-button at 768 pixels wide
Harness screenshot at 768 pixels wide. No horizontal overflow recorded.
Harness screenshot of kokonut-gradient-button 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-gradient-button
BuildOK
MountOK
Console errors0
Uncaught page errors0
Horizontal overflowclean at 375, 768, 1440
Axe critical0
Axe serious0
Axe moderate0
Axe minor0
Gzip marginal31.8 KB (97.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 48s
error during build:
[vite:load-fallback] Could not load <sandbox>/src/lib/utils (imported by src/cut/components/kokonutui/gradient-button.tsx): ENOENT: no such file or directory, open '<sandbox>/src/lib/utils'

Verdict

A focused decorative button that builds, mounts, and checks cleanly in the prepared harness. It is a sensible fit for an existing Tailwind and shadcn-style codebase, but it needs a shadcn-style setup and is not a standalone package component.

Use it if

  • You need a prominent text-only action that fits a dark futuristic interface.
  • Your app already has shadcn-style Button and cn utilities with Tailwind styling.
  • You want selectable color treatments while preserving native button props.

Skip it if

  • You need an icon-bearing button because the exposed icon prop is not rendered.
  • Your design system avoids layered gradients, glow effects, or fixed-height controls.
  • You want a drop-in component with no local shadcn-style primitives or path aliases.

Install

Installation record for kokonut-gradient-button
Declared dependenciesradix-ui
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 an equivalent Button primitive, a class-merging cn utility, the expected path aliases, Tailwind support for the utility classes, and the declared Radix dependency. Remove or implement the unused icon prop if your API should expose icons.

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