Skeleton

The Skeleton component provides you with loading placeholders.

Live Examples

Live Example

☀️

Copy

View Code

import { Skeleton } from '@jarllyng/nostromo' export default function SkeletonExample() { return ( <div className="space-y-4"> <Skeleton className="h-4 w-[250px]" /> <Skeleton className="h-4 w-[200px]" /> <Skeleton className="h-4 w-[150px]" /> </div> )...

Import


import { Skeleton } from "@jarllyng/nostromo";
// or
import { Skeleton } from "@jarllyng/nostromo/skeleton";

Usage


import { Skeleton } from "@jarllyng/nostromo";
 
export default function Example() {
  return <Skeleton className="h-4 w-[250px]" />;
}

Card Skeleton

Live Example

☀️

Copy

View Code

import { Skeleton } from '@jarllyng/nostromo' export default function CardSkeleton() { return ( <div className="space-y-4"> <Skeleton className="h-4 w-[250px]" /> <Skeleton className="h-4 w-[200px]" /> <Skeleton className="h-4 w-[150px]" /> <Skeleton className="h-4 w-[100px]" /> </div>...

Props

Prop	Type	Default	Required	Description
`shape`	`"default" \| "circle" \| "square"`	`"default"`	No	Shape of the skeleton
`size`	`"sm" \| "default" \| "lg"`	`"default"`	No	Size of the skeleton
`width`	`string \| number`	`undefined`	No	Width of the skeleton
`height`	`string \| number`	`undefined`	No	Height of the skeleton
`lines`	`number`	`undefined`	No	Number of lines (for text skeleton)
`spacing`	`"none" \| "sm" \| "md" \| "lg"`	`"md"`	No	Spacing between lines
`loading`	`boolean`	`true`	No	Whether skeleton is in loading state
`className`	`string`	`undefined`	No	Additional CSS classes
`children`	`React.ReactNode`	`undefined`	No	Skeleton content

Standard HTML Props

The Skeleton component extends standard HTML div attributes (e.g., id, data-*, aria-*).