Laravel Stats Card Component

Free · MIT

A compact card component for displaying key metrics with optional change indicators and icons, ideal for dashboards.

A Stats Card 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::stats-card>

Try it live in the docs Install free

Installation

composer require bluestarsystem/aura-ui

Usage

<x-aura::stats-card title="Total Users" value="1,234" />

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

Overview

The <x-aura::stats-card> component displays a single statistic in a card format, featuring a title, a prominent value, an optional change indicator (positive/negative/neutral), and an optional icon. When an href is provided, the entire card becomes a clickable link. This component is commonly used in dashboard layouts to present key performance indicators at a glance.

Props

Prop	Type	Default	Description
`title`	`string`	`''`	The label describing the metric (e.g., "Total Revenue").
`value`	`string`	`''`	The displayed metric value (e.g., "12,345" or "$9,800").
`change`	`string\|null`	`null`	Change indicator text (e.g., "+12%" or "-3.5%"). Hidden when null.
`changeType`	`string`	`'neutral'`	Determines the color and icon of the change indicator. Options: `positive`, `negative`, `neutral`.
`icon`	`string\|null`	`null`	Name of the Aura icon displayed on the right side of the card.
`href`	`string\|null`	`null`	When provided, the card renders as an `<a>` tag linking to this URL.