vibecodng.com

Free MCP betaIndex and tools live

Measured entry

ruixen-checkbox-colored

checkboxunclassifiedmotion on file

A client-side React checkbox that keeps a native input for form behavior while rendering a colored, animated checkmark with Motion. It ships as a shadcn registry component, supports controlled or uncontrolled state, labels and disabled state, and relies on Tailwind classes plus a shared cn utility.

Specimen
Motion capture of the mounted demo, recorded by the harness. No audio track.
Harness screenshot of ruixen-checkbox-colored at 375 pixels wide
Harness screenshot at 375 pixels wide. No horizontal overflow recorded.
Harness screenshot of ruixen-checkbox-colored at 768 pixels wide
Harness screenshot at 768 pixels wide. No horizontal overflow recorded.
Harness screenshot of ruixen-checkbox-colored 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 ruixen-checkbox-colored
BuildOK
MountOK
Console errors0
Uncaught page errors0
Horizontal overflowclean at 375, 768, 1440
Axe critical0
Axe serious0
Axe moderate0
Axe minor0
Gzip marginal72.8 KB (138.3 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.44s
error during build:
[vite:load-fallback] Could not load <sandbox>re-5c287aae1035/src/lib/utils (imported by src/cut/components/ruixen/checkbox-colored.tsx): ENOENT: no such file or directory, open '<sandbox>re-5c287aae1035/src/lib/utils'

Verdict

A sound choice for an animated colored checkbox when its preset palette matches your product. It builds and mounts in the prepared harness, but the bare project does not mount because the shared cn import is absent, so it needs a shadcn-style setup or an equivalent local utility.

Use it if

  • You need a compact checkbox with selectable semantic or brand color variants.
  • Your interface already uses Tailwind and Motion, so the styling and animation dependencies fit the stack.
  • You want both controlled and uncontrolled checkbox state with a simple boolean change callback.

Skip it if

  • You need an indeterminate state or richer checkbox-group behavior.
  • You want to avoid adding Motion for a small form control.
  • Your design system cannot accept the component's fixed palette and tightly specified Tailwind classes.
  • Your project is server-only or does not support client React components.

Install

Installation record for ruixen-checkbox-colored
Declared dependenciesmotion, 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, Motion, clsx and tailwind-merge, configure the @ path alias, and provide a lib/utils cn helper. Keep the file as a client component, or replace the alias import with your own class-merging utility.

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/ruixenui/ruixen.com
License
MIT
Record published
2026-08-18

Alternatives

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