Drivn vs shadcn/ui — Skeleton Compared

shadcn/ui reaches for Tailwind's built-in animate-pulse. The class compiles to a pulse keyframe that fades opacity between 1 and 0.5 with a cubic-bezier easing curve over two seconds, infinite. It is fine, but the floor is high — 0.5 opacity is still very visible — and the cubic-bezier easing makes the dim phase feel snappier than a slow shimmer.

Drivn ships its own animate-skeleton keyframe declared in src/styles/globals.css and exposed as a Tailwind animation utility. The keyframe sets 0%, 100% { opacity: 1 } and 50% { opacity: 0.4 }, runs for two seconds with ease-in-out, and loops forever. Lower floor (0.4 vs 0.5), softer easing, longer perceived pause at the peaks. The component file uses that utility on a single div, so swapping the timing means editing one declaration in globals.css and every Skeleton in the project follows.

The colour choice is the second visible split. shadcn's current Skeleton uses bg-accent, which resolves to the theme's subtle hover surface — a near-neutral that sits just above the page background. The block stays solid and reads as a flat shape.

Drivn uses bg-muted at eighty percent opacity. bg-muted is the same token the text-muted-foreground colour pairs against, so the placeholder visually belongs to the same secondary surface used elsewhere in the design system. The trailing /80 keeps the block slightly translucent — when stacked over a coloured panel or a card with its own background, the Skeleton tints rather than blocks. Pair it with the Card for product cards or the Avatar for a circular profile placeholder and the muted-with-opacity choice lets the surrounding container show through.

Both libraries put the sizing decision on the caller. The base classes — bg-muted/80 rounded-md animate-skeleton in Drivn, animate-pulse rounded-md bg-accent in shadcn — set the surface and the animation; the width, height, and (optional) round-pill shape come from the className you pass. There is no size prop, no variant union, no width/height attributes.

The Skeleton docs preview leans on this directly: a 12-unit circle (size-12 rounded-full) for the avatar slot, a 5-unit-tall by 40-unit-wide rectangle for a heading line, and a 4-unit-tall by 60-unit-wide rectangle for the body line beneath it. The rounded-md in the base class only matters when you do not pass your own rounding utility — rounded-full, rounded-none, or any rounded-{size} later in the className wins thanks to cn(). Treat the component as a styled <div> whose only job is to be the right shape for the content it is standing in for.

Neither component is marked 'use client'. Both are plain functions that spread HTMLAttributes<HTMLDivElement> onto a single div, which means both can render directly inside server components, layouts, and statically rendered pages. The animation is CSS — the browser drives it, not React — so there is no JavaScript cost beyond the bytes of the component file itself.

That matters for loading states inside route segments that you want to keep server-rendered. A product grid that streams in with Suspense fallbacks, a profile page with an avatar placeholder above the fold, a list page with row-shaped skeletons — none of these need a client boundary just because they show a Skeleton during data fetch. Pair the component with a <Suspense fallback={<UserCardSkeleton />}> boundary and the fallback renders on the server, the animation plays via CSS, and the real content swaps in when the data resolves. Use the Drivn CLI to add the file to your project in one command.