Laravel Reading Shell Component
ProThe frame for a long read: progress, table of contents and the article.
A Reading Shell built for the TALL stack — Blade, Livewire 3 & 4, Alpine.js and Tailwind CSS 4.
Server-rendered by default and dark-mode ready. Aura's solid-background and border colours are
contrast-tested against WCAG 2.1 AA/UI in CI, in both themes —
see what's covered.
Drop it in with a single Blade tag:
<x-aura::reading-shell>
Installation
composer require bluestarsystem/aura-uiThe Reading Shell is part of Aura Pro, installed via your private Composer (Satis) access after purchase. See pricing →
Usage
<x-aura::reading-shell content-id="article">
<x-aura::reading-progress />
<div class="grid gap-10 lg:grid-cols-[16rem_1fr]">
<x-aura::reading-toc :items="$headings" />
<main id="article" class="aura-prose">
{!! $html !!}
</main>
</div>
</x-aura::reading-shell>See the full API, props and live examples in the Reading Shell documentation.
Overview
<x-aura::reading-shell> holds the other reading components together. It tracks the
scroll position, works out which heading you are in, and provides the jump used by the
table of contents.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title |
string|null |
null |
A name for the whole reading area. |
contentId |
string |
'reading-content' |
The element whose scroll is measured. |
See more examples and every variant in the Reading Shell documentation.