Skeleton
A loading state skeleton for your components.
Skeleton renders a placeholder box with the animate-skeleton treatment and
marks itself with data-slot.
Installation
npx shadcn@latest add @kosori/skeletonExample
skeleton-example.tsx
import { Skeleton } from '@/components/ui/skeleton';
const SkeletonExample = () => (
<div className='flex w-full max-w-92 items-center gap-4'>
<Skeleton className='size-10 rounded-full' />
<div className='flex flex-1 flex-col'>
<Skeleton className='my-0.5 h-4 max-w-54' />
<div className='flex max-w-54 items-center gap-1'>
<Skeleton className='my-0.5 h-4 w-1/2' />
<Skeleton className='my-0.5 h-4 w-1/2' />
</div>
</div>
<Skeleton className='h-6 w-17' />
</div>
);
export default SkeletonExample;
Usage
import { Skeleton } from '@/components/ui/skeleton';
const SkeletonDemo = () => <Skeleton className='h-4 w-48' />;