Statistic

<loomi-statistic> — a dashboard stat showing a number and label, with optional currency, an icon, and a loading state. Takes up the full width of its parent.

npm install @loomidev/statistic lit

import "@loomidev/statistic";

Basic Usage

Numbers render as-is — format thousand separators and decimals yourself before setting number.

<loomi-statistic number="34,500,100" label="Total payments"></loomi-statistic>

Move the label below the number instead of above it:

<loomi-statistic label-position="bottom" number="34,500,100" label="Total payments"></loomi-statistic>

With Icons

Pass any markup into the icon slot — usually a <loomi-icon> on a colored background. Icons sit on the left by default; flip them with icon-position="right".

<loomi-statistic number="34,500,100" label="Total payments">
  <loomi-icon slot="icon" name="banknotes" style="background: #15803d; color: white; border-radius: 9999px; padding: 0.5rem"></loomi-icon>
</loomi-statistic>

<loomi-statistic icon-position="right" number="1,204" label="Active users">
  <loomi-icon slot="icon" name="users" style="background: #f97316; color: white; border-radius: 9999px; padding: 0.5rem"></loomi-icon>
</loomi-statistic>

You can also style the icon from the statistic host with icon-color and icon-size.

<loomi-statistic number="1,204" label="Active users" icon-color="#15803d" icon-size="2rem">
  <loomi-icon slot="icon" name="users"></loomi-icon>
</loomi-statistic>

With Currency

<loomi-statistic currency="GHS" number="34,500,100" label="Total payments"></loomi-statistic>

<!-- currency on the right of the number instead -->
<loomi-statistic currency="GHS" currency-position="right" number="34,500,100" label="Total payments"></loomi-statistic>

The currency symbol renders at a smaller font size than the number itself.

Loading State

Show a spinner in place of the number while the real value is still loading — e.g. while waiting on an API response.

<loomi-statistic label="Total payments" show-spinner></loomi-statistic>

const el = document.querySelector("loomi-statistic");
const total = await fetchTotalPayments();
el.number = total.toLocaleString();
el.showSpinner = false;

Card Styling

<loomi-statistic> renders as a floating glass surface by default — a translucent, backdrop-blurred background, a hairline border, and a soft drop shadow — the same frame treatment as <loomi-card> and the “Sales Overview” card on the LoomiUI homepage. Turn either off with has-border / has-shadow; turning off has-shadow also drops the translucency and blur, since those are part of the same floating-card material.

<loomi-statistic number="92" label="Score" has-shadow="false" has-border="false"></loomi-statistic>
<loomi-statistic number="92" label="Score" radius="large"></loomi-statistic>

Clickable Statistics

<loomi-statistic number="34,500" label="Total payments" url="/reports/payments"></loomi-statistic>

Accessibility

For the library-wide baseline, see Foundations — Accessibility.

Responsive behavior

For the shared container and viewport rules, see Foundations — Responsive behavior.

Dark mode

For theme activation, token overrides, and contrast guidance, see Foundations — Dark mode.

Attributes

Attribute	Default	Description
label	(blank)	Description text.
number	(blank)	The value to display (format it yourself).
label-position	top	top | bottom
currency	(blank)	Currency symbol shown beside the number.
currency-position	left	left | right
icon-position	left	left | right
icon-color	(blank)	CSS color applied to the icon slot wrapper.
icon-size	(blank)	CSS size applied to slotted icons.
has-shadow	true	Show a drop shadow. (boolean)
has-border	true	Show a border. (boolean)
radius	medium	none | small | medium | large | xl. Presets over --loomi-panel-radius; medium follows the theme, the rest override it.
show-spinner	false	Show a loading spinner instead of the number. (boolean)
url	(blank)	Navigate on click.

Slots

Slot	Description
icon	Custom icon content.

Full Example

<loomi-statistic
  label="Total payments"
  label-position="bottom"
  number="34,500,100"
  currency="XOF"
  currency-position="right"
  icon-position="right"
  has-shadow="false"
  has-border="false"
>
  <loomi-icon slot="icon" name="banknotes"></loomi-icon>
</loomi-statistic>

Framework integration

<loomi-statistic> is a standard custom element, so the browser can use it in plain HTML, Blade, React, Vue, Angular, Svelte, Astro, and most other frameworks. The important beginner rule is: install the package, import it once before the tag is rendered, then write the Loomi tag in your template.

Where to run commands

Run install commands from the app where you want to use this component. That means the folder that contains that app’s package.json. Do not run these install commands from packages/statistic unless you are editing LoomiUI itself.

cd /path/to/your-app
npm install @loomidev/statistic lit

If you are contributing to LoomiUI itself, first move to the top-level components folder. That is where the main package.json for all packages lives, and pnpm --filter ... commands should be run from there:

cd /path/to/your-copy-of-loomiui/components
pnpm --filter @loomidev/statistic build
pnpm --filter @loomidev/statistic typecheck

Choose your framework

Use the CDN version for prototypes, documentation pages, or a quick reproduction. The import map tells the browser where to find Lit, which Loomi components use internally.

<script type="importmap">
  { "imports": { "lit": "https://esm.sh/lit@3.3.3", "lit/": "https://esm.sh/lit@3.3.3/" } }
</script>
<script type="module" src="https://esm.sh/@loomidev/statistic"></script>

<loomi-statistic label="Revenue" number="12450" currency="GHS" has-border></loomi-statistic>

In Vite, Webpack, Parcel, Rollup, or a framework build pipeline, install the package and import it once in your main app JavaScript file. After that, you can use the Loomi tag anywhere in your app.

import "@loomidev/statistic";

Run the install command from your Laravel project root, then import the component in resources/js/app.js. If your project uses Laravel Vite, npm run dev and npm run build should also be run from the Laravel project root.

cd /path/to/your-laravel-app
npm install @loomidev/statistic lit
npm run dev

resources/js/app.js

import "@loomidev/statistic";

<loomi-statistic label="Revenue" number="12450" currency="GHS" has-border></loomi-statistic>

React can render Loomi tags directly. If you are on React 18, or if you need to pass arrays, objects, or functions, use a ref and assign those values after the component mounts.

import "@loomidev/statistic";

export function LoomiExample() {
  return (
    <loomi-statistic label="Revenue" number="12450" currency="GHS" has-border></loomi-statistic>
  );
}

If TypeScript does not recognize the Loomi tag in JSX, add it to your app’s JSX type declarations.

Import the package in the component that uses it, or once in your main Vue file. Vue templates can use Loomi tags directly. For arrays, objects, or functions, pass the value as a JavaScript property instead of as plain text.

<script setup>
import "@loomidev/statistic";
</script>

<template>
  <loomi-statistic label="Revenue" number="12450" currency="GHS" has-border></loomi-statistic>
</template>

If Vue warns that the tag is an unknown component, configure compilerOptions.isCustomElement for tags that start with loomi- in your Vite or Vue config.

Import the package once and tell Angular to allow custom HTML tags with CUSTOM_ELEMENTS_SCHEMA. For NgModule apps, add the schema to the module instead of the standalone component.

app.component.ts

import { CUSTOM_ELEMENTS_SCHEMA, Component } from "@angular/core";
import "@loomidev/statistic";

@Component({
  selector: "app-root",
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <loomi-statistic label="Revenue" number="12450" currency="GHS" has-border></loomi-statistic>
  `,
})
export class AppComponent {}

Svelte can import the package inside a component script. Astro can import it in the frontmatter of the page or layout where the tag appears.

<script>
  import "@loomidev/statistic";
</script>

<loomi-statistic label="Revenue" number="12450" currency="GHS" has-border></loomi-statistic>

---
import "@loomidev/statistic";
---

<loomi-statistic label="Revenue" number="12450" currency="GHS" has-border></loomi-statistic>

Server-side rendering notes

Frameworks such as Next.js, Nuxt, SvelteKit, and Astro sometimes render HTML on the server before browser-only code runs. If your framework complains, move the Loomi import to client-side code. In Next.js, that usually means a component with "use client"; in Nuxt, it often means a .client.ts plugin.

Dependencies

• @loomidev/card
• @loomidev/core