Getting Started
UI Library
- Button
- Date Picker
- Field
- Fields
- Input Group
- File Uploader
- Signature Pad
- Text Area
- Container
- Section Header
- Separator
- Spacer
- Action Row
- Breadcrumb
- Tabs
- Tabs Container
- Card
- Image
- Text
- Title
- Video Player
- Card Collection
- Data Grid
- List Collection
- Table Collection
- Bar Chart
- Big Number
- Line Chart
- Radial Chart
- Hint
- Progress
- Spinner
- Skeleton
- Toast
- Sheet
- Dialog
- Real-world patterns
- Primitives
Displays numerical values in a large, prominent format for top-level KPIs, statistics, and reporting dashboards.
Basic Usage
Total Attendance
847
This month
Attendance Rate
92%
vs last month
With Icons
Add visual context with Lucide React icons.
Total Attendance
847
This month
Attendance Rate
92%
vs last month
Dashboard Example
Create comprehensive KPI dashboards with multi-column layouts.
New Signups
156
This month
Members
1.2K
Satisfaction
98%
Variants
Choose from multiple visual styles: card (default), outline, ghost, and minimal.
Outline Variant
Revenue
142K
This quarter
Active Users
2847
Last 30 days
Support Tickets
156
Resolved this week
Minimal Variant
Perfect for landing pages and hero sections.
Users Worldwide
10M+
Trusted by millions
Uptime SLA
99.9%
Enterprise-grade reliability
Support
24/7
Always here to help
Interactive
Make big numbers interactive with href (links) or onClick (buttons).
Prefix and Suffix
Format numbers with currency symbols, units, or other indicators.
Revenue
$143K
This month
Avg. Session
45m
User engagement
API Reference
BigNumberCollection Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | BigNumberItem[] | - | Array of big number items to display |
columns | 1 | 2 | 3 | 4 | "auto" | "auto" | Number of columns in the grid |
variant | "card" | "outline" | "ghost" | "minimal" | "card" | Visual style variant |
size | "sm" | "md" | "lg" | "xl" | "md" | Size of numbers and labels |
valueVariant | "default" | "gradient" | "muted" | "primary" | "default" | Color variant for values |
alignment | "left" | "center" | "right" | "left" | Text alignment |
labelStyle | "simple" | "bold" | "uppercase" | "muted" | "muted" | Label text style |
labelPosition | "above" | "below" | "above" | Position of label relative to value |
descriptionPosition | "above" | "below" | "below" | Position of description relative to value |
showIcon | boolean | true | Whether to show icons |
limit | number | - | Limit number of items displayed |
onItemClick | (item, index) => void | - | Click handler for all items |
renderValue | (item, index) => ReactNode | - | Custom value renderer |
renderLabel | (label, item, index) => ReactNode | - | Custom label renderer |
renderIcon | (icon, item, index) => ReactNode | - | Custom icon renderer |
renderItem | (item, index) => ReactNode | - | Custom item renderer |
itemAs | "div" | "article" | "div" | HTML element for items |
className | string | - | Additional CSS classes |
BigNumberItem Interface
| Property | Type | Description |
|---|---|---|
value | string | number | The big number value |
label | string | Title/name of the metric |
description | string | Supporting text |
id | string | number | Unique identifier |
icon | ReactNode | Lucide icon or custom element |
prefix | string | Text before value (e.g., "$") |
suffix | string | Text after value (e.g., "%") |
href | string | Link URL (renders as <a>) |
onClick | () => void | Click handler (renders as <button>) |
header | ReactNode | Custom header content |
footer | ReactNode | Custom footer content |
ariaLabel | string | Accessibility label |
size | "sm" | "md" | "lg" | "xl" | Per-item size override |
variant | "card" | "outline" | "ghost" | "minimal" | Per-item variant override |
valueVariant | "default" | "gradient" | "muted" | "primary" | Per-item value variant override |
alignment | "left" | "center" | "right" | Per-item alignment override |
BigNumberItem Component Props
| Prop | Type | Default | Description |
|---|---|---|---|
item | BigNumberItem | - | Item configuration object |
size | "sm" | "md" | "lg" | "xl" | "md" | Size of number and label |
variant | "card" | "outline" | "ghost" | "minimal" | "card" | Visual style variant |
valueVariant | "default" | "gradient" | "muted" | "primary" | "default" | Color variant for value |
alignment | "left" | "center" | "right" | "left" | Text alignment |
labelStyle | "simple" | "bold" | "uppercase" | "muted" | "muted" | Label text style |
labelPosition | "above" | "below" | "above" | Position of label relative to value |
descriptionPosition | "above" | "below" | "below" | Position of description |
showIcon | boolean | true | Whether to show icon |
onClick | () => void | - | Additional click handler |
as | "div" | "article" | "div" | HTML element |
renderValue | (item) => ReactNode | - | Custom value renderer |
renderLabel | (label, item) => ReactNode | - | Custom label renderer |
renderIcon | (icon, item) => ReactNode | - | Custom icon renderer |
classNames | object | - | Granular CSS class overrides |