Tungsten UI 💡

Tungsten UI 💡

Dashboards

Complete dashboard layouts with analytics and data visualization

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

+12% vs last month

Revenue

$48.2K

+8% vs last month

Orders

1,394

-3% vs last month

Conversion

24.8%

+2.1% vs last month

Revenue Trend

Chart visualization would appear here

Traffic Sources

Pie chart visualization would appear here

Recent Activity

Avatar

John Doe completed a purchase

2 minutes ago

$299
Avatar

Sarah Chen signed up for newsletter

5 minutes ago

New
Avatar

Mike Johnson left a review

12 minutes ago

5.0 
<!-- 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

+12% vs last month

Revenue

$48.2K

+8% vs last month

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%
$2,847
+$387 from yesterday

Orders

34 new
157
+12 from yesterday

Conversion Rate

2.1%
3.2%
-0.3% from yesterday

Top Products

Product

Wireless Headphones

47 sold

$14,085

+12%

Product

Smart Watch

32 sold

$12,768

+8%

Product

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%
$2,847
+$387 from yesterday

Orders

34 new
157
+12 from yesterday

Top Products

Product

Wireless Headphones

47 sold

$14,085

+12%

Recent Orders

#3487

John Doe

$299

Paid

Code

<!-- 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

12
Active Projects
84
Tasks Completed
23
Team Members
94%
On-Time Delivery

Active Projects

Website Redesign

On Track
Progress 75%
Avatar
Avatar
Avatar
Due: Dec 15

Mobile App

Behind
Progress 45%
Avatar
Avatar
Due: Dec 30

Upcoming 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

12
Active Projects
84
Tasks Completed

Active Projects

Website Redesign

On Track
Progress 75%
Avatar
Avatar
Due: Dec 15

Upcoming 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>

Installation

These components are built with Django Components UI. Make sure you have it installed:

pip install django-components-ui

Usage

Copy the code from the components above and customize as needed for your project.

Fully responsive
Accessible by default
Easy to customize

Customization

Customize colors, spacing, and styling using Tailwind CSS classes or your own CSS.

View Docs

Related Blocks

Discover more blocks in the Application UI category

View All Application UI All UI Blocks Documentation