Skeleton

Animated loading placeholders for content.

Import

import { Skeleton } from 'asterui'

Examples

Basic

Simple skeleton shapes with different dimensions.

</>

import { Skeleton, Space } from 'asterui'

function App() {
  return (
      <Space>
        <Skeleton className="h-32 w-full" />
        <Skeleton className="h-4 w-28" />
        <Skeleton className="h-4 w-full" />
        <Skeleton className="h-4 w-full" />
      </Space>
    )
}

export default App

Circle

Circular skeleton for avatars.

</>

import { Skeleton } from 'asterui'

function App() {
  return (
      <div className="flex gap-4">
        <Skeleton circle className="h-12 w-12" />
        <Skeleton circle className="h-16 w-16" />
        <Skeleton circle className="h-20 w-20" />
      </div>
    )
}

export default App

Text Variant

Skeleton that animates text color instead of background.

</>

Loading heading...

Loading paragraph text that will be replaced with actual content...

import { Skeleton, Space } from 'asterui'

function App() {
  return (
      <Space size="xs">
        <Skeleton variant="text" className="text-2xl">
          Loading heading...
        </Skeleton>
        <Skeleton variant="text">
          Loading paragraph text that will be replaced with actual content...
        </Skeleton>
      </Space>
    )
}

export default App

Width and Height Props

Use width and height props for precise sizing.

</>

import { Skeleton } from 'asterui'

function App() {
  return (
      <div className="flex gap-4">
        <Skeleton width={100} height={100} />
        <Skeleton width="200px" height="100px" />
        <Skeleton width="50%" height={100} />
      </div>
    )
}

export default App

Avatar with Text

Common pattern for user profiles.

</>

import { Skeleton, Space } from 'asterui'

function App() {
  return (
      <div className="flex gap-4">
        <Skeleton circle className="h-12 w-12 shrink-0" />
        <Space size="xs" className="flex-1">
          <Skeleton className="h-4 w-20" />
          <Skeleton className="h-4 w-full" />
        </Space>
      </div>
    )
}

export default App

Card Skeleton

Loading placeholder for card content.

</>

import { Skeleton } from 'asterui'

function App() {
  return (
      <div className="card bg-base-100 border border-base-300">
        <div className="card-body">
          <Skeleton className="h-48 w-full mb-4" />
          <Skeleton className="h-6 w-3/4 mb-2" />
          <Skeleton className="h-4 w-full mb-2" />
          <Skeleton className="h-4 w-full mb-2" />
          <Skeleton className="h-4 w-2/3" />
        </div>
      </div>
    )
}

export default App

List Skeleton

Loading placeholder for list items.

</>

import { Skeleton, Space } from 'asterui'

function App() {
  return (
      <Space>
        {[1, 2, 3].map((i) => (
          <div key={i} className="flex gap-4">
            <Skeleton circle className="h-12 w-12 shrink-0" />
            <Space size="xs" className="flex-1">
              <Skeleton className="h-4 w-1/4" />
              <Skeleton className="h-4 w-full" />
            </Space>
          </div>
        ))}
      </Space>
    )
}

export default App

Complex Layout

Skeleton for more complex content layouts.

</>

import { Skeleton } from 'asterui'

function App() {
  return (
      <div className="space-y-6">
        <div className="flex gap-4">
          <Skeleton circle className="h-16 w-16 shrink-0" />
          <div className="flex-1 space-y-2">
            <Skeleton className="h-6 w-1/3" />
            <Skeleton className="h-4 w-full" />
            <Skeleton className="h-4 w-5/6" />
          </div>
        </div>
        <div className="grid grid-cols-3 gap-4">
          <Skeleton className="h-32" />
          <Skeleton className="h-32" />
          <Skeleton className="h-32" />
        </div>
      </div>
    )
}

export default App

API

Skeleton

Property	Description	Type	Default
width	Width in pixels or CSS string	string | number	-
height	Height in pixels or CSS string	string | number	-
circle	Make skeleton circular	boolean	false
variant	Skeleton variant	'default' | 'text'	'default'
className	Additional CSS classes	string	-
children	Content (for text variant)	React.ReactNode	-

Accessibility

• Skeleton is hidden from screen readers by default
• Use with loading states to inform users content is loading
• Match skeleton shapes to actual content layout
• Combine with ARIA live regions for loading announcements