Home
Alif Bima Pradana
SalivaGuard Dashboard Modern

SalivaGuard Dashboard Modern

This is a mobile app interface design (Android style) for "SalivaGuard AI." I've designed it in a single file that includes HTML, CSS (via Tailwind), and JavaScript for the interaction logic.

This tailwind example is contributed by Alif Bima Pradana, on 17-Feb-2026. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Admin Dashboard, User dashboard

Dashboard

Author Alif Bima Pradana

Fork Fullscreen

<!DOCTYPE html>
<html lang="id" class="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>SalivaHealth AI - Sensor Monitoring</title>
    
    
    <script src="https://cdn.tailwindcss.com"></script>
    
    
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    
    <script src="https://unpkg.com/lucide@latest"></script>

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

<script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        primary: '#6102f0',
                        primaryDark: '#4a00c2',
                        secondary: '#8b5cf6',
                        bgDark: '#0f172a',
                        surfaceDark: '#1e293b',
                        success: '#10b981',
                        warning: '#f59e0b',
                        danger: '#ef4444'
                    },
                    fontFamily: {
                        sans: ['"Plus Jakarta Sans"', 'sans-serif'],
                    },
                    animation: {
                        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
                        'float': 'float 3s ease-in-out infinite',
                    }
                }
            }
        }
    </script>

.glass {
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-bottom: 1px solid rgba(0,0,0,0.05);
        }
        .dark .glass {
            background: rgba(15, 23, 42, 0.8);
            border-bottom: 1px solid rgba(255,255,255,0.05);
        }

.page-section {
            display: none;
            opacity: 0;
            transition: opacity 0.3s ease-in-out;
        }
        .page-section.active {
            display: block;
            opacity: 1;
            animation: fadeIn 0.4s ease-out;
        }

@keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

/* Custom Chart Styles for Dark Mode */
        .dark .apexcharts-tooltip {
            background: #1e293b !important;
            border-color: #334155 !important;
            color: #fff;
        }
        .dark .apexcharts-tooltip-title {
            background: #0f172a !important;
            border-bottom: 1px solid #334155 !important;
        }
        .dark .apexcharts-text {
            fill: #94a3b8 !important; 
        }
        .dark .apexcharts-gridline {
            stroke: #334155 !important;
        }
    </style>
</head>
<body class="bg-slate-50 text-slate-900 dark:bg-bgDark dark:text-white transition-colors duration-300 font-sans h-screen overflow-hidden flex flex-col">

<header class="fixed top-0 w-full z-50 px-6 py-4 glass flex justify-between items-center transition-colors duration-300">
        <div class="flex items-center gap-2">
            <div class="w-8 h-8 rounded-lg bg-primary flex items-center justify-center text-white shadow-lg shadow-primary/40">
                <i data-lucide="cpu" class="w-5 h-5"></i>
            </div>
            <span class="font-bold text-xl tracking-tight">Saliva<span class="text-primary">Guard</span></span>
        </div>
        <div class="flex items-center gap-3">
            
            <div id="connection-status" class="flex items-center gap-1.5 px-3 py-1 rounded-full bg-slate-200 dark:bg-slate-800 text-slate-500 text-xs font-medium transition-colors">
                <span class="w-2 h-2 rounded-full bg-slate-400" id="status-dot"></span>
                <span id="status-text">Offline</span>
            </div>
            <button onclick="toggleTheme()" class="p-2 rounded-full bg-slate-200 dark:bg-slate-800 text-slate-600 dark:text-slate-300 hover:bg-slate-300 dark:hover:bg-slate-700 transition-all">
                <i data-lucide="moon" class="w-5 h-5 block dark:hidden"></i>
                <i data-lucide="sun" class="w-5 h-5 hidden dark:block"></i>
            </button>
        </div>
    </header>

<main class="flex-1 pt-20 pb-24 overflow-y-auto no-scrollbar px-5 relative">
        
        
        <section id="home-page" class="page-section active">
            
            
            <div class="flex justify-between items-end mb-6">
                <div>
                    <h2 class="text-2xl font-bold">Monitor Realtime</h2>
                    <p class="text-xs text-slate-500 dark:text-slate-400">Data sensor Arduino langsung.</p>
                </div>
                <button onclick="toggleSensorConnection()" id="connect-btn" class="px-4 py-2 bg-primary text-white text-xs font-bold rounded-xl shadow-lg shadow-primary/30 active:scale-95 transition-all flex items-center gap-2">
                    <i data-lucide="wifi" class="w-4 h-4"></i>
                    Hubungkan
                </button>
            </div>

<div class="space-y-6">
                
                
                <div class="bg-white dark:bg-surfaceDark rounded-3xl p-5 shadow-sm border border-slate-100 dark:border-slate-800">
                    <div class="flex justify-between items-center mb-2">
                        <div class="flex items-center gap-2">
                            <div class="p-2 rounded-lg bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400">
                                <i data-lucide="droplet" class="w-4 h-4"></i>
                            </div>
                            <div>
                                <h3 class="text-sm font-bold">pH Level</h3>
                                <p class="text-[10px] text-slate-500">Keasaman Sampel</p>
                            </div>
                        </div>
                        <span id="ph-value" class="text-xl font-bold text-blue-600">7.0</span>
                    </div>
                    
                    <div id="chart-ph" class="h-40 w-full"></div>
                </div>

<div class="bg-white dark:bg-surfaceDark rounded-3xl p-5 shadow-sm border border-slate-100 dark:border-slate-800">
                    <div class="flex justify-between items-center mb-2">
                        <div class="flex items-center gap-2">
                            <div class="p-2 rounded-lg bg-purple-100 dark:bg-purple-900/30 text-purple-600 dark:text-purple-400">
                                <i data-lucide="eye" class="w-4 h-4"></i>
                            </div>
                            <div>
                                <h3 class="text-sm font-bold">Kekeruhan</h3>
                                <p class="text-[10px] text-slate-500">Sensor Warna</p>
                            </div>
                        </div>
                        <span id="color-value" class="text-xl font-bold text-purple-600">0 NTU</span>
                    </div>
                    
                    <div id="chart-color" class="h-40 w-full"></div>
                </div>

<div class="bg-white dark:bg-surfaceDark rounded-3xl p-5 shadow-sm border border-slate-100 dark:border-slate-800">
                    <div class="flex justify-between items-center mb-2">
                        <div class="flex items-center gap-2">
                            <div class="p-2 rounded-lg bg-orange-100 dark:bg-orange-900/30 text-orange-600 dark:text-orange-400">
                                <i data-lucide="scale" class="w-4 h-4"></i>
                            </div>
                            <div>
                                <h3 class="text-sm font-bold">Viskositas</h3>
                                <p class="text-[10px] text-slate-500">Load Cell (Gram)</p>
                            </div>
                        </div>
                        <span id="load-value" class="text-xl font-bold text-orange-600">0 g</span>
                    </div>
                    
                    <div id="chart-load" class="h-40 w-full"></div>
                </div>

</div>

<div class="mt-6">
                <button onclick="startFullAnalysis()" id="analyze-btn" disabled class="w-full py-4 rounded-2xl bg-slate-200 dark:bg-slate-800 text-slate-400 font-bold flex items-center justify-center gap-2 transition-all">
                    <i data-lucide="brain-circuit" class="w-5 h-5"></i>
                    Menunggu Data Sensor...
                </button>
            </div>
        </section>

<section id="analysis-page" class="page-section hidden h-full flex flex-col items-center justify-center text-center">
            <div class="relative w-40 h-40 mb-8">
                
                <div class="absolute inset-0 rounded-full border-4 border-slate-200 dark:border-slate-700 opacity-30"></div>
                <div class="absolute inset-0 rounded-full border-4 border-primary border-t-transparent animate-spin"></div>
                <div class="absolute inset-4 rounded-full bg-primary/10 flex items-center justify-center animate-pulse">
                    <i data-lucide="cpu" class="w-12 h-12 text-primary"></i>
                </div>
            </div>
            <h2 class="text-2xl font-bold mb-2">Memproses Data...</h2>
            <p class="text-slate-500 dark:text-slate-400 text-sm max-w-xs mx-auto">Gemini AI sedang mengkorelasikan data pH, Kekeruhan, dan Berat Jenis dari sensor.</p>
            
            <div class="mt-8 flex gap-4 text-xs font-mono text-slate-400">
                <span class="animate-pulse">pH: OK</span>
                <span class="animate-pulse delay-75">RGB: OK</span>
                <span class="animate-pulse delay-150">LOAD: OK</span>
            </div>
        </section>

<section id="result-page" class="page-section hidden">
            <div class="text-center mb-6">
                <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-400 mb-4 ring-4 ring-green-50 dark:ring-green-900/10">
                    <i data-lucide="check-circle-2" class="w-8 h-8"></i>
                </div>
                <h2 class="text-2xl font-bold">Diagnosis Selesai</h2>
                <p class="text-slate-500 dark:text-slate-400 text-xs">ID Tes: #ARD-SENSOR-001</p>
            </div>

<div class="bg-white dark:bg-surfaceDark rounded-3xl p-6 shadow-lg border-t-4 border-primary mb-6">
                <h3 class="font-bold text-lg mb-3">Ringkasan Sensor</h3>
                <div class="grid grid-cols-3 gap-2 mb-6 text-center">
                    <div class="p-2 bg-slate-50 dark:bg-slate-800 rounded-xl">
                        <div class="text-[10px] text-slate-500 uppercase">Rata-rata pH</div>
                        <div class="font-bold text-blue-600">7.2</div>
                    </div>
                    <div class="p-2 bg-slate-50 dark:bg-slate-800 rounded-xl">
                        <div class="text-[10px] text-slate-500 uppercase">Kekeruhan</div>
                        <div class="font-bold text-purple-600">Normal</div>
                    </div>
                    <div class="p-2 bg-slate-50 dark:bg-slate-800 rounded-xl">
                        <div class="text-[10px] text-slate-500 uppercase">Viskositas</div>
                        <div class="font-bold text-orange-600">Cair</div>
                    </div>
                </div>
                
                <h3 class="font-bold mb-2">Analisis AI:</h3>
                <p class="text-sm text-slate-600 dark:text-slate-300 leading-relaxed mb-4">
                    Berdasarkan input sensor, parameter biokimia sampel liur berada dalam rentang fisiologis normal. Tidak terdeteksi adanya asidosis atau infeksi bakteri berat berdasarkan profil kekeruhan.
                </p>
            </div>

<button onclick="openChatWithContext()" class="w-full py-4 rounded-2xl bg-gradient-to-r from-primary to-secondary text-white font-bold shadow-lg shadow-primary/30 flex items-center justify-center gap-2 hover:scale-[1.02] transition-transform">
                <i data-lucide="message-square-plus" class="w-5 h-5"></i>
                Tanya Gemini AI
            </button>
        </section>

<section id="chat-page" class="page-section hidden h-full flex flex-col">
            <div class="flex-1 bg-slate-50 dark:bg-bgDark overflow-y-auto no-scrollbar pb-4" id="chat-container">
                
                <div class="flex gap-3 mb-4">
                    <div class="w-8 h-8 rounded-full bg-primary flex-shrink-0 flex items-center justify-center text-white text-xs">
                        <i data-lucide="bot" class="w-4 h-4"></i>
                    </div>
                    <div class="bg-white dark:bg-surfaceDark p-3 rounded-2xl rounded-tl-none shadow-sm text-sm border border-slate-100 dark:border-slate-800 max-w-[80%]">
                        <p class="text-slate-700 dark:text-slate-200">Halo! Saya telah menerima data dari Arduino Anda. Ada yang ingin ditanyakan tentang grafik pH atau hasil sensor lainnya?</p>
                    </div>
                </div>
            </div>

</main>

<nav class="fixed bottom-0 w-full glass z-50 pb-safe pt-2 px-6 rounded-t-3xl shadow-[0_-5px_20px_rgba(0,0,0,0.05)] dark:shadow-[0_-5px_20px_rgba(0,0,0,0.2)]">
        <div class="flex justify-between items-center h-16">
            <button onclick="navTo('home-page')" class="nav-btn active flex flex-col items-center gap-1 text-primary transition-all">
                <i data-lucide="activity" class="w-6 h-6"></i>
                <span class="text-[10px] font-medium">Monitor</span>
            </button>
            
            <div class="relative -top-6">
                <button onclick="startFullAnalysis()" class="w-14 h-14 rounded-full bg-primary text-white shadow-lg shadow-primary/40 flex items-center justify-center transform transition hover:scale-110">
                    <i data-lucide="brain-circuit" class="w-7 h-7"></i>
                </button>
            </div>

<script>
        lucide.createIcons();

// --- GLOBAL VARIABLES ---
        let isConnected = false;
        let sensorInterval = null;
        let charts = {};
        
        // --- APEXCHARTS CONFIGURATION ---
        const commonOptions = {
            chart: {
                type: 'line',
                height: 160,
                toolbar: { show: false },
                animations: {
                    enabled: true,
                    easing: 'linear',
                    dynamicAnimation: { speed: 1000 }
                },
                background: 'transparent'
            },
            stroke: { curve: 'smooth', width: 3 },
            dataLabels: { enabled: false },
            xaxis: {
                labels: { show: false },
                axisBorder: { show: false },
                axisTicks: { show: false }
            },
            yaxis: { show: false },
            grid: {
                show: true,
                borderColor: '#f1f5f9',
                strokeDashArray: 4,
                padding: { top: 0, right: 0, bottom: 0, left: 10 } 
            },
            theme: { mode: 'light' } // Will update dynamically
        };

// Initialize Charts on Load
        document.addEventListener('DOMContentLoaded', () => {
            initCharts();
        });

function initCharts() {
            // 1. pH Chart
            charts.ph = new ApexCharts(document.querySelector("#chart-ph"), {
                ...commonOptions,
                series: [{ name: 'pH', data: [7, 7, 7, 7, 7, 7, 7, 7, 7, 7] }],
                colors: ['#2563eb'], // Blue
                yaxis: { min: 0, max: 14, show: false }
            });
            charts.ph.render();

// 2. Color/Turbidity Chart (Area)
            charts.color = new ApexCharts(document.querySelector("#chart-color"), {
                ...commonOptions,
                chart: { ...commonOptions.chart, type: 'area' },
                series: [{ name: 'Turbidity', data: [20, 22, 21, 23, 20, 21, 22, 20, 21, 20] }],
                colors: ['#9333ea'], // Purple
                yaxis: { min: 0, max: 100, show: false }
            });
            charts.color.render();

// 3. Load Cell Chart (Bar)
            charts.load = new ApexCharts(document.querySelector("#chart-load"), {
                ...commonOptions,
                chart: { ...commonOptions.chart, type: 'bar' },
                series: [{ name: 'Weight', data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0] }],
                colors: ['#ea580c'], // Orange
                yaxis: { min: 0, max: 50, show: false }
            });
            charts.load.render();
        }

// --- ARDUINO SIMULATION LOGIC ---
        function toggleSensorConnection() {
            const btn = document.getElementById('connect-btn');
            const statusDot = document.getElementById('status-dot');
            const statusText = document.getElementById('status-text');
            const analyzeBtn = document.getElementById('analyze-btn');

if (!isConnected) {
                // CONNECTING
                btn.innerHTML = `<i data-lucide="loader-2" class="w-4 h-4 animate-spin"></i> Menghubungkan...`;
                
                setTimeout(() => {
                    isConnected = true;
                    // Update UI
                    btn.innerHTML = `<i data-lucide="wifi-off" class="w-4 h-4"></i> Putuskan`;
                    btn.classList.replace('bg-primary', 'bg-red-500');
                    btn.classList.replace('shadow-primary/30', 'shadow-red-500/30');
                    
                    statusDot.classList.replace('bg-slate-400', 'bg-green-500');
                    statusText.innerText = "Online";
                    statusText.classList.add('text-green-600', 'font-bold');
                    
                    // Enable Analysis Button
                    analyzeBtn.disabled = false;
                    analyzeBtn.classList.remove('bg-slate-200', 'text-slate-400', 'dark:bg-slate-800');
                    analyzeBtn.classList.add('bg-primary', 'text-white', 'shadow-lg', 'shadow-primary/30');
                    analyzeBtn.innerHTML = `<i data-lucide="brain-circuit" class="w-5 h-5"></i> Analisis Sekarang`;

lucide.createIcons();
                    
                    // Start Data Stream
                    startDataStream();
                }, 1500);

} else {
                // DISCONNECTING
                isConnected = false;
                clearInterval(sensorInterval);
                
                // Update UI
                btn.innerHTML = `<i data-lucide="wifi" class="w-4 h-4"></i> Hubungkan`;
                btn.classList.replace('bg-red-500', 'bg-primary');
                btn.classList.replace('shadow-red-500/30', 'shadow-primary/30');
                
                statusDot.classList.replace('bg-green-500', 'bg-slate-400');
                statusText.innerText = "Offline";
                statusText.classList.remove('text-green-600', 'font-bold');

// Disable Analysis Button
                analyzeBtn.disabled = true;
                analyzeBtn.classList.add('bg-slate-200', 'text-slate-400', 'dark:bg-slate-800');
                analyzeBtn.classList.remove('bg-primary', 'text-white', 'shadow-lg', 'shadow-primary/30');
                analyzeBtn.innerHTML = `<i data-lucide="wifi-off" class="w-5 h-5"></i> Sensor Offline`;

lucide.createIcons();
            }
        }

function startDataStream() {
            // Initial data arrays
            let dataPH = [7, 7, 7, 7, 7, 7, 7, 7, 7, 7];
            let dataColor = [20, 20, 20, 20, 20, 20, 20, 20, 20, 20];
            let dataLoad = [5, 5, 5, 5, 5, 5, 5, 5, 5, 5];

sensorInterval = setInterval(() => {
                // Generate random sensor data (Simulation)
                const newPH = (Math.random() * (7.8 - 6.5) + 6.5).toFixed(1);
                const newColor = Math.floor(Math.random() * (40 - 20) + 20);
                const newLoad = Math.floor(Math.random() * (15 - 10) + 10);

// Update DOM Text
                document.getElementById('ph-value').innerText = newPH;
                document.getElementById('color-value').innerText = newColor + ' NTU';
                document.getElementById('load-value').innerText = newLoad + ' g';

// Shift arrays
                dataPH.push(newPH); dataPH.shift();
                dataColor.push(newColor); dataColor.shift();
                dataLoad.push(newLoad); dataLoad.shift();

// Update Charts
                charts.ph.updateSeries([{ data: dataPH }]);
                charts.color.updateSeries([{ data: dataColor }]);
                charts.load.updateSeries([{ data: dataLoad }]);

}, 1000); // Update every 1 second
        }

// --- NAVIGATION & UTILS ---
        function toggleTheme() {
            const html = document.documentElement;
            const isDark = html.classList.toggle('dark');
            html.classList.toggle('light');
            
            // Update Chart Theme
            const themeMode = isDark ? 'dark' : 'light';
            const gridColor = isDark ? '#334155' : '#f1f5f9';
            
            [charts.ph, charts.color, charts.load].forEach(chart => {
                chart.updateOptions({
                    theme: { mode: themeMode },
                    grid: { borderColor: gridColor }
                });
            });
        }

function navTo(pageId) {
            document.querySelectorAll('.page-section').forEach(el => {
                el.classList.remove('active');
                el.classList.add('hidden');
            });
            const target = document.getElementById(pageId);
            target.classList.remove('hidden');
            setTimeout(() => target.classList.add('active'), 10);

// Update Nav Icons
            document.querySelectorAll('.nav-btn').forEach(btn => {
                btn.classList.remove('text-primary');
                btn.classList.add('text-slate-400');
            });
        }

// Chat Logic
        const chatContainer = document.getElementById('chat-container');
        const chatInput = document.getElementById('chat-input');

function sendMessage() {
            const text = chatInput.value.trim();
            if (!text) return;
            addUserMessage(text);
            chatInput.value = '';
            setTimeout(() => {
                let response = "Berdasarkan grafik realtime, fluktuasi pH Anda stabil di angka normal.";
                addBotMessage(response);
            }, 1000);
        }

function addUserMessage(text) {
            const div = document.createElement('div');
            div.className = "flex gap-3 mb-4 flex-row-reverse animate-in slide-in-from-right-5 fade-in duration-300";
            div.innerHTML = `
                <div class="w-8 h-8 rounded-full bg-slate-200 dark:bg-slate-700 flex-shrink-0 flex items-center justify-center text-slate-600 dark:text-slate-300"><i data-lucide="user" class="w-4 h-4"></i></div>
                <div class="bg-primary text-white p-3 rounded-2xl rounded-tr-none shadow-md text-sm max-w-[80%]"><p>${text}</p></div>`;
            chatContainer.appendChild(div);
            scrollToBottom();
            lucide.createIcons();
        }

function addBotMessage(text) {
            const div = document.createElement('div');
            div.className = "flex gap-3 mb-4 animate-in slide-in-from-left-5 fade-in duration-300";
            div.innerHTML = `
                <div class="w-8 h-8 rounded-full bg-primary flex-shrink-0 flex items-center justify-center text-white text-xs"><i data-lucide="bot" class="w-4 h-4"></i></div>
                <div class="bg-white dark:bg-surfaceDark p-3 rounded-2xl rounded-tl-none shadow-sm text-sm border border-slate-100 dark:border-slate-800 max-w-[80%]"><p class="text-slate-700 dark:text-slate-200">${text}</p></div>`;
            chatContainer.appendChild(div);
            scrollToBottom();
            lucide.createIcons();
        }

function scrollToBottom() {
            chatContainer.scrollTop = chatContainer.scrollHeight;
        }

chatInput.addEventListener('keypress', function (e) {
            if (e.key === 'Enter') sendMessage();
        });
        
        // Context Chat Action
        function openChatWithContext() {
            navTo('chat-page');
        }

</script>
</body>
</html>

Related Examples

Infinity Premium Dashboard Tailwind
Website Dashboard Admin with tailwind CSS CDN, responsif via mobile and tablet

Author:
Alif Bima Pradana

1 week ago

37
canvas fully covers
canvas fully covers

Author:
ABDESLAMI ACHRAF

1 year ago

4.1k
quora/reddit
reddit / quora have some kind of same template. looksalikes. brothas

Author:
Katherine Glenn

1 year ago

1.8k
Adminpanel
Three tabs, switch between each other, change color when clicked. Tables with filter, search, with a drop-down form to fill.

Author:
Алла Телегина

11 months ago

1.7k
Analytics dashboard with multiple chart types
Analytics Dashboard Comprehensive data insights and performance metrics

Author:
Alif Bima Pradana

4 days ago

69
Acode Master - FB & WhatsApp UI Combo
Description (meta description) ni tag ikoreshwa mu mutwe (head) wa HTML igaragaza mu ncamake icyo urubuga cyangwa urupapuro rwawe ruvuga. Iyi description ikoreshwa cyane na search engines (nka Google) mu kwerekana summary y’urubuga mu bisubizo by’ubushakashatsi.

Author:
Code Master(Mfuranziza Dusabe Hamza)

8 months ago

616
Total balance overview

Author:
Raul antonio de la cruz hernandez

3 months ago

376
Tailwind Dashboard
full responsive

Author:
Tanvir Hasan Bappy (Tanvir)

10 months ago

1.8k
sidebar orange colour

Author:
Abhishek Kumar

5 months ago

632
Admin panel with collapsible menus

Author:
Rajesh Maheshwari

11 months ago

5.4k
Best Chatting dashboard
create a modern WhatsApp-like chat dashboard with 3D effects, animations, and a sleek design. This will be a static view showcasing the interface with Nicole Shalom as the developer.

Author:
Nicole Shalom

8 months ago

988
Boilerplate for Admin Panal

Author:
Brandon D

3 years ago

15.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components