Tungsten UI 💡

Tungsten UI 💡

Statistics

Data visualization components and metrics displays

Statistics Components

Statistics Sections

Comprehensive statistics and metrics display patterns built with your component library.

Simple Stats Grid

Clean 4-column stats layout with trend indicators.

2,651
Total Users
+12.5%
$48.2K
Revenue
+8.2%
1,394
Orders
-3.1%
99.9%
Uptime
Excellent 
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
    <c-card class="text-center p-6">
        <div class="text-3xl font-bold text-primary mb-2">2,651</div>
        <div class="text-sm text-base-content/60 mb-3">Total Users</div>
        <div class="flex items-center justify-center">
            <c-icon name="trending-up" size="16" class="text-success mr-2" />
            <span class="text-sm text-success font-medium">+12.5%</span>
        </div>
    </c-card>
    
    <c-card class="text-center p-6">
        <div class="text-3xl font-bold text-secondary mb-2">$48.2K</div>
        <div class="text-sm text-base-content/60 mb-3">Revenue</div>
        <div class="flex items-center justify-center">
            <c-icon name="trending-up" size="16" class="text-success mr-2" />
            <span class="text-sm text-success font-medium">+8.2%</span>
        </div>
    </c-card>
</div>

Preview

2,651
Total Users
+12.5%
$48.2K
Revenue
+8.2%
1,394
Orders
-3.1%
99.9%
Uptime
Excellent

Code

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
    <c-card class="text-center p-6">
        <div class="text-3xl font-bold text-primary mb-2">2,651</div>
        <div class="text-sm text-base-content/60 mb-3">Total Users</div>
        <div class="flex items-center justify-center">
            <c-icon name="trending-up" size="16" class="text-success mr-2" />
            <span class="text-sm text-success font-medium">+12.5%</span>
        </div>
    </c-card>
    
    <c-card class="text-center p-6">
        <div class="text-3xl font-bold text-secondary mb-2">$48.2K</div>
        <div class="text-sm text-base-content/60 mb-3">Revenue</div>
        <div class="flex items-center justify-center">
            <c-icon name="trending-up" size="16" class="text-success mr-2" />
            <span class="text-sm text-success font-medium">+8.2%</span>
        </div>
    </c-card>
</div>

Detailed Stats Cards

Enhanced stat cards with additional context and visual elements.

+12%
12,483
Active Users
+1,249 from last month
+8%
$89,242
Total Revenue
+$6,842 from last month
-3%
2,847
Orders
-89 from last month 
<c-card class="p-6">
    <div class="flex items-center justify-between mb-4">
        <div class="p-3 bg-primary/10 rounded-lg">
            <c-icon name="users" size="24" class="text-primary" />
        </div>
        <c-badge variant="success" size="sm">+12%</c-badge>
    </div>
    <div class="text-2xl font-bold mb-1">12,483</div>
    <div class="text-sm text-base-content/60 mb-3">Active Users</div>
    <div class="text-xs text-base-content/50">
        <span class="text-success">+1,249</span> from last month
    </div>
</c-card>

Preview

+12%
12,483
Active Users
+1,249 from last month
+8%
$89,242
Total Revenue
+$6,842 from last month
-3%
2,847
Orders
-89 from last month

Code

<c-card class="p-6">
    <div class="flex items-center justify-between mb-4">
        <div class="p-3 bg-primary/10 rounded-lg">
            <c-icon name="users" size="24" class="text-primary" />
        </div>
        <c-badge variant="success" size="sm">+12%</c-badge>
    </div>
    <div class="text-2xl font-bold mb-1">12,483</div>
    <div class="text-sm text-base-content/60 mb-3">Active Users</div>
    <div class="text-xs text-base-content/50">
        <span class="text-success">+1,249</span> from last month
    </div>
</c-card>

Stats with Progress Bars

Statistics with visual progress indicators and goal tracking.

Monthly Sales Goal

78%
$78,240
of $100,000 goal
22 days remaining $21,760 to go

Team Performance

92%
184
of 200 tasks completed
16 tasks remaining Due in 5 days 
<c-card class="p-6">
    <div class="flex items-center justify-between mb-4">
        <h3 class="font-semibold">Monthly Sales Goal</h3>
        <c-badge variant="primary">78%</c-badge>
    </div>
    <div class="text-3xl font-bold mb-2">$78,240</div>
    <div class="text-sm text-base-content/60 mb-4">of $100,000 goal</div>
    <c-progress value="78" max="100" variant="primary" />
    <div class="flex justify-between text-xs text-base-content/50 mt-2">
        <span>22 days remaining</span>
        <span>$21,760 to go</span>
    </div>
</c-card>

Preview

Monthly Sales Goal

78%
$78,240
of $100,000 goal
22 days remaining $21,760 to go

Team Performance

92%
184
of 200 tasks completed
16 tasks remaining Due in 5 days

Code

<c-card class="p-6">
    <div class="flex items-center justify-between mb-4">
        <h3 class="font-semibold">Monthly Sales Goal</h3>
        <c-badge variant="primary">78%</c-badge>
    </div>
    <div class="text-3xl font-bold mb-2">$78,240</div>
    <div class="text-sm text-base-content/60 mb-4">of $100,000 goal</div>
    <c-progress value="78" max="100" variant="primary" />
    <div class="flex justify-between text-xs text-base-content/50 mt-2">
        <span>22 days remaining</span>
        <span>$21,760 to go</span>
    </div>
</c-card>

Key Metrics Dashboard

Comprehensive metrics overview with multiple data points and insights.

Performance Overview

Your key business metrics at a glance

Revenue
$142.8K
+12% from last month
Customers
3,247
+8% from last month
Orders
1,894
-3% from last month
Conversion
24.8%
+2.1% from last month
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
    <div class="bg-gradient-to-r from-primary to-primary/80 text-primary-content p-4 rounded-lg">
        <div class="flex items-center justify-between mb-2">
            <c-icon name="dollar-sign" size="20" />
            <span class="text-xs opacity-80">Revenue</span>
        </div>
        <div class="text-2xl font-bold">$142.8K</div>
        <div class="text-xs opacity-80">+12% from last month</div>
    </div>
    
    <div class="bg-gradient-to-r from-secondary to-secondary/80 text-secondary-content p-4 rounded-lg">
        <div class="flex items-center justify-between mb-2">
            <c-icon name="users" size="20" />
            <span class="text-xs opacity-80">Customers</span>
        </div>
        <div class="text-2xl font-bold">3,247</div>
        <div class="text-xs opacity-80">+8% from last month</div>
    </div>
</div>

Preview

Performance Overview

Your key business metrics at a glance

Revenue
$142.8K
+12% from last month
Customers
3,247
+8% from last month
Orders
1,894
-3% from last month
Conversion
24.8%
+2.1% from last month

Code

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
    <div class="bg-gradient-to-r from-primary to-primary/80 text-primary-content p-4 rounded-lg">
        <div class="flex items-center justify-between mb-2">
            <c-icon name="dollar-sign" size="20" />
            <span class="text-xs opacity-80">Revenue</span>
        </div>
        <div class="text-2xl font-bold">$142.8K</div>
        <div class="text-xs opacity-80">+12% from last month</div>
    </div>
    
    <div class="bg-gradient-to-r from-secondary to-secondary/80 text-secondary-content p-4 rounded-lg">
        <div class="flex items-center justify-between mb-2">
            <c-icon name="users" size="20" />
            <span class="text-xs opacity-80">Customers</span>
        </div>
        <div class="text-2xl font-bold">3,247</div>
        <div class="text-xs opacity-80">+8% from last month</div>
    </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