vibecodng.com

Free MCP betaIndex and tools live

Measured entry

tripled-ai-loading-skeleton-shadcnui

skeletongradient-glowmotion on file

A client-side React skeleton for an AI response card, with an avatar, text rows, and action placeholders. It ships as a shadcn registry component and uses Framer Motion for the shimmer and staggered reveal, plus Tailwind utilities and shadcn theme tokens. The registry also declares the button item, though the source does not import it.

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

Verdict

A focused, working placeholder with a clear prop and no provider requirement. It is a sensible fit for an AI response card in an existing Framer Motion stack, but the fixed composition, missing loading semantics, and contrast finding keep it from being a drop-in default.

Use it if

  • You need a fixed card-shaped placeholder for an assistant response or profile-backed result.
  • Your app already uses Framer Motion and Tailwind theme tokens, so the animation adds little setup overhead.
  • You want callers to adjust the amount of placeholder copy through a simple lines prop.

Skip it if

  • You need a lightweight CSS-only skeleton and do not otherwise ship Framer Motion.
  • Your loading layout must mirror varied content rather than this fixed avatar, copy, and actions composition.
  • You need built-in loading semantics or motion preferences; this source does not provide either.
  • You cannot review theme contrast, since the tested presentation triggered a serious contrast finding.

Install

Installation record for tripled-ai-loading-skeleton-shadcnui
Declared dependenciesframer-motion, react, radix-ui, clsx, tailwind-merge
Missing on installnone
Bare installbuilds and mounts without the shadcn-style helpers
Providerno provider required in the harness

In a non-shadcn project, add React and Framer Motion, configure Tailwind, and define equivalents for the muted, border, and card theme tokens used by the classes. Copy the component into a client-rendered module. No context provider is required; the declared button registry item is unused by this source.

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

Alternatives

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