Laravel Data Card Component

Free · MIT

A single metric with its change, an optional icon and a sparkline.

A Data Card 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::data-card>

Try it live in the docs Install free

Installation

composer require bluestarsystem/aura-ui

Usage

<x-aura::data-card title="Revenue" value="€21,929" change="+12.4%" change-type="positive" />

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

Overview

<x-aura::data-card> presents one number and the context that makes it mean something: what it measures, how it moved, and its recent shape. Use it for the row of headline figures at the top of a dashboard.

For several metrics side by side, see Stats Card.

Props

Prop	Type	Default	Description
`title`	`string`	`''`	What the number measures.
`value`	`string`	`''`	The figure itself, already formatted.
`change`	`string\|null`	`null`	The movement, e.g. `+12.4%`.
`changeType`	`string`	`'neutral'`	`positive`, `negative` or `neutral` — drives the colour and the direction indicator.
`icon`	`string\|null`	`null`	Icon name shown beside the title.
`sparkline`	`array\|null`	`null`	Numbers to draw as a trend line.
`href`	`string\|null`	`null`	Makes the whole card a link to the detail view.