Get Started
Components
Dev Tools
More Guides
Skeleton
A Skeleton component is a placeholder UI element that represents the layout of content before it loads. It typically features a grey or light-colored shape mimicking the structure of the actual content (such as text blocks, images, or buttons) to indicate that loading is in progress. Skeleton components enhance user experience by providing a visual cue that content is being fetched, reducing perceived loading times and preventing layout shifts.
# Demo
# Attributes
Name | Type | Default | Details |
---|---|---|---|
className | string | ' ' | You can customise by passing tailwind classes. |
# Usage
import { NSkeleton } from 'nayan';
const Skeleton = () => {
return (
<div className="flex items-center space-x-4">
<NSkeleton className="h-12 w-12 rounded-full" />
<div className="space-y-2">
<NSkeleton className="h-4 w-[250px]" />
<NSkeleton className="h-4 w-[180px]" />
</div>
</div>
);
};
export default Skeleton;
# Tags