Inline Stats Banner
Data Display
Block
Display key metrics in a horizontal banner format with trends and icons.
Preview
Full-featured stats banner with icons and trends
12,84712%
Total Users
$48.2k8.3%
Revenue
1,2842.1%
Orders
284k24%
Page Views
Simple Stats
Basic stats without icons or trends
2,847
Active Users
14.2k
Sessions
32.1%
Bounce Rate
4m 23s
Avg. Duration
Size Variants
Different sizes for various contexts
1.2k5%
Users
$8.4k12%
Revenue
1.2k5%
Users
$8.4k12%
Revenue
1.2k5%
Users
$8.4k12%
Revenue
Stats Row
Grid-based layout for multiple stat cards
$24,78014.5%
Total Sales
3,8478.2%
Active Users
3.24%1.2%
Conversion
2m 34s5.6%
Avg. Time
Mini Stats Bar
Compact inline stats for headers
Products: 248
Categories: 12
In Stock: 89%
Low Stock: 14
InlineStatsBanner Props
InlineStatsBanner API reference
| Prop | Type | Default | Description |
|---|---|---|---|
stats* | InlineStat[] | — | Array of stat items to display |
variant | 'default' | 'filled' | 'bordered' | 'default' | Visual style variant |
size | 'sm' | 'md' | 'lg' | 'md' | Size of the banner |
className | string | — | Additional CSS classes |
StatsRow Props
StatsRow API reference
| Prop | Type | Default | Description |
|---|---|---|---|
stats* | InlineStat[] | — | Array of stat items |
columns | 2 | 3 | 4 | 5 | 4 | Number of columns |
className | string | — | Additional CSS classes |
Types
Supporting type definitions
interface InlineStat { label: string value: string | number trend?: { value: number direction: 'up' | 'down' } icon?: React.ReactNode}
interface MiniStatsBarProps { stats: Array<{ label: string value: string | number }> className?: string}Usage
Import and implementation examples
import { InlineStatsBanner, StatsRow, MiniStatsBar } from '@/blocks/data-display/inline-stats-banner'
// Full stats banner<InlineStatsBanner stats={[ { label: 'Users', value: '12.8k', trend: { value: 12, direction: 'up' }, icon: <Users /> }, { label: 'Revenue', value: '$48k', trend: { value: 8, direction: 'up' }, icon: <DollarSign /> }, ]} variant="bordered" size="md"/>
// Stats row grid<StatsRow stats={[ { label: 'Sales', value: '$24k', trend: { value: 14, direction: 'up' } }, { label: 'Orders', value: '1,284' }, { label: 'Conversion', value: '3.2%', trend: { value: 1.2, direction: 'down' } }, ]} columns={3}/>
// Mini inline stats<MiniStatsBar stats={[ { label: 'Items', value: '248' }, { label: 'In Stock', value: '89%' }, ]}/>This block is self-contained (no UI component dependencies)
Features
Built-in functionality
- Trend indicators: Show up/down trends with color coding
- Icon support: Optional icons for visual context
- Multiple variants: Default, filled, and bordered styles
- Responsive sizing: Small, medium, and large sizes
- Grid layout: StatsRow for card-based display
- Compact mode: MiniStatsBar for header usage
- Dark mode: Full dark mode support
Accessibility
Accessibility considerations
ARIA Attributes
Stats use semantic markup for labels and valuesTrend direction indicated by icon, not just colorIcons are decorative when label provides contextKeyboard Navigation
| Key | Action |
|---|---|
| Tab | Navigate to interactive elements if present |
Notes
- Trend colors (green/red) are supplemented with icons
- Values are formatted for readability
- Content scales appropriately with zoom