How to Add a Skeleton to a React App

Before installing Skeleton, confirm your React project has the two things Drivn assumes: Tailwind CSS v4 installed and processing your styles, and a @/ path alias pointing at your source directory (the component ships as a .tsx file, so TypeScript is part of the stack). If you scaffolded with create-next-app, npm create vite, or npx drivn@latest create, both are already wired; for a custom setup the installation page lists the minimal config. The Skeleton is among the smallest installs in the library — its only import past React is the local cn utility for class merging, so there is no third-party package to add. The one detail worth knowing before you render it is that the placeholder has no intrinsic size: it takes its width, height, and shape entirely from the Tailwind classes you pass, so a bare <Skeleton /> collapses to nothing until you give it dimensions.

Run the CLI from your project root to add the Skeleton source file. The command prompts once for your install directory (defaulting to src/components/ui/) and writes a single skeleton.tsx — no other files, because the component has no peer dependency beyond React and the cn utility. No global config file is created; the result is TypeScript source you edit like any other component. Confirm it landed in your editor, then commit it for a clean baseline. If your project uses a monorepo layout or a non-standard source path, the CLI docs cover the flags for targeting a custom location during install. Because the file is yours after install, future Drivn releases will not overwrite your edits, and the whole component is one <div> you can read top to bottom in seconds.

Import Skeleton and give it a size through className — the component has no width or height prop, so every dimension is a Tailwind utility. A single <Skeleton className="h-5 w-40" /> is a text line, size-12 rounded-full is a circular avatar, and h-40 w-full rounded-xl is a media block. Stack a few of them to sketch the shape of a component before its data arrives; the example below is the profile placeholder from the Skeleton docs — an avatar beside two text bars. Because size lives outside the component, the same one-line primitive becomes every shape you need with no per-shape prop to learn. Each placeholder inherits the bg-muted/80 tint, so it matches your theme in dark and light mode with no override, and the animate-skeleton class pulses them all in sync.

The point of a skeleton is to fill the gap while data is in flight. In a client component that fetches with a loading flag, branch on it: render the placeholder while isLoading is true and the real content once the data resolves. Build the fallback to mirror the shape of what replaces it — 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. The example below shows the pattern with a useState loading flag, but it works the same against any data source: SWR's isLoading, React Query's isPending, or a Suspense fallback. Because the Skeleton is server-safe, you can also render it in a Server Component or a route-level loading state — the Next.js Skeleton guide covers the App Router loading.tsx pattern in full.

Every class the component renders lives in one cn() call inside the file you own — the base is bg-muted/80 rounded-md animate-skeleton. Make the placeholder brighter by swapping bg-muted/80 for a lighter step; sharpen the corners with rounded-none or round them fully with rounded-full; or slow the pulse by pointing --animate-skeleton at a longer duration in your theme. The animate-skeleton utility is defined once 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 together. The className you pass merges after the base through cn(), so one call site can reshape a single skeleton without touching the shared file. Because the tint reads the --muted token, adjusting it in theming re-themes every placeholder across the app at once. The verbatim source below is the whole component.