Stats card
A few numbers, one leading. The first item is the hero: trend draws a sparkline behind it, and pct a meter.
Variations
Section titled “Variations”5 samples, each at every size that draws differently, then in chat, in the light theme, and as a ring where it has a headline.
Tall draws the same as medium, so it isn't shown. Only the empty space changes.
stats · pie
Section titled “stats · pie”
Small draws the same as medium. Wide draws the same as medium. Tall draws the same as medium, so they aren't shown. Only the empty space changes.
stats · warning
Section titled “stats · warning”
Small draws the same as medium. Wide draws the same as medium. Tall draws the same as medium, so they aren't shown. Only the empty space changes.
buttons
Section titled “buttons”
Small draws the same as medium. Wide draws the same as medium, so they aren't shown. Only the empty space changes.
stats · 2001 at
Section titled “stats · 2001 at”
Small draws the same as medium. Wide draws the same as medium. Tall draws the same as medium, so they aren't shown. Only the empty space changes.
Fields
Section titled “Fields”Every card also takes the fields all cards share.
| Field | Type | What it does |
|---|---|---|
type | 'stats' | |
items | StatItem[] | |
pie? | { label: string; value: number; tone?: Tone }[] | |
pieCenter? | string |
pie: parts of a whole, drawn as a ring instead
StatItem
Section titled “StatItem”| Field | Type | What it does |
|---|---|---|
label | string | |
value | string | number | |
unit? | string | |
sub? | string | secondary line, e.g. “of 123 GB” |
tone? | Tone | |
pct? | number | 0..1 → a slim meter under the value |
trend? | number[] | recent values → sparkline |
Used by
Section titled “Used by”AdGuard Home · Local AI · APC UPS · Custom API · Arcane · Argo CD · Atsumeru · Audiobookshelf · Authelia · authentik · autobrr · Azure DevOps · Backrest · Bazarr · BookLore · BookOrbit · BookStack · Caddy · Calibre-Web · changedetection.io · Channels DVR · Checkmk · World clock · Cloudflare Tunnel · CoinMarketCap · CrowdSec · Deluge · DeveLanCacheUI · DiskStation · Dispatcharr · Dockhand · Download Station · Duplicati · Emby · ESPHome · evcc · File Browser · FileFlows · Firefly III · Flood · Forgejo · FreshRSS · Frigate · Ghostfolio · Gitea · GitLab · Glances · Gluetun · Gotify · Grafana · HDHomeRun · Headscale · Healthchecks · Homebox · Homebridge · Jackett · Jellyfin · Jellystat · Kavita · Komga · Komodo · Kopia · Kubernetes · Lidarr · Linkwarden · LubeLogger · Mailcow · Maintainerr · Markets · Mastodon · Mealie · Medusa · MikroTik · Minecraft · Miniflux · MinIO · Moonraker · Mylar3 · MySpeed · n8n · Navidrome · NetAlertX · NetBird · Netdata · Nextcloud · NextDNS · Nginx Proxy Manager · ntfy · NZBGet · OctoPrint · Ombi · Open WebUI · OpenDTU · OpenMediaVault · OpenWrt · OPNsense · Outline · Pangolin · PeaNUT · pfSense · PhotoPrism · Plant-it · Plex · Portainer · Portainer · Prometheus · Prometheus · Prowlarr · Proxmox · Proxmox Backup Server · Pterodactyl · Pulse · pyLoad · qui · Readarr · ruTorrent · SABnzbd · slskd · SparkyFitness · Speedtest Tracker · Spoolman · Sportarr · Stash · Stirling-PDF · Suwayomi · SWAG · Syncthing · Syncthing Relay · Tailscale · Tandoor · Plex (Tautulli) · Tdarr · Technitium DNS · Tracearr · Traefik · Transmission · Trilium · TrueNAS · Tube Archivist · UniFi · UniFi Drive · Unmanic · Unraid · UptimeRobot · Vaultwarden · Vikunja · Wallos · Watchtower · wg-easy · What’s Up Docker · xTeVe · Your Spotify · Zabbix