Logo
Neura
Back to Home

Getting Started

Introduction
Installation
Usage
Dark Mode
Theming
Layouts

Components

Atoms

Form Elements

Field
Label
Description
Fieldset
Form
Input
Textarea
Select
Autocomplete
Calendar
Date Picker
Rich Editor
Checkbox
Radio
Switch
OTP
Dropzone
Tags Input

Layout

Container
Grid
Stack
Box
Card
Divider
Spacer

Navigation

Navlist
Link

Feedback

Alert
Callout
Toast
Dialog
Modal
Popover

Content

Text
Heading
Brand
Lottie
Skeleton

Data Display

Table
Chart
Kanban
Image Gallery
Tabs
Accordion
Badge
Avatar

Actions

Button
Command Palette
Composer
Context Menu
Dropdown

Utilities

Theme Switcher
Wizard

Skeleton

Dynamic loading placeholder component with multiple variants and customizable sizes

Basic Usage

A simple skeleton with default text variant: 
<neura::skeleton />
<neura::skeleton width="3/4" />
<neura::skeleton width="1/2" />

Variants

Different variants for various content types:
Text
Heading
Title
Paragraph
Avatar
Button
Card
Image
Badge 
<neura::skeleton variant="text" />
<neura::skeleton variant="heading" width="1/2" />
<neura::skeleton variant="title" width="1/3" />
<neura::skeleton variant="paragraph" />
<neura::skeleton variant="avatar" height="md" />
<neura::skeleton variant="button" width="sm" />
<neura::skeleton variant="card" width="full" height="xl" />
<neura::skeleton variant="image" width="full" height="xl" />
<neura::skeleton variant="badge" width="sm" />

Width Options

Control the width using predefined sizes or custom values: 
<neura::skeleton width="full" />
<neura::skeleton width="3/4" />
<neura::skeleton width="1/2" />
<neura::skeleton width="1/3" />
<neura::skeleton width="1/4" />
<neura::skeleton width="xs" />
<neura::skeleton width="sm" />
<neura::skeleton width="md" />
<neura::skeleton width="lg" />
<neura::skeleton width="xl" />
<neura::skeleton width="200px" />

Height Options

Control the height using predefined sizes or custom values: 
<neura::skeleton height="xs" width="full" />
<neura::skeleton height="sm" width="full" />
<neura::skeleton height="md" width="full" />
<neura::skeleton height="lg" width="full" />
<neura::skeleton height="xl" width="full" />
<neura::skeleton height="2xl" width="full" />
<neura::skeleton height="100px" width="full" />

Rounded Corners

Customize the border radius: 
<neura::skeleton rounded="none" width="full" />
<neura::skeleton rounded="sm" width="full" />
<neura::skeleton rounded="md" width="full" />
<neura::skeleton rounded="lg" width="full" />
<neura::skeleton rounded="xl" width="full" />
<neura::skeleton rounded="full" width="md" height="md" />

Animation

Control the pulse animation:
Animated (default)
Static (no animation) 
<neura::skeleton width="full" />
<neura::skeleton width="full" :animate="false" />

Real-World Examples

Common skeleton loading patterns:

Card Skeleton 

<div class="space-y-4">
    <div class="flex items-center gap-4">
        <neura::skeleton variant="avatar" height="lg" />
        <div class="flex-1 space-y-2">
            <neura::skeleton variant="heading" width="1/3" />
            <neura::skeleton variant="text" width="1/2" />
        </div>
    </div>
    <neura::skeleton variant="paragraph" width="full" />
    <neura::skeleton variant="paragraph" width="full" />
    <neura::skeleton variant="paragraph" width="3/4" />
    <div class="flex gap-2">
        <neura::skeleton variant="button" width="sm" />
        <neura::skeleton variant="button" width="sm" />
    </div>
</div>

List Skeleton 

<div class="space-y-4">
    <template x-for="i in 3" :key="i">
        <div class="flex items-center gap-4 pb-4 border-b">
            <neura::skeleton variant="avatar" height="md" />
            <div class="flex-1 space-y-2">
                <neura::skeleton variant="text" width="1/4" />
                <neura::skeleton variant="paragraph" width="1/3" />
            </div>
        </div>
    </template>
</div>

Table Skeleton 

<div class="space-y-3">
    <div class="grid grid-cols-4 gap-4">
        <neura::skeleton variant="heading" width="full" />
        <neura::skeleton variant="heading" width="full" />
        <neura::skeleton variant="heading" width="full" />
        <neura::skeleton variant="heading" width="full" />
    </div>
    <template x-for="i in 5" :key="i">
        <div class="grid grid-cols-4 gap-4">
            <neura::skeleton variant="text" width="full" />
            <neura::skeleton variant="text" width="full" />
            <neura::skeleton variant="text" width="full" />
            <neura::skeleton variant="text" width="full" />
        </div>
    </template>
</div>

Properties

Property Type Default Description
variant string text Skeleton variant: text, heading, title, paragraph, avatar, circle, button, card, image, badge
width string|null null Width: full, 3/4, 1/2, 1/3, 1/4, xs, sm, md, lg, xl, or custom value (e.g., "200px")
height string|null null Height: xs, sm, md, lg, xl, 2xl, or custom value (e.g., "100px")
rounded string|null null Border radius: none, sm, md, lg, xl, full
animate boolean true Enable or disable the pulse animation

Variant Details

Variant Default Height Description
text h-4 Standard text line
heading h-6 Heading text
title h-8 Large title
paragraph h-3 Paragraph line
avatar w-12 h-12 Circular avatar placeholder
circle w-12 h-12 Circular shape
button h-10 Button placeholder with rounded corners
card - Card container with rounded corners
image - Image placeholder with rounded corners
badge h-6 Circular badge placeholder

Best Practices

Match skeleton to actual content
Use skeleton variants that closely match the structure and size of the content being loaded
Use appropriate variants
Choose variants that match the content type (avatar for user images, text for paragraphs, etc.)
Keep skeletons simple
Don't overcomplicate skeleton layouts. Simple placeholders are more effective
Use animation appropriately
The pulse animation helps indicate loading state, but can be disabled for static placeholders
Combine multiple skeletons
Use multiple skeleton components together to create complex loading states that match your UI structure