vibecodng.com

Free MCP betaIndex and tools live

Measured entry

ruixen-bottom-drawers

sheetunclassifiedmotion on file

A client-side React bottom sheet distributed as a shadcn registry component. It accepts separate peek, half, and full content, then uses Motion for drag gestures, spring snapping, progressive reveal, backdrop dimming, and optional Web Audio feedback. Styling is embedded and the host must provide a positioned container.

Specimen
Motion capture of the mounted demo, recorded by the harness. No audio track.
Harness screenshot of ruixen-bottom-drawers at 375 pixels wide
Harness screenshot at 375 pixels wide. No horizontal overflow recorded.
Harness screenshot of ruixen-bottom-drawers at 768 pixels wide
Harness screenshot at 768 pixels wide. No horizontal overflow recorded.
Harness screenshot of ruixen-bottom-drawers 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-bottom-drawers
BuildOK
MountOK
Console errors0
Uncaught page errors0
Horizontal overflowclean at 375, 768, 1440
Axe critical0
Axe serious1
Axe moderate0
Axe minor0
Gzip marginal63.1 KB (128.6 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 476ms
error during build:
[vite]: Rollup failed to resolve import "lucide-react" from "<sandbox>re-bab3736fe0cd/src/cut/demo.jsx".

Verdict

A convincing gesture-first drawer that builds, mounts, and adapts across the tested layouts without framework scaffolding. Treat it as an interaction primitive, not a finished accessible sheet: contrast needs attention, and keyboard, focus, and dialog semantics must be added for production use.

Use it if

  • You need a compact mobile surface that exposes progressively richer content as it expands.
  • Your interface benefits from drag and flick gestures with preset stopping states.
  • You already use Motion or accept adding it for the interaction model.

Skip it if

  • You need an accessible dialog or sheet with keyboard controls, focus management, and semantic dismissal built in.
  • You cannot revise the low-contrast handle or supplied content colors before release.
  • You want content-driven or viewport-driven sheet heights instead of fixed snap geometry.
  • You want to avoid the runtime and bundle cost of Motion for a single drawer.

Install

Installation record for ruixen-bottom-drawers
Declared dependenciesmotion
Missing on installnone
Bare installfails once the shadcn-style helpers are removed, so it needs that setup
Providerno provider required in the harness

Copy the client component into the project, install Motion, and render it inside a positioned container with enough height for the drawer. Non-shadcn projects need no registry utilities or provider, but should add dialog semantics, focus handling, keyboard actions, and theme-specific contrast adjustments.

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