Skip to content
GaudiGaudi Design System home

Search documentation

Search every page, heading and paragraph.

Stat Cards

Metric cards on the Core Card: a label, value and change badge with optional icon tile, actions, description, footer and a segmented meter.

Blocks@gaudi/design-system/blocks/StatCardView in StorybookSource

Installation

pnpm add github:ahmadassaf/design-system

Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.

import StatCards from '@gaudi/design-system/blocks/StatCard';

Copy an example into your project with the shadcn CLI: npx shadcn@latest add https://design.gaudi.site/r/stat-card-balance.json.

Usage

import { StatCard } from '@gaudi/design-system/blocks/StatCard';
<StatCard label='Subscribers' value='4,180' delta='+8.4%' deltaDirection='up' deltaTone='success' />

Examples

Balance

Storybook

Breakdowns

Storybook

Hero metrics

Storybook

KPI overview

Storybook

Leads with a range

Storybook

Quota and progress

Storybook

Revenue breakdown

Storybook

Support metrics

Storybook

Team performance

Storybook

API

14 props

Accessibility

Change badges announce their direction (Up, Down, Unchanged) and never rely on colour alone; meters are decorative bars backed by a text legend.

Notes

  • Values are prepared by the host; StatCard never formats or infers data.
CardCard frames reusable content with title, subtitle, and optional children.8 examplesIconStatic and interactive artwork from Gaudi’s centralized icon registry. AnimatedIcon adds opt-in motion with shared size and color tokens, a searchable catalogue, and host-controlled activation.5 examplesDropdownMenuAction menus with keyboard navigation, checkbox choices and destructive actions.8 examplesToggleGroupSingle or multiple pressed choices for view modes and compact formatting controls.6 examplesPillPill renders compact category and status labels.4 examplesProgressDeterminate and indeterminate progress with a readable task label.4 examples