Skeleton

free

Skeleton holds layout space while data or media is still loading.

import Skeleton from '@/components/ui/skeleton';

export default function UsageDemo() {
  return (

Installation

Add this component with the NateUI CLI.

npx nateui@latest add Skeleton

pnpm dlx nateui@latest add Skeleton

yarn dlx nateui@latest add Skeleton

import Skeleton from '@/components/ui/skeleton';

export default function VariantDemo() {
  return (

import Skeleton from '@/components/ui/skeleton';

export default function SizeDemo() {
  return (

Animated

Static

import Skeleton from '@/components/ui/skeleton';

export default function AnimationDemo() {
  return (

Skeleton renders a tokenized placeholder element. Compose several skeletons together to preserve the shape of the content that is loading.

Prop	Description	Type	Default
`animation`	Whether the placeholder pulses.	`boolean`	`true`
`asElement`	Element or component used for the rendered node.	`ElementType`	`'span'`
`className`	Class names applied to the skeleton element.	`string`	-
`height`	Height as pixels or a CSS size.	`string \| number`	-
`ref`	Ref forwarded to the rendered element.	`Ref<ElementType>`	-
`style`	Inline styles applied to the rendered element.	`CSSProperties`	-
`variant`	Shape of the placeholder.	`SkeletonVariant`	`'block'`
`width`	Width as pixels or a CSS size.	`string \| number`	-
`...nativeProps`	Native props for the rendered element.	`ComponentProps<ElementType>`	-

type SkeletonVariant = 'block' | 'circle';