Docs
Skeleton

Skeleton

Use to show a placeholder while content is loading.

Installation

Copy and paste the following code into your project.

import clsx from 'clsx';
import { HTMLAttributes } from 'react';
import styles from './styles.module.scss';
 
function Skeleton({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
    return <div className={clsx(styles.skelton, className)} {...props} />;
}
 
export { Skeleton };

Update the import paths to match your project setup.

Usage

import { Skeleton } from '@/components/ui/skeleton';
<Skeleton className='w-[100px] h-[20px] rounded-full' />

Examples

Card