Skeleton

Lockness UI Component

LLM DOCS:VIEW

DOCUMENTATION

Skeleton

Animated pulse placeholder component for content loading states. Provides multiple preset variants for common UI patterns.

Installation

bash

deno run -A jsr:@lockness/ui add skeleton

Usage

tsx

import { Skeleton } from '@lockness/ui/components'

// Default skeleton with custom dimensions
<Skeleton class="h-12 w-12" />

// Text skeleton
<Skeleton variant="text" />

// Multiple lines of text
<Skeleton variant="text" lines={3} />

// Heading skeleton
<Skeleton variant="heading" />

// Avatar skeleton
<Skeleton variant="avatar" />

// Button skeleton
<Skeleton variant="button" />

// Image skeleton
<Skeleton variant="image" />

// Card skeleton
<Skeleton variant="card" />

// Without animation
<Skeleton variant="text" animate={false} />

Props

Prop	Type	Default	Description
`variant`	`SkeletonVariant`	`'default'`	Skeleton variant for common shapes
`lines`	`number`	`1`	Number of lines (for text variant)
`animate`	`boolean`	`true`	Whether to animate the skeleton
`class`	`string`	-	Additional CSS class names
`id`	`string`	-	Element id attribute

Variants

Variant	Description	Dimensions
`default`	Base skeleton, requires custom dimensions	Set via `class`
`text`	Single or multiple text lines	Full width, h-4 per line
`heading`	Heading placeholder	75% width, h-8
`avatar`	Circular avatar placeholder	48x48px, rounded-full
`button`	Button placeholder	96x40px
`image`	Image placeholder	Full width, h-48
`card`	Complete card with header, image, and text	Full card layout

CSS Variables

Variable	Description
`--skeleton-background`	Background color of skeleton elements
`--skeleton-border-radius`	Border radius of skeleton elements
`--border`	Border color (for card variant)

Examples

Loading Card

tsx

<div class='flex items-center space-x-4'>
    <Skeleton variant='avatar' />
    <div class='space-y-2'>
        <Skeleton variant='heading' class='w-62.5' />
        <Skeleton variant='text' class='w-50' />
    </div>
</div>

Loading Article

tsx

<div class='space-y-4'>
    <Skeleton variant='heading' />
    <Skeleton variant='text' lines={4} />
    <Skeleton variant='image' />
    <Skeleton variant='text' lines={3} />
</div>

Loading Table Row

tsx

<div class='flex space-x-4'>
    <Skeleton class='h-4 w-25' />
    <Skeleton class='h-4 w-37.5' />
    <Skeleton class='h-4 w-20' />
</div>

Features

Animated pulse - Smooth CSS animation for loading indication
Multiple variants - Pre-built shapes for common UI patterns
Multi-line text - Support for multiple text lines with varying widths
Disable animation - Option to turn off animation
Themeable - Uses CSS variables for styling

DEFAULT SKELETON

tsx

import { Skeleton } from '@lockness/ui/components'

<Skeleton class="h-12 w-48" />

TEXT SKELETON

Single line:

Multiple lines:

tsx

import { Skeleton, SkeletonText } from '@lockness/ui/components'

// Single line
<Skeleton variant="text" />

// Multiple lines
<SkeletonText lines={3} />

// Or use the variant prop
<Skeleton variant="text" lines={3} />

HEADING SKELETON

tsx

<Skeleton variant="heading" />

AVATAR SKELETON

tsx

import { SkeletonAvatar } from '@lockness/ui/components'

<div class="flex items-center space-x-4">
    <SkeletonAvatar />
    <div class="space-y-2 flex-1">
        <Skeleton variant="text" />
        <Skeleton variant="text" class="w-4/5" />
    </div>
</div>

BUTTON SKELETON

tsx

<Skeleton variant="button" />
<Skeleton variant="button" class="w-32" />
<Skeleton variant="button" class="w-full" />

IMAGE SKELETON

tsx

<Skeleton variant="image" />

CARD SKELETON

tsx

import { SkeletonCard } from '@lockness/ui/components'

<div class="grid md:grid-cols-3 gap-4">
    <SkeletonCard />
    <SkeletonCard />
    <SkeletonCard />
</div>

WITHOUT ANIMATION

tsx

<Skeleton variant="avatar" animate={false} />
<Skeleton variant="text" animate={false} />

Edit this page