React Skeleton Component Examples

The canonical Skeleton example — and the one the Skeleton docs preview uses — is a circular avatar next to two stacked text lines. The avatar slot is size-12 rounded-full (a 48-pixel circle), the heading line is h-5 w-40 (five units tall by forty units wide), and the body line beneath it is h-4 w-60. The shapes match what a user card looks like once it loads, so the layout does not shift when the real data arrives.

The wrapping flex row uses items-center to vertically align the avatar with the text stack, and gap-4 for the gap between them. The inner flex column uses gap-2 for the line spacing. The rounded-md already in the Skeleton's base className governs the corner radius on the text lines — pass rounded-full to override it on the avatar. This is the pattern to reach for whenever the loaded content is a person, an account, or any leading-icon + label row.

For a product grid that streams in, the right pattern is a Skeleton per card with the same internal shape the real card uses: an image area on top, a title line, and a price line. The image area is the tallest part — h-40 w-full here, with rounded-md inherited from the base className so the corners match the real card. Underneath, a title line (h-4 w-3/4) and a price line (h-4 w-1/3) stack with gap-2.

The grid wrapper uses Tailwind's grid grid-cols-2 md:grid-cols-4 gap-4 to match the real product grid's layout. Mapping over an array of four lets the placeholder count match what the route is about to render. Pair this with the Card compound for the real grid — the skeleton lives in the route segment's loading.tsx (or inside a Suspense fallback) and the real Card renders once the data fetch resolves.

A loading state for a Table reads better as five short bars in a row rather than one big block. The pattern: render the real <table> shell with its real <thead>, then map over a placeholder array to render <tr> elements whose cells each contain a Skeleton. The Skeleton width inside each cell is tuned to the kind of data the cell will eventually hold — narrow for IDs, wider for names, medium for dates, narrow for amounts, very narrow for status.

Using the real table shell means the column widths the browser computes for the real data are the same widths the placeholder uses, so when the real rows arrive the layout does not shift. The Skeleton height (h-4) matches a single-line cell. For a data-table with sortable columns and filters, the shell renders normally and only the body rows get the Skeleton treatment.

The Skeleton has no 'use client' directive, so it can sit directly inside a server component's Suspense boundary. Wrap the slow data-fetching component in <Suspense fallback={…}>, pass a Skeleton (or a small layout of Skeletons) as the fallback, and React renders the placeholder while the real component awaits its data. When the data resolves, the real markup streams in and replaces the fallback in place.

The example below is the same user-card shape from the first example, used as a fallback for an async ProfileCard server component. Nothing in this snippet crosses a client boundary — the Suspense boundary, the Skeleton, and the awaited component all run on the server. The animation plays via CSS in the browser; the JavaScript cost is zero beyond the bytes of the component file itself. Use this pattern for above-the-fold content where the LCP element depends on a database call.

For a route that loads several panels at once, drop a loading.tsx next to the route's page.tsx. Next.js renders loading.tsx while the page's data fetch is in flight, then swaps in the real page. The file is a server component by default, which is fine — the Skeleton runs there.

The example below is a profile route loader: a header strip with an avatar and two text lines, a bio block, and a two-column grid of stat cards. Every block is a Skeleton sized to match what the real page renders. The wrapper container width (max-w-3xl) and the spacing utilities mirror the real page, so when the swap happens the user does not see anything move. For a multi-step form skeleton or a wizard-style loading state, reach for the Stepper component once the data arrives.

Every example above maps back to the same six-line component file. The function spreads HTMLAttributes<HTMLDivElement> onto a single div, merges bg-muted/80 rounded-md animate-skeleton with whatever className you passed, and stops. No state, no refs, no hooks. The full source is reproduced below from packages/drivn/src/registry/components/skeleton.ts so the entire component is visible at once.

The animate-skeleton utility comes from the CSS in src/styles/globals.css: a custom keyframe that fades opacity between 1 and 0.4 over two seconds with ease-in-out, looping forever. Tweaking the timing or the opacity floor is a one-line change to that keyframe, and every Skeleton in the project picks up the new animation. After the Drivn CLI writes the file into your project, the component is yours — rename it, change the colour token, swap the animation, add a pulse variant of your own.