vibecodng.com

Free MCP betaIndex and tools live

Measured entry

tripled-fade-slide-modal-shadcnui

dialogminimal-flatmotion on file

A client-side React modal delivered as a shadcn registry component. It owns its open state and uses Framer Motion for the fading backdrop and spring entrance, plus a Lucide close icon. Its presentation assumes Tailwind utilities and shadcn-style theme variables, while the dialog behavior is implemented directly rather than through a dialog primitive.

Specimen
Motion capture of the mounted demo, recorded by the harness. No audio track.
Harness screenshot of tripled-fade-slide-modal-shadcnui at 375 pixels wide
Harness screenshot at 375 pixels wide. No horizontal overflow recorded.
Harness screenshot of tripled-fade-slide-modal-shadcnui at 768 pixels wide
Harness screenshot at 768 pixels wide. No horizontal overflow recorded.
Harness screenshot of tripled-fade-slide-modal-shadcnui 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 tripled-fade-slide-modal-shadcnui
BuildOK
MountOK
Console errors0
Uncaught page errors0
Horizontal overflowclean at 375, 768, 1440
Axe critical0
Axe serious1
Axe moderate0
Axe minor0
Gzip marginal60.7 KB (126.1 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 849ms
error during build:
[vite]: Rollup failed to resolve import "lucide-react" from "<sandbox>re-eefe283578cf/src/cut/components/uitripled/fade-slide-modal-shadcnui.tsx".

Verdict

A usable animated shell, but not a complete accessible dialog. It builds and mounts without framework scaffolding, yet the contrast finding and missing dialog interaction primitives make it better as a starting point for teams willing to harden it than as a drop-in production modal.

Use it if

  • You want a compact animated confirmation modal whose labels and actions will be replaced in place.
  • Your app already uses Tailwind theme tokens and can accept Framer Motion for one-off interface animation.
  • You are prepared to add the dialog semantics, focus handling, and keyboard behavior required by your product.

Skip it if

  • You need production-ready focus trapping, focus restoration, Escape handling, and dialog labelling out of the box.
  • Your dependency budget cannot justify Framer Motion for a small modal transition.
  • You need the supplied colors to pass accessibility checks without adjusting the muted text and accent styling.
  • Your design system does not use Tailwind utilities or compatible theme variables.

Install

Installation record for tripled-fade-slide-modal-shadcnui
Declared dependenciesframer-motion, react, radix-ui
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 React, Framer Motion, and Lucide React, then provide Tailwind processing or translate the utility classes. Define compatible card, foreground, muted-foreground, and accent theme variables. No provider is required. Add dialog semantics, accessible names, focus trapping and restoration, Escape handling, and corrected contrast 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/moumen-soliman/uitripled
License
MIT
Record published
2026-08-14

Alternatives

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