Skip to content

Laravel Reveal Component

Free · MIT

Content that eases in as it scrolls into view — without hiding from assistive technology.

A Reveal 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::reveal>

Installation

composer require bluestarsystem/aura-ui

Usage

<x-aura::reveal direction="up" :delay="100">
    <x-aura::card>…</x-aura::card>
</x-aura::reveal>

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

Overview

<x-aura::reveal> fades and lifts its content the first time it becomes visible.

Props

Prop Type Default Description
direction string 'up' up, down, left, right, none.
delay int 0 Milliseconds before it starts.
duration int 600 Milliseconds.
once bool true Reveal once, or again each time it re-enters.
as string 'div' div, section, article, li, span.

See more examples and every variant in the Reveal documentation.

Laravel-native
No JavaScript framework. Pure Blade, Livewire & Alpine.
Dark mode & themeable
Tailwind 4 CSS variables and a visual Theme Studio.
Accessible
Colour contrast tested against WCAG 2.1 AA/UI in CI; ARIA attributes on select components.