Dashboards Components
Dashboard Layouts
Complete dashboard layouts and patterns built with your component library.
Analytics Dashboard
Comprehensive analytics dashboard with charts, metrics, and insights.
Analytics Overview
Track your performance metrics
Total Users
12.5K
Revenue
$48.2K
Orders
1,394
Conversion
24.8%
Revenue Trend
Chart visualization would appear here
Traffic Sources
Pie chart visualization would appear here
Recent Activity
John Doe completed a purchase
2 minutes ago
Sarah Chen signed up for newsletter
5 minutes ago
Mike Johnson left a review
12 minutes ago
<!-- Header Section -->
<div class="flex items-center justify-between mb-6">
<div>
<h1 class="text-2xl font-bold">Analytics Overview</h1>
<p class="text-base-content/60">Track your performance metrics</p>
</div>
<div class="flex items-center space-x-2">
<c-dropdown>
<c-button variant="outline" size="sm">
Last 30 days
<c-icon name="chevron-down" size="16" class="ml-2" />
</c-button>
</c-dropdown>
<c-button variant="primary" size="sm">Export Report</c-button>
</div>
</div>
<!-- Key Metrics -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
<c-card class="p-4">
<div class="flex items-center justify-between">
<div>
<p class="text-sm text-base-content/60">Total Users</p>
<p class="text-2xl font-bold">12.5K</p>
</div>
<div class="p-3 bg-primary/10 rounded-full">
<c-icon name="users" size="20" class="text-primary" />
</div>
</div>
<div class="mt-2 flex items-center text-sm">
<c-icon name="trending-up" size="16" class="text-success mr-1" />
<span class="text-success">+12%</span>
</div>
</c-card>
</div>
Preview
Analytics Overview
Track your performance metrics
Total Users
12.5K
Revenue
$48.2K
Revenue Trend
Chart visualization
Traffic Sources
Pie chart visualization
Code
<!-- Header Section -->
<div class="flex items-center justify-between mb-6">
<div>
<h1 class="text-2xl font-bold">Analytics Overview</h1>
<p class="text-base-content/60">Track your performance metrics</p>
</div>
<div class="flex items-center space-x-2">
<c-dropdown>
<c-button variant="outline" size="sm">
Last 30 days
<c-icon name="chevron-down" size="16" class="ml-2" />
</c-button>
</c-dropdown>
<c-button variant="primary" size="sm">Export Report</c-button>
</div>
</div>
<!-- Key Metrics -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
<c-card class="p-4">
<div class="flex items-center justify-between">
<div>
<p class="text-sm text-base-content/60">Total Users</p>
<p class="text-2xl font-bold">12.5K</p>
</div>
<div class="p-3 bg-primary/10 rounded-full">
<c-icon name="users" size="20" class="text-primary" />
</div>
</div>
<div class="mt-2 flex items-center text-sm">
<c-icon name="trending-up" size="16" class="text-success mr-1" />
<span class="text-success">+12%</span>
</div>
</c-card>
</div>
E-commerce Dashboard
Sales-focused dashboard with product performance and order management.
Store Dashboard
Monitor your store performance
Today's Sales
+24%Orders
34 newConversion Rate
2.1%Top Products
Wireless Headphones
47 sold
$14,085
+12%
Smart Watch
32 sold
$12,768
+8%
Laptop Stand
28 sold
$2,492
-3%
Recent Orders
#3487
John Doe
$299
Paid#3486
Sarah Chen
$159
Pending#3485
Mike Johnson
$89
Shipped<!-- Sales Overview -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
<c-card class="p-6">
<div class="flex items-center justify-between mb-4">
<h3 class="font-semibold">Today's Sales</h3>
<c-badge variant="success">+24%</c-badge>
</div>
<div class="text-3xl font-bold mb-2">$2,847</div>
<div class="text-sm text-base-content/60">
<span class="text-success">+$387</span> from yesterday
</div>
</c-card>
</div>
<!-- Product Performance -->
<c-card class="p-6">
<h3 class="text-lg font-semibold mb-4">Top Products</h3>
<div class="space-y-4">
<div class="flex items-center space-x-3">
<img src="product.jpg" alt="Product" class="w-10 h-10 rounded object-cover">
<div class="flex-1">
<p class="font-medium">Wireless Headphones</p>
<p class="text-sm text-base-content/60">47 sold</p>
</div>
<div class="text-right">
<p class="font-semibold">$14,085</p>
<p class="text-sm text-success">+12%</p>
</div>
</div>
</div>
</c-card>
Preview
Store Dashboard
Monitor your store performance
Today's Sales
+24%Orders
34 newTop Products
Wireless Headphones
47 sold
$14,085
+12%
Recent Orders
#3487
John Doe
$299
PaidCode
<!-- Sales Overview -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
<c-card class="p-6">
<div class="flex items-center justify-between mb-4">
<h3 class="font-semibold">Today's Sales</h3>
<c-badge variant="success">+24%</c-badge>
</div>
<div class="text-3xl font-bold mb-2">$2,847</div>
<div class="text-sm text-base-content/60">
<span class="text-success">+$387</span> from yesterday
</div>
</c-card>
</div>
<!-- Product Performance -->
<c-card class="p-6">
<h3 class="text-lg font-semibold mb-4">Top Products</h3>
<div class="space-y-4">
<div class="flex items-center space-x-3">
<img src="product.jpg" alt="Product" class="w-10 h-10 rounded object-cover">
<div class="flex-1">
<p class="font-medium">Wireless Headphones</p>
<p class="text-sm text-base-content/60">47 sold</p>
</div>
<div class="text-right">
<p class="font-semibold">$14,085</p>
<p class="text-sm text-success">+12%</p>
</div>
</div>
</div>
</c-card>
Project Management Dashboard
Team productivity dashboard with project tracking and task management.
Project Dashboard
Track team progress and deliverables
Active Projects
Website Redesign
On TrackMobile App
BehindUpcoming Tasks
Review design mockups
Due today
Update project documentation
Due tomorrow
Client meeting prep
Completed
Code review session
Due Dec 12
<!-- Progress Overview -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
<c-card class="p-4 text-center">
<div class="text-2xl font-bold text-primary mb-1">12</div>
<div class="text-sm text-base-content/60">Active Projects</div>
</c-card>
</div>
<!-- Project Card -->
<div class="p-4 bg-base-100 rounded-lg">
<div class="flex items-center justify-between mb-3">
<h4 class="font-semibold">Website Redesign</h4>
<c-badge variant="success">On Track</c-badge>
</div>
<div class="mb-3">
<div class="flex justify-between text-sm mb-1">
<span>Progress</span>
<span>75%</span>
</div>
<c-progress value="75" max="100" variant="success" />
</div>
<div class="flex items-center justify-between text-sm">
<c-avatar-group size="sm">
<c-avatar src="user1.jpg" size="sm" />
<c-avatar src="user2.jpg" size="sm" />
</c-avatar-group>
<span class="text-base-content/60">Due: Dec 15</span>
</div>
</div>
Preview
Project Dashboard
Track team progress and deliverables
Active Projects
Website Redesign
On TrackUpcoming Tasks
Review design mockups
Due today
Code
<!-- Progress Overview -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
<c-card class="p-4 text-center">
<div class="text-2xl font-bold text-primary mb-1">12</div>
<div class="text-sm text-base-content/60">Active Projects</div>
</c-card>
</div>
<!-- Project Card -->
<div class="p-4 bg-base-100 rounded-lg">
<div class="flex items-center justify-between mb-3">
<h4 class="font-semibold">Website Redesign</h4>
<c-badge variant="success">On Track</c-badge>
</div>
<div class="mb-3">
<div class="flex justify-between text-sm mb-1">
<span>Progress</span>
<span>75%</span>
</div>
<c-progress value="75" max="100" variant="success" />
</div>
<div class="flex items-center justify-between text-sm">
<c-avatar-group size="sm">
<c-avatar src="user1.jpg" size="sm" />
<c-avatar src="user2.jpg" size="sm" />
</c-avatar-group>
<span class="text-base-content/60">Due: Dec 15</span>
</div>
</div>