vibecodng.com

Free MCP betaIndex and tools live

Measured entry

ruixen-centered-feedback-drawer

selectunclassifiedmotion on file

A client-side React feedback drawer that presents three emoji ratings, reveals a contextual comment field, and closes after a thank-you state. It ships as a single registry component with inline styling, controlled open state, an optional submission callback, Motion animations, and optional Web Audio feedback.

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

Verdict

A focused choice for lightweight, in-context feedback, with a clean callback boundary and no provider requirement. Use it only after fixing the contrast failure and adding proper modal semantics; its fixed copy and rating model make it a poor base for broader surveys.

Use it if

  • You need a compact sentiment prompt with an optional free-text follow-up.
  • You can connect its submission callback to your own persistence or analytics layer.
  • Your interface already uses Motion, or the extra animation dependency is acceptable.

Skip it if

  • You need accessible dialog behavior and compliant contrast without remediation; the audit found a serious contrast issue, and the source lacks dialog semantics and focus trapping.
  • You need configurable questions, rating choices, validation, or a multi-step survey.
  • You need a viewport-level modal without managing its containing block; the overlay uses absolute positioning.

Install

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

In a non-shadcn project, install Motion, copy the client component, and supply React state for its controlled open API plus a submission handler. Place it inside a positioned container, provide dark-theme handling if needed, and add accessible dialog labeling, focus management, keyboard dismissal, and corrected contrast. No shadcn utilities or providers are required.

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

Alternatives

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