ComponentsCore
Skeleton
A placeholder UI that mimics the layout of content while it’s loading.
Example
Installation
Install following dependencies:
npm install react-aria-components tw-animate-css tailwindcss-react-aria-components class-variance-authority lucide-react clsx tailwind-merge motionAdd cn helper using clsx and twMerge for conditional class merging in Tailwind components.
TypeScript
JavaScript
Copy and paste the following code into your project.
TypeScript
JavaScript
npx @libravelui@latest add skeletonAnatomy
import { Skeleton } from "@/components/ui/core/skeleton";<Skeleton className="h-12 w-12 rounded-full" />
<SkeletonText lines={5} />Another Example
Lines
You can use SkeletonText to make multiple pulsing lines as a loading placeholder.
Props
Loading types…