vibecodng.com

Free MCP betaIndex and tools live

Measured entry

ruixen-button-split

buttonliquid-glassmotion on file

A client-side React split button with a primary action, an animated options menu, liquid-glass styling injected by the component, and optional click sounds through the Web Audio API. It ships as a registry TSX file and depends on Motion, but not on shared shadcn components or a provider.

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

Verdict

The interaction is compact and the component builds and mounts without shadcn infrastructure, but it is not ready unchanged. The icon-only menu trigger lacks an accessible name, and blank wider captures warrant layout investigation before adoption.

Use it if

  • You need one prominent action with a short list of closely related alternatives.
  • You want a self-contained glass-styled control that supports light and dark theme selectors.
  • Your client-rendered React app already uses Motion or can accept that dependency.

Skip it if

  • You need production-ready keyboard and screen-reader behavior without modifying the component.
  • Your design system avoids inline injected CSS, inline styles, or browser-generated interaction sounds.
  • You need confidence across wider layouts, since the wider harness captures were blank.

Install

Installation record for ruixen-button-split
Declared dependenciesmotion
Missing on installnone
Bare installbuilds and mounts without the shadcn-style helpers
Providerno provider required in the harness

Add Motion, place the TSX file in a client-rendered React project, and ensure the browser build supports the Web Audio API. No shadcn utilities or provider are required. Add an accessible label and consider disabling the default sound before release.

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