Shadcn/UI is a component library built on Tailwind CSS and Radix UI primitives. Unlike traditional libraries, you copy components directly into your project, giving you full control over styling and behavior.

How do I install Shadcn/UI components?

Use the shadcn CLI to add components: npx shadcn@latest add [component-name]. This copies the component files directly into your project.

Can I customize Shadcn/UI components?

Yes, since components are copied into your project, you have complete control. Modify styling, add props, or change behavior as needed.

Is Shadcn/UI free to use?

Yes, Shadcn/UI is completely free and open-source. Components are MIT licensed and you can use them in any project, including commercial ones.

Skeleton Component - shadcn/ui Examples

About the shadcn/ui Skeleton Component

The Skeleton component is part of shadcn/ui — a collection of accessible, copy-paste React components built with Radix UI and Tailwind CSS. Install it with `npx shadcn@latest add skeleton` and copy it directly into your project.

Skeleton Component — Frequently Asked Questions

How do I create a card skeleton loader with shadcn?

Replicate your card layout with `<Skeleton>` elements: `<Skeleton className="h-40 w-full mb-4" />` for an image, then rows for title and text.

How do I conditionally show skeleton or real content?

Use a loading state: `{isLoading ? <SkeletonCard /> : <RealCard data={data} />}`. The skeleton should match the exact dimensions of the loaded content.

How do I customize the skeleton animation?

Override the `animate-pulse` class in your CSS or add a custom `shimmer` animation. The `<Skeleton>` component accepts a `className` prop for full customization.