Laravel Skeleton Component

Free · MIT

A placeholder loading component that mimics content layout while data is being fetched.

A Skeleton built for the TALL stack — Blade, Livewire 3 & 4, Alpine.js and Tailwind CSS 4. Server-rendered by default, dark-mode ready, and WCAG-minded. Drop it in with a single Blade tag: <x-aura::skeleton>

Try it live in the docs Install free

Installation

composer require bluestarsystem/aura-ui

Usage

<x-aura::skeleton class="h-4 w-48" />

See the full API, props and live examples in the Skeleton documentation.

Overview

The <x-aura::skeleton> component renders an animated placeholder element used to indicate loading states. It provides a visual hint of the content structure before actual data appears, reducing perceived loading time and preventing layout shifts. The skeleton is hidden from assistive technologies with aria-hidden="true".

Props

Prop	Type	Default	Description
`rounded`	`string`	`'md'`	Border radius variant. Options: `none`, `sm`, `md`, `lg`, `full`.

The skeleton component relies on utility classes or inline styles for width and height rather than dedicated props. Pass Tailwind classes via the class attribute to control dimensions.

See more examples and every variant in the Skeleton documentation.

Laravel-native

No JavaScript framework. Pure Blade, Livewire & Alpine.

Dark mode & themeable

Tailwind 4 CSS variables and a visual Theme Studio.

Accessible

WCAG 2.1 AA-minded, keyboard and ARIA support.