Statistics Cards
The Statistics Cards preset enables at-a-glance metrics display. Ideal for dashboards and analytics, each card showcases key KPIs with clear typography, icons, and contextual coloring.
Quick Links
Installation
Install the presets individually or as part of the complete @aristobyte-ui library.
Installation of Statistics Cards
Install the Statistics Cards preset individually if not already included in the global @aristobyte-ui package.
Package Manager
Individual Package
Install only the presets if you need specific functionality.
Full Library
Skip this if you have the complete @aristobyte-ui already installed.
Import
Choose between individual package imports or global library imports based on your project's needs and bundle size requirements.
Import Statistics Cards
Import Statistics Cards into your dashboard to provide users with concise, visually distinct data summaries. Cards can be customized with icons, variants, and sizing props.
Import Method
Individual Package
Import directly from the presets package for optimal tree-shaking and smaller bundle sizes.
Recommended for component-specific usage
Global Library
Import from the main library package when using multiple components from AristoByte UI.
Recommended for component-specific usage
Basic Usage Example
Basic implementation of the component using default properties. Suitable for general-purpose interactions.
Disabled
Displays a Statistics Card in a disabled state when metrics are incomplete, loading, or when access to the dataset is restricted.
Preview
Guidelines
Disable interactive drill-ins when underlying data is stale or being re-aggregated.
Disable export/share buttons until server-side permissions are validated.
Show skeletons or placeholders when partial data prevents meaningful interaction.
Avoid enabling KPI-linked actions until dependent query jobs complete to prevent misleading insights.
Data Integrity
Communicate the data state (stale/loading/unauthorized) with clear messaging near the metric.
Use subdued styling while keeping headline values legible for monitoring scenarios.
Provide hooks/events that allow consumers to subscribe to data readiness changes to re-enable interactions.
Log disabled-state reasons for analytics to understand frequency of unavailable metrics.
Presentation & Implementation
Props Reference
Complete reference for all props available on StatisticsCards component(s), including type definitions, default values, and usage examples.
StatisticsCards
Core Props
children
React.ReactNode | stringdefault: ''