Dashboard
Metric cards, stats overview, and activity feeds for dashboards.
Metric Cards
Grid of KPI metric cards with trend indicators and sparkline charts.
Total Revenue
Active Users
New Orders
Conversion
import { MetricCards } from "@launchapp/design-system/blocks/dashboard";const items = [ { id: "revenue", label: "Total Revenue", value: "$45,231", trend: "up", trendValue: "+20.1%", sparklineData: [30, 40, 35, 50, 49, 60, 70], }, { id: "users", label: "Active Users", value: "2,350", trend: "up", trendValue: "+15.3%", sparklineData: [20, 30, 25, 40, 35, 45, 50], },];export default function Page() { return <MetricCards items={items} />;}Stats Overview
Dashboard stats overview with summary metrics and area chart.
Overview
Your business performance at a glance.
Total Revenue
$45,231
Subscriptions
+2350
Sales
+12,234
Active Now
+573
import { StatsOverview } from "@launchapp/design-system/blocks/dashboard";const items = [ { title: "Total Revenue", value: "$45,231", trend: "up", trendValue: "+20.1%" }, { title: "Subscriptions", value: "+2350", trend: "up", trendValue: "+180.1%" }, { title: "Sales", value: "+12,234", trend: "up", trendValue: "+19%" }, { title: "Active Now", value: "+573", trend: "up", trendValue: "+201" },];export default function Page() { return ( <StatsOverview title="Overview" description="Your business performance at a glance." items={items} /> );}Activity Feed
Chronological activity feed with avatar, action badge, and timestamp.
Recent Activity
Alice Johnson Project 'LaunchApp v2' was created
Created a new project
2m ago
Bob Smith feat(auth): add OAuth providers
Merged pull request #42
1h ago
Carol White Left a review on the design tokens RFC
Commented on issue #18
3h ago
import { ActivityFeed } from "@launchapp/design-system/blocks/dashboard";const items = [ { id: "1", user: { name: "Alice Johnson", initials: "AJ" }, description: "created a new project", timestamp: "2 minutes ago", actionType: "Created", actionVariant: "default", }, { id: "2", user: { name: "Bob Smith", initials: "BS" }, description: "merged pull request #42", timestamp: "1 hour ago", actionType: "Merged", actionVariant: "secondary", },];export default function Page() { return <ActivityFeed items={items} title="Recent Activity" />;}Dashboard Shell
Complete dashboard layout shell with sidebar, header, and content area.
No preview available
See the code snippet below for usage.
import { DashboardShell } from "@launchapp/design-system/blocks/dashboard";export default function Page() { return ( <DashboardShell title="Dashboard" user={{ name: "Alice Johnson", email: "alice@example.com" }} > <div className="p-6">Dashboard content</div> </DashboardShell> );}Dashboard Timeline
Chronological activity timeline for dashboard overview panels.
No preview available
See the code snippet below for usage.
import { Timeline } from "@launchapp/design-system/blocks/dashboard";const items = [ { id: "1", title: "Project created", date: "Jan 1", status: "completed" as const }, { id: "2", title: "First PR merged", date: "Jan 5", status: "completed" as const }, { id: "3", title: "v1.0 release", date: "Feb 1", status: "current" as const },];export default function Page() { return <Timeline items={items} />;}