Next.js Skeleton with the App Router

Drivn installs through a small CLI that writes component source directly into your repository — there is no runtime package to version-lock. From the root of your Next.js 16 project run npx drivn add skeleton. The Skeleton imports nothing past React and the local cn utility, so the CLI writes a single skeleton.tsx file and leaves the rest of your tree untouched. The CLI reference documents every flag, including targeting a custom directory or installing several components at once. After install you own the file, and future Drivn releases will not overwrite it — commit it for a clean baseline before wiring it into a layout. Because the whole component is one <div>, there is no peer dependency to install and nothing to configure past having Tailwind v4 already processing your styles.

Because the Skeleton holds no state and calls no browser API, skeleton.tsx ships without a 'use client' directive — you can render it straight inside a Server Component in a Next.js App Router page, no client boundary required. Import Skeleton and give it a size through className: the component has no width or height prop, so every dimension is a Tailwind utility you pass. A single <Skeleton className="h-5 w-40" /> is a text line; stack a size-12 rounded-full avatar beside two bars and you have a profile placeholder. Because size is external, the same one-line component becomes a text row, a circular avatar, or a full media block depending only on the classes you hand it — there is nothing component-specific to learn per shape. The verbatim usage below mirrors the Skeleton docs example.

The App Router turns a skeleton into a first-class loading state. Drop a loading.tsx file beside a page.tsx and Next.js renders it instantly while the page's async data resolves, streaming the real content in when it is ready — no client-side spinner flag to manage. Because the Skeleton is server-safe, it renders directly inside that loading.tsx. The same component works as a <Suspense fallback={...}> boundary around a single async section when you want to stream part of a page rather than the whole route. Build the fallback to mirror the shape of the real content — the same number of rows and roughly the same widths — so the layout does not jump when the data arrives and the skeleton reads as a preview rather than a generic bar. This is the pattern the App Router was designed around, and the Skeleton slots into it with no extra wiring.

The entire component is a single <div> — there is no state, no effect, and no variant map. The function spreads your props onto the div and merges its base class with any className through cn(). That base is bg-muted/80 rounded-md animate-skeleton: bg-muted/80 tints the placeholder with the muted theme token at 80% opacity, rounded-md softens the corners, and animate-skeleton runs the pulse. The animation is defined once in your theme as skeleton 2s ease-in-out infinite, and its keyframes fade the element between full opacity and 0.4 and back, so every skeleton on the page pulses in sync. Because the tint reads the --muted token, the placeholder matches your palette in dark and light mode with no override. The verbatim source below is the whole component.

Because the placeholder is a plain <div> tinted by bg-muted/80, restyling it is either a one-line edit to the base class or a per-instance className. Slow the pulse by pointing --animate-skeleton at a longer duration in your theme; sharpen the corners with rounded-none or round them fully with rounded-full; or brighten the tint by swapping bg-muted/80 for a lighter step. The className you pass merges after the base through cn(), so one call site can reshape a single skeleton without touching the shared file. To build a reusable placeholder, compose several <Skeleton> elements into a named component — a CardSkeleton or a TableRowSkeleton — that mirrors the real component it stands in for, then render that wherever the data is loading. Since the tint reads the --muted token, adjusting it in theming re-themes every skeleton across the app at once. For copy-paste placeholder layouts see the Skeleton examples.