LogoStilauDev
Navigation

Real-World Examples

See how our components can be combined to build practical UI sections and applications.

Admin Dashboard Interface

A showcase of an admin dashboard featuring stats cards, a user table, and a notification panel, built with our UI components.

Analytics Overview

Key metrics and user activity.

Total Users

12,345
Trending up
+12%

Revenue

$45,678
Positive growth
+8%

Orders

1,234
Slight dip
-3%

Server Load

87%
High load alert
+15%

Recent Users

UserRoleStatusActions
JDAdminActive
JSUserActive
BJModeratorInactive

Notifications

New user registered

John Doe just signed up.

2m ago

Server alert!

High CPU usage detected on primary server.

5m ago

Payment received

Order #12345 payment of $299 processed.

10m ago

Code Snippet for Dashboard Layout

Below is a simplified JSX structure for the dashboard example. Specific component implementations (like StatusBox, tables) would be in their respective files.

tsx

// Example: components/MyDashboard.tsx
import React from 'react';
import { Button, Card, Badge, StatusBox, AnimatedProgressBar } from '@/components/ui'; // Assuming barrel file
import { RefreshCw, Download, Edit, User as UserIcon, AlertCircle, CheckCircle, TrendingUp } from 'lucide-react';

// Mock data would be passed as props or fetched
const dashboardStats = [/* ... as defined ... */];
const users = [/* ... as defined ... */];
const notifications = [/* ... as defined ... */];

export default function MyDashboard() {
  return (
    <Card className="p-0 overflow-hidden">
      <div className="p-6 border-b">
        {/* ... Header ... */}
      </div>
      <div className="p-6 space-y-8">
        {/* Stats Grid */}
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
          {dashboardStats.map(stat => (
            <StatusBox key={stat.title} {...stat} />
          ))}
        </div>
        {/* User Table & Notifications */}
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          <div className="lg:col-span-2">
            {/* ... User Table JSX ... */}
          </div>
          <div>
            {/* ... Notifications Panel JSX ... */}
          </div>
        </div>
      </div>
    </Card>
  );
}