Analytics Dashboard
A data-rich dashboard with KPI cards, charts, and data table.
Alert
Avatar
Badge
Breadcrumb
Button
Card
Chart
Color Picker
Data Table
Date Range Picker
Dropdown Menu
Navigation Menu
Native Select
Numeric Input
Pagination
Popover
Progress
Select
Separator
Skeleton
Split Button
Switch
Tabs
Toast
Tooltip
Typography
Preview
Open full demoAnalytics
Revenue target achieved!
You've exceeded your Q4 goal by 12%. Great work across all product lines.
Total Revenue
$45,231.89
+20.1%
from last monthSubscriptions
+2,350
+18.2%
from last monthSales
+12,234
+8.4%
from last monthActive Users
Revenue Over Time
Monthly revenue for the current year
Sales by Category
Product category breakdown
Revenue Goal
Progress
72%
Target:
Customize
Chart accent
Compare period
Quick Filters
Category
Status
Recent Transactions
A list of your recent transactions
| Customer | Amount | Status | Date | |
|---|---|---|---|---|
LS
Lisa Smith lisa@example.com |
$316.00 | Success |
Jan 15, 2026 | |
JD
John Davis john@example.com |
$242.00 | Success |
Jan 14, 2026 | |
AM
Alice Martinez alice@example.com |
$837.00 | Pending |
Jan 13, 2026 | |
RB
Robert Brown robert@example.com |
$129.00 | Failed |
Jan 12, 2026 |
Showing 1-4 of 24 transactions
Interactive Demo
This app demo is best experienced in full-screen mode on mobile devices. Tap below to open the interactive demo.
Code
<div class="h-full overflow-auto">
<div class="p-4 md:p-6 space-y-6">
@* Breadcrumb + Action Bar *@
<div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
<div class="space-y-1">
<BbBreadcrumb>
<BbBreadcrumbList>
<BbBreadcrumbItem>
<BbBreadcrumbLink Href="#">Dashboard</BbBreadcrumbLink>
</BbBreadcrumbItem>
<BbBreadcrumbSeparator />
<BbBreadcrumbItem>
<BbBreadcrumbPage>Analytics</BbBreadcrumbPage>
</BbBreadcrumbItem>
</BbBreadcrumbList>
</BbBreadcrumb>
<h1 class="text-2xl font-bold tracking-tight">Analytics</h1>
</div>
<div class="flex items-center gap-2 flex-wrap">
<BbDateRangePicker Placeholder="Select date range" />
<BbSplitButton Variant="ButtonVariant.Outline" Size="ButtonSize.Small">
<ChildContent>
<LucideIcon Name="download" class="mr-2 h-3.5 w-3.5" />
Export CSV
</ChildContent>
<DropdownContent>
<BbSplitButtonItem>
<LucideIcon Name="file-text" class="mr-2 h-4 w-4" />
Export as PDF
</BbSplitButtonItem>
<BbSplitButtonItem>
<LucideIcon Name="file-json" class="mr-2 h-4 w-4" />
Export as JSON
</BbSplitButtonItem>
</DropdownContent>
</BbSplitButton>
</div>
</div>
@* Alert Banner *@
<BbAlert Variant="AlertVariant.Success">
<Icon>
<LucideIcon Name="circle-check" class="h-4 w-4" />
</Icon>
<ChildContent>
<BbAlertTitle>Revenue target achieved!</BbAlertTitle>
<BbAlertDescription>You've exceeded your Q4 goal by 12%. Great work across all product lines.</BbAlertDescription>
</ChildContent>
</BbAlert>
@* Tabs *@
<BbTabs DefaultValue="overview">
<BbTabsList>
<BbTabsTrigger Value="overview">Overview</BbTabsTrigger>
<BbTabsTrigger Value="analytics">Analytics</BbTabsTrigger>
<BbTabsTrigger Value="reports">Reports</BbTabsTrigger>
</BbTabsList>
<BbTabsContent Value="overview" ForceMount="true">
@* KPI Cards *@
<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-4 mt-4">
<BbCard Class="bg-gradient-to-br from-[var(--kpi-gradient-from)] to-transparent">
<BbCardHeader Class="flex flex-row items-center justify-between pb-2">
<BbCardTitle Class="text-sm font-medium">Total Revenue</BbCardTitle>
<BbTooltip>
<BbTooltipTrigger AsChild="false">
<LucideIcon Name="dollar-sign" class="h-4 w-4 text-muted-foreground" />
</BbTooltipTrigger>
<BbTooltipContent>
<span>Total revenue across all channels this period</span>
</BbTooltipContent>
</BbTooltip>
</BbCardHeader>
<BbCardContent>
<div class="text-2xl font-bold">$45,231.89</div>
<div class="flex items-center gap-1 mt-1">
<BbBadge Variant="BadgeVariant.Outline" Class="text-[10px] px-1.5 py-0 h-4 border-transparent bg-green-100 text-green-700 hover:bg-green-100">
<LucideIcon Name="trending-up" class="h-3 w-3 mr-0.5" />
+20.1%
</BbBadge>
<span class="text-xs text-muted-foreground">from last month</span>
</div>
</BbCardContent>
</BbCard>
<BbCard Class="bg-gradient-to-br from-[var(--kpi-gradient-from)] to-transparent">
<BbCardHeader Class="flex flex-row items-center justify-between pb-2">
<BbCardTitle Class="text-sm font-medium">Subscriptions</BbCardTitle>
<LucideIcon Name="users" class="h-4 w-4 text-muted-foreground" />
</BbCardHeader>
<BbCardContent>
<div class="text-2xl font-bold">+2,350</div>
<div class="flex items-center gap-1 mt-1">
<BbBadge Variant="BadgeVariant.Outline" Class="text-[10px] px-1.5 py-0 h-4 border-transparent bg-green-100 text-green-700 hover:bg-green-100">
<LucideIcon Name="trending-up" class="h-3 w-3 mr-0.5" />
+18.2%
</BbBadge>
<span class="text-xs text-muted-foreground">from last month</span>
</div>
</BbCardContent>
</BbCard>
<BbCard Class="bg-gradient-to-br from-[var(--kpi-gradient-from)] to-transparent">
<BbCardHeader Class="flex flex-row items-center justify-between pb-2">
<BbCardTitle Class="text-sm font-medium">Sales</BbCardTitle>
<LucideIcon Name="credit-card" class="h-4 w-4 text-muted-foreground" />
</BbCardHeader>
<BbCardContent>
<div class="text-2xl font-bold">+12,234</div>
<div class="flex items-center gap-1 mt-1">
<BbBadge Variant="BadgeVariant.Outline" Class="text-[10px] px-1.5 py-0 h-4 border-transparent bg-green-100 text-green-700 hover:bg-green-100">
<LucideIcon Name="trending-up" class="h-3 w-3 mr-0.5" />
+8.4%
</BbBadge>
<span class="text-xs text-muted-foreground">from last month</span>
</div>
</BbCardContent>
</BbCard>
<BbCard Class="bg-gradient-to-br from-[var(--kpi-gradient-from)] to-transparent">
<BbCardHeader Class="flex flex-row items-center justify-between pb-2">
<BbCardTitle Class="text-sm font-medium">Active Users</BbCardTitle>
<LucideIcon Name="activity" class="h-4 w-4 text-muted-foreground" />
</BbCardHeader>
<BbCardContent>
<BbSkeleton Class="h-7 w-[100px] mb-1" />
<BbSkeleton Class="h-3 w-[140px]" />
</BbCardContent>
</BbCard>
</div>
@* Charts Row *@
<div class="grid gap-4 md:grid-cols-2 mt-4">
<BbCard>
<BbCardHeader>
<BbCardTitle Class="text-sm font-medium">Revenue Over Time</BbCardTitle>
<BbCardDescription>Monthly revenue for the current year</BbCardDescription>
</BbCardHeader>
<BbCardContent>
<BbLineChart Data="@revenueData" Height="250px">
<BbXAxis DataKey="month" />
<BbYAxis />
<BbChartTooltip />
<BbLine DataKey="amount" Name="Revenue" Color="var(--chart-1)" />
</BbLineChart>
</BbCardContent>
</BbCard>
<BbCard>
<BbCardHeader>
<BbCardTitle Class="text-sm font-medium">Sales by Category</BbCardTitle>
<BbCardDescription>Product category breakdown</BbCardDescription>
</BbCardHeader>
<BbCardContent>
<BbBarChart Data="@categoryData" Height="250px">
<BbXAxis DataKey="category" />
<BbYAxis />
<BbChartTooltip />
<BbBar DataKey="sales" Name="Sales" Color="var(--chart-1)" />
</BbBarChart>
</BbCardContent>
</BbCard>
</div>
@* Settings Row *@
<div class="grid gap-4 md:grid-cols-3 mt-4">
@* Goal Card *@
<BbCard>
<BbCardHeader Class="pb-2">
<div class="flex items-center gap-1.5">
<BbCardTitle Class="text-sm font-medium">Revenue Goal</BbCardTitle>
<BbTooltip>
<BbTooltipTrigger AsChild="false">
<LucideIcon Name="info" class="h-3.5 w-3.5 text-muted-foreground" />
</BbTooltipTrigger>
<BbTooltipContent>
<span>Track progress towards your quarterly revenue target</span>
</BbTooltipContent>
</BbTooltip>
</div>
</BbCardHeader>
<BbCardContent Class="space-y-3">
<div class="flex items-center justify-between text-sm">
<span class="text-muted-foreground">Progress</span>
<span class="font-medium">72%</span>
</div>
<BbProgress Value="72" />
<div class="flex items-center gap-2">
<span class="text-xs text-muted-foreground">Target:</span>
<BbNumericInput TValue="int" Value="50000" Format="N0" ShowButtons="true" Min="0" Step="5000" Class="text-xs w-28" />
</div>
</BbCardContent>
</BbCard>
@* Customize Card *@
<BbCard>
<BbCardHeader Class="pb-2">
<BbCardTitle Class="text-sm font-medium">Customize</BbCardTitle>
</BbCardHeader>
<BbCardContent Class="space-y-3">
<DashboardColorPicker />
<div class="flex items-center justify-between">
<span class="text-xs text-muted-foreground">Compare period</span>
<BbSwitch />
</div>
</BbCardContent>
</BbCard>
@* Filters Card *@
<BbCard>
<BbCardHeader Class="pb-2">
<BbCardTitle Class="text-sm font-medium">Quick Filters</BbCardTitle>
</BbCardHeader>
<BbCardContent Class="space-y-3">
<div class="space-y-1">
<span class="text-xs text-muted-foreground">Category</span>
<BbSelect TValue="string">
<BbSelectTrigger>
<BbSelectValue Placeholder="Select category" />
</BbSelectTrigger>
<BbSelectContent>
<BbSelectItem TValue="string" Value=@("All Categories")>All Categories</BbSelectItem>
<BbSelectItem TValue="string" Value=@("Electronics")>Electronics</BbSelectItem>
<BbSelectItem TValue="string" Value=@("Clothing")>Clothing</BbSelectItem>
<BbSelectItem TValue="string" Value=@("Books")>Books</BbSelectItem>
<BbSelectItem TValue="string" Value=@("Home & Garden")>Home & Garden</BbSelectItem>
</BbSelectContent>
</BbSelect>
</div>
<div class="space-y-1">
<span class="text-xs text-muted-foreground">Status</span>
<BbNativeSelect TValue="string">
<option value="">All statuses</option>
<option value="success">Success</option>
<option value="pending">Pending</option>
<option value="failed">Failed</option>
</BbNativeSelect>
</div>
</BbCardContent>
</BbCard>
</div>
@* Transactions Table *@
<BbCard Class="mt-4">
<BbCardHeader>
<BbCardTitle Class="text-sm font-medium">Recent Transactions</BbCardTitle>
<BbCardDescription>A list of your recent transactions</BbCardDescription>
</BbCardHeader>
<BbCardContent>
<div class="rounded-md border overflow-x-auto">
<table class="w-full text-sm min-w-[600px]">
<thead>
<tr class="border-b bg-muted/50">
<th class="text-left p-3 font-medium">Customer</th>
<th class="text-left p-3 font-medium">Amount</th>
<th class="text-left p-3 font-medium">Status</th>
<th class="text-left p-3 font-medium">Date</th>
<th class="text-right p-3 font-medium"></th>
</tr>
</thead>
<tbody>
<tr class="border-b">
<td class="p-3">
<div class="flex items-center gap-2">
<BbAvatar Size="AvatarSize.Small" Class="h-7 w-7">
<BbAvatarFallback Class="text-[10px] bg-blue-100 text-blue-700">LS</BbAvatarFallback>
</BbAvatar>
<div>
<p class="text-sm font-medium">Lisa Smith</p>
<p class="text-xs text-muted-foreground">lisa@example.com</p>
</div>
</div>
</td>
<td class="p-3 font-medium">$316.00</td>
<td class="p-3">
<BbBadge Variant="BadgeVariant.Outline" Class="text-[10px] border-transparent bg-green-100 text-green-700 hover:bg-green-100">Success</BbBadge>
</td>
<td class="p-3 text-muted-foreground">Jan 15, 2026</td>
<td class="p-3 text-right">
<BbDropdownMenu>
<BbDropdownMenuTrigger>
<BbButton Variant="ButtonVariant.Ghost" Size="ButtonSize.Icon" Class="h-7 w-7">
<LucideIcon Name="ellipsis" class="h-3.5 w-3.5" />
</BbButton>
</BbDropdownMenuTrigger>
<BbDropdownMenuContent Align="PopoverAlign.End">
<BbDropdownMenuItem>View Details</BbDropdownMenuItem>
<BbDropdownMenuItem>Download Receipt</BbDropdownMenuItem>
</BbDropdownMenuContent>
</BbDropdownMenu>
</td>
</tr>
<tr class="border-b">
<td class="p-3">
<div class="flex items-center gap-2">
<BbAvatar Size="AvatarSize.Small" Class="h-7 w-7">
<BbAvatarFallback Class="text-[10px] bg-green-100 text-green-700">JD</BbAvatarFallback>
</BbAvatar>
<div>
<p class="text-sm font-medium">John Davis</p>
<p class="text-xs text-muted-foreground">john@example.com</p>
</div>
</div>
</td>
<td class="p-3 font-medium">$242.00</td>
<td class="p-3">
<BbBadge Variant="BadgeVariant.Outline" Class="text-[10px] border-transparent bg-green-100 text-green-700 hover:bg-green-100">Success</BbBadge>
</td>
<td class="p-3 text-muted-foreground">Jan 14, 2026</td>
<td class="p-3 text-right">
<BbButton Variant="ButtonVariant.Ghost" Size="ButtonSize.Icon" Class="h-7 w-7">
<LucideIcon Name="ellipsis" class="h-3.5 w-3.5" />
</BbButton>
</td>
</tr>
<tr class="border-b">
<td class="p-3">
<div class="flex items-center gap-2">
<BbAvatar Size="AvatarSize.Small" Class="h-7 w-7">
<BbAvatarFallback Class="text-[10px] bg-amber-100 text-amber-700">AM</BbAvatarFallback>
</BbAvatar>
<div>
<p class="text-sm font-medium">Alice Martinez</p>
<p class="text-xs text-muted-foreground">alice@example.com</p>
</div>
</div>
</td>
<td class="p-3 font-medium">$837.00</td>
<td class="p-3">
<BbBadge Variant="BadgeVariant.Outline" Class="text-[10px] border-transparent bg-yellow-100 text-yellow-700 hover:bg-yellow-100">Pending</BbBadge>
</td>
<td class="p-3 text-muted-foreground">Jan 13, 2026</td>
<td class="p-3 text-right">
<BbButton Variant="ButtonVariant.Ghost" Size="ButtonSize.Icon" Class="h-7 w-7">
<LucideIcon Name="ellipsis" class="h-3.5 w-3.5" />
</BbButton>
</td>
</tr>
<tr>
<td class="p-3">
<div class="flex items-center gap-2">
<BbAvatar Size="AvatarSize.Small" Class="h-7 w-7">
<BbAvatarFallback Class="text-[10px] bg-red-100 text-red-700">RB</BbAvatarFallback>
</BbAvatar>
<div>
<p class="text-sm font-medium">Robert Brown</p>
<p class="text-xs text-muted-foreground">robert@example.com</p>
</div>
</div>
</td>
<td class="p-3 font-medium">$129.00</td>
<td class="p-3">
<BbBadge Variant="BadgeVariant.Outline" Class="text-[10px] border-transparent bg-red-100 text-red-700 hover:bg-red-100">Failed</BbBadge>
</td>
<td class="p-3 text-muted-foreground">Jan 12, 2026</td>
<td class="p-3 text-right">
<BbButton Variant="ButtonVariant.Ghost" Size="ButtonSize.Icon" Class="h-7 w-7">
<LucideIcon Name="ellipsis" class="h-3.5 w-3.5" />
</BbButton>
</td>
</tr>
</tbody>
</table>
</div>
<div class="flex items-center justify-between mt-4">
<span class="text-xs text-muted-foreground">Showing 1-4 of 24 transactions</span>
<BbPagination>
<BbPaginationContent>
<BbPaginationItem>
<BbPaginationPrevious ShowText="false" />
</BbPaginationItem>
<BbPaginationItem>
<BbPaginationLink IsActive="true">1</BbPaginationLink>
</BbPaginationItem>
<BbPaginationItem>
<BbPaginationLink>2</BbPaginationLink>
</BbPaginationItem>
<BbPaginationItem>
<BbPaginationLink>3</BbPaginationLink>
</BbPaginationItem>
<BbPaginationItem>
<BbPaginationEllipsis />
</BbPaginationItem>
<BbPaginationItem>
<BbPaginationNext ShowText="false" />
</BbPaginationItem>
</BbPaginationContent>
</BbPagination>
</div>
</BbCardContent>
</BbCard>
</BbTabsContent>
<BbTabsContent Value="analytics">
<BbEmpty Size="EmptySize.Small" Title="Analytics coming soon" Description="Detailed analytics and insights will be available here.">
<Icon>
<LucideIcon Name="bar-chart-3" />
</Icon>
</BbEmpty>
</BbTabsContent>
<BbTabsContent Value="reports">
<BbEmpty Size="EmptySize.Small" Title="Reports coming soon" Description="Generate and export custom reports from this tab.">
<Icon>
<LucideIcon Name="file-text" />
</Icon>
</BbEmpty>
</BbTabsContent>
</BbTabs>
</div>
</div>
@code {
private record RevenueData(string Month, double Amount);
private record CategoryData(string Category, double Sales);
private List<RevenueData> revenueData = new()
{
new("Jan", 4200), new("Feb", 3800), new("Mar", 5100),
new("Apr", 4600), new("May", 5800), new("Jun", 6200),
new("Jul", 5900), new("Aug", 6800), new("Sep", 7100),
new("Oct", 6500), new("Nov", 7800), new("Dec", 8400)
};
private List<CategoryData> categoryData = new()
{
new("Electronics", 4200), new("Clothing", 3100), new("Books", 2300),
new("Home", 1800), new("Sports", 2800), new("Food", 3500)
};
}