Laravel Description List Component
Free · MITKey-value pair display for structured data like details, metadata, and summaries.
A Description List 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::description-list>
Installation
composer require bluestarsystem/aura-uiUsage
<x-aura::description-list>
<x-aura::description-list.item label="Name" value="Jane Doe" />
<x-aura::description-list.item label="Email" value="[email protected]" />
</x-aura::description-list>See the full API, props and live examples in the Description List documentation.
Overview
The Description List component renders structured key-value data using semantic HTML <dl>, <dt>, and <dd> elements. It is ideal for displaying entity details, profile information, order summaries, or any data that follows a label-value pattern. Each item can use either a value prop or the default slot for rich content.
Use description lists for:
- Customer or user profiles
- Order and invoice details
- Settings summaries
- Metadata displays
Props
Description List
| Prop | Type | Default | Description |
|---|---|---|---|
| -- | -- | -- | The wrapper accepts no specific props. Pass classes via class attribute. |
Description List Item
| Prop | Type | Default | Description |
|---|---|---|---|
label |
string |
'' |
The key/term displayed as <dt> |
value |
string|null |
null |
The value displayed as <dd>. If null, the default slot is used. |
Slots
Description List
| Slot | Description |
|---|---|
| Default | Contains <x-aura::description-list.item> children |
Description List Item
| Slot | Description |
|---|---|
| Default | Rich content for the value. Used when value prop is null. |
See more examples and every variant in the Description List documentation.