Skip to content

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.

Basic Usage

Total Users

1,234

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

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.

Variants / Examples

Dashboard Stats Row

Total Revenue

$48,200

+12.5%

New Customers

320

+8.2%

Pending Orders

45

-3.1%

Avg. Response Time

1.2s

0% 
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
    <x-aura::stats-card
        title="Total Revenue"
        value="$48,200"
        change="+12.5%"
        changeType="positive"
        icon="dollar-sign"
    />
    <x-aura::stats-card
        title="New Customers"
        value="320"
        change="+8.2%"
        changeType="positive"
        icon="users"
    />
    <x-aura::stats-card
        title="Pending Orders"
        value="45"
        change="-3.1%"
        changeType="negative"
        icon="shopping-cart"
    />
    <x-aura::stats-card
        title="Avg. Response Time"
        value="1.2s"
        change="0%"
        changeType="neutral"
        icon="clock"
    />
</div>

Clickable Stats Card

Active Subscriptions

892

+5.3% 
<x-aura::stats-card
    title="Active Subscriptions"
    value="892"
    change="+5.3%"
    changeType="positive"
    icon="credit-card"
    href="/admin/subscriptions"
/>

Without Change Indicator

Total Products

156

<x-aura::stats-card
    title="Total Products"
    value="156"
    icon="package"
/>

Negative Change

Bounce Rate

42.3%

+7.8% 
<x-aura::stats-card
    title="Bounce Rate"
    value="42.3%"
    change="+7.8%"
    changeType="negative"
    icon="trending-down"
/>

Dynamic Data with Livewire

<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
    <x-aura::stats-card
        title="Today's Sales"
        :value="'$' . number_format($todaySales, 2)"
        :change="$salesChangePercent . '%'"
        :changeType="$salesChangePercent >= 0 ? 'positive' : 'negative'"
        icon="dollar-sign"
    />
    <x-aura::stats-card
        title="New Users"
        :value="(string) $newUsersCount"
        :change="$usersChange"
        :changeType="$usersChangeType"
        icon="user-plus"
    />
    <x-aura::stats-card
        title="Open Tickets"
        :value="(string) $openTickets"
        icon="inbox"
    />
</div>

Accessibility

  • When href is provided, the card renders as an <a> element, making it natively keyboard-navigable and focusable.
  • The card structure uses semantic text elements: the title in a <p> tag and the value in a separate <p> tag, allowing screen readers to parse the content logically.
  • Change indicator icons (trending-up, trending-down) provide a visual cue that complements the text, ensuring the meaning is conveyed even without color perception.