Laravel Row Component

Free · MIT

Horizontal flow with consistent spacing, alignment and wrapping.

A Row 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::row>

Try it live in the docs Install free

Installation

composer require bluestarsystem/aura-ui

Usage

<x-aura::row justify="between">
    <x-aura::heading :level="2">Orders</x-aura::heading>
    <x-aura::button variant="primary">New order</x-aura::button>
</x-aura::row>

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

Overview

<x-aura::row> is the horizontal counterpart to Stack: toolbars, button groups, a label beside its value.

It wraps by default, so a row of buttons folds onto a second line on a narrow screen instead of overflowing.

Props

Prop	Type	Default	Description
`gap`	`string`	`'md'`	`none`, `xs`, `sm`, `md`, `lg`, `xl`.
`align`	`string`	`'center'`	`start`, `center`, `end`, `baseline`, `stretch`.
`justify`	`string\|null`	`null`	`start`, `center`, `end`, `between`, `around`.
`wrap`	`bool`	`true`	Allow items to wrap onto a new line.
`as`	`string`	`'div'`	Element to render.