vibecodng.com

Free MCP betaIndex and tools live

Measured entry

cultui-side-panel

sheetglassmorphismmotion on file

A client-side React panel distributed as a shadcn registry source file rather than a packaged widget. It animates width and measured content height with Motion and react-use-measure, styles through Tailwind classes, and imports the usual shadcn cn utility through the project alias.

Specimen
Motion capture of the mounted demo, recorded by the harness. No audio track.
Harness screenshot of cultui-side-panel at 375 pixels wide
Harness screenshot at 375 pixels wide. This viewport scrolled sideways.
Harness screenshot of cultui-side-panel at 768 pixels wide
Harness screenshot at 768 pixels wide. No horizontal overflow recorded.
Harness screenshot of cultui-side-panel 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 cultui-side-panel
BuildOK
MountOK
Console errors0
Uncaught page errors0
Horizontal overflowflagged at 375
Axe critical0
Axe serious0
Axe moderate0
Axe minor0
Gzip marginal69.6 KB (135.0 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 34.30s
error during build:
[vite:load-fallback] Could not load <sandbox>/src/lib/utils (imported by src/cut/components/ui/side-panel.tsx): ENOENT: no such file or directory, open '<sandbox>/src/lib/utils'

Verdict

A polished inline expander for an existing shadcn-style app, but not a complete accessible sheet primitive. It needs a shadcn-style setup to mount, carries substantial animation weight, and requires mobile overflow work before broad use.

Use it if

  • You want an inline expanding side panel with a caller-supplied toggle and fully custom panel content.
  • Your app already uses Tailwind, the shadcn utility convention, Motion, and client-side React.
  • You can accommodate its heavier animation dependency in exchange for coordinated width and height transitions.

Skip it if

  • You need a modal sheet with focus trapping, escape-key dismissal, an overlay, or dialog semantics.
  • Your layout must avoid horizontal overflow on narrow mobile screens without component-level adjustments.
  • You want a lightweight disclosure and do not otherwise use Motion or react-use-measure.
  • You need a drop-in component for a plain React project with no Tailwind or path alias setup.

Install

Installation record for cultui-side-panel
Declared dependenciesnone declared
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 Motion and react-use-measure, configure Tailwind, provide a class-merging cn helper, and either define the project source alias or replace that import with a relative path. Ensure the file runs as a client component.

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/nolly-studio/cult-ui
License
MIT
Record published
2026-08-14

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.