Skip to content

No results for

↑ ↓ navigate ↵ open Esc close 
php artisan aura:add reading-shell

Copies the component source into resources/views/components/aura/. Run php artisan aura:init first if you haven't already. See the CLI guide for all options.

composer require bluestarsystem/aura-ui
php artisan aura:install

Full installation instructions in the Installation guide.

Pro Component — This component requires an Aura UI Pro license.

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.

Basic 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>

Give your headings real id attributes — the shell watches h2[id] and h3[id].

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.

Accessibility

  • Jumping to a heading moves focus as well as the viewport. Scrolling alone leaves the keyboard where it was, so the next Tab lands somewhere off screen.
  • The jump honours prefers-reduced-motion.
  • Use real landmarks inside it: <main> for the article, <aside> for what surrounds it. That is what makes a screen reader’s existing shortcuts work on the page.