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
NameTypeDefaultDetails
classNamestring' '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;