App Widgets
Utility & Content Widgets - Practical additions that add polish and utility to your dashboard.
Utility & Content Widgets
API Status Monitor
Monitor the status of your key third-party services at a glance.
Service Status
Stripe Payment API
Payment ProcessingAWS S3
File StorageSendGrid Email
Email ServiceTwilio SMS
Messaging ServiceRedis Cache
Caching LayerWidget Code
<div class="card">
<div class="card-header">
<h6 class="card-title mb-0">Service Status</h6>
</div>
<div class="card-body">
<div class="d-flex justify-content-between align-items-center mb-3">
<div class="d-flex align-items-center gap-3">
<div class="status-indicator bg-success rounded-circle"
style="width: 12px; height: 12px;"></div>
<div>
<h6 class="mb-0">Stripe Payment API</h6>
<small class="text-muted">Payment Processing</small>
</div>
</div>
<span class="badge bg-success">Operational</span>
</div>
</div>
</div>
Quick Links / Bookmarks
Configurable widget for frequently used sections and external tools.
Widget Code
<div class="card">
<div class="card-header">
<h6 class="card-title mb-0">Quick Links</h6>
</div>
<div class="card-body">
<div class="row g-3">
<div class="col-6">
<a href="#" class="d-flex flex-column align-items-center
p-3 rounded border border-primary text-decoration-none">
<i class="material-symbols-rounded text-primary mb-2">
analytics
</i>
<span class="small">Analytics</span>
</a>
</div>
</div>
</div>
</div>
RSS / News Feed
Display external RSS feeds like industry news or company blogs.
Latest News
New AI Models Released for Enterprise
Leading tech companies announce breakthrough in artificial intelligence capabilities...
Market Trends Show Strong Q4 Growth
Analysts predict continued momentum in the tech sector as fourth quarter approaches...
New Security Protocols Announced
Industry leaders collaborate on enhanced cybersecurity measures for cloud services...
Platform Update: New Features Available
Our latest platform release includes improved analytics and user management tools...
Widget Code
<div class="card">
<div class="card-header">
<h6 class="card-title mb-0">Latest News</h6>
</div>
<div class="card-body">
<div class="mb-3 pb-3 border-bottom">
<div class="d-flex gap-2 mb-2">
<span class="badge bg-primary">Tech</span>
<small class="text-muted">2 hours ago</small>
</div>
<h6 class="mb-1">
<a href="#">New AI Models Released</a>
</h6>
<p class="small text-muted mb-0">
Leading tech companies announce breakthrough...
</p>
</div>
</div>
</div>
World Clocks
Track time across multiple time zones for global teams.
Time Zones
12:30 PM
New York5:30 PM
London2:30 AM
Tokyo4:30 AM
SydneyWidget Code
<div class="card">
<div class="card-header">
<h6 class="card-title mb-0">Time Zones</h6>
</div>
<div class="card-body">
<div class="row g-3">
<div class="col-6">
<div class="text-center p-3 rounded bg-body-tertiary">
<i class="material-symbols-rounded text-primary mb-2">
schedule
</i>
<h5 class="mb-1 orbitron" id="time-ny">12:30 PM</h5>
<small class="text-muted">New York</small>
<div class="small text-muted">EST (UTC-5)</div>
</div>
</div>
</div>
</div>
</div>
Weather Widget
Display current weather conditions and forecast.
San Francisco
Monday, November 5, 2025
72°
Partly Cloudy
Widget Code
<div class="card bg-gradient">
<div class="card-body text-white">
<div class="d-flex justify-content-between">
<div>
<h4 class="mb-1">San Francisco</h4>
<p class="mb-0">Monday, November 5, 2025</p>
</div>
</div>
<div class="d-flex align-items-center my-4">
<i class="material-symbols-rounded me-3">
partly_cloudy_day
</i>
<div>
<h1 class="display-1 mb-0">72°</h1>
<p class="mb-0">Partly Cloudy</p>
</div>
</div>
<div class="row g-3">
<div class="col-4 text-center">
<i class="material-symbols-rounded">air</i>
<div class="small">Wind</div>
<strong>12 mph</strong>
</div>
</div>
</div>
</div>
Quick File Upload
Drag-and-drop file upload with recent uploads list.
Upload Files
Drag & Drop Files Here
or click to browse
Recent Uploads
Widget Code
<div class="card">
<div class="card-header">
<h6 class="card-title mb-0">Upload Files</h6>
</div>
<div class="card-body">
<div class="border-2 border-dashed rounded p-5 text-center">
<i class="material-symbols-rounded text-primary mb-3">
cloud_upload
</i>
<h6 class="mb-2">Drag & Drop Files Here</h6>
<p class="text-muted small">or click to browse</p>
<button class="btn btn-primary btn-sm">
Choose Files
</button>
</div>
<h6 class="mb-3 mt-4">Recent Uploads</h6>
<div class="d-flex justify-content-between">
<div class="d-flex align-items-center gap-2">
<i class="material-symbols-rounded">description</i>
<div>
<div class="small fw-bold">project-proposal.pdf</div>
<div class="text-muted">2.4 MB</div>
</div>
</div>
<button class="btn btn-sm btn-secondary">Download</button>
</div>
</div>
</div>