🥞Components
PlainAdmin has more than 300 components, and you can use them to build any kind of dashboard you need.
Here are a few examples of the components:
Form Input Field:
We got all the form elements. Below is the form’s input field. The input fields have three different styles. You can use them according to your needs.
<div class="card-style mb-30">
<h6 class="mb-25">Input Fields</h6>
<div class="input-style-1">
<label>Full Name</label>
<input type="text" placeholder="Full Name">
</div>
<!-- end input -->
<div class="input-style-2">
<input type="text" placeholder="Full Name">
<span class="icon"> <i class="lni lni-user"></i> </span>
</div>
<!-- end input -->
<div class="input-style-3">
<input type="text" placeholder="Full Name">
<span class="icon"><i class="lni lni-user"></i></span>
</div>
<!-- end input -->
</div>Analytics Chart:
PlainAdmin offers all types of charts for managing site analytics. You can utilize them to manage and improve your site.
Here’s an example of a visitor analytics chart.
<div class="card-style mb-30">
<div class="title d-flex flex-wrap align-items-center justify-content-between mb-10">
<div class="left">
<h6 class="cards-title text-semi-bold mb-1">Campaign Visitors</h6>
<p class="text-gray text-sm">
Detailed analytics of this campaing
</p>
</div>
<div class="right">
<div class="select-style-1 mb-2">
<div class="select-position select-sm">
<select class="light-bg">
<option value="">Monthly</option>
<option value="">Yearly</option>
<option value="">Weekly</option>
</select>
</div>
</div>
<!-- end select -->
</div>
</div>
<!-- End Title -->
<div class="chart">
<canvas id="Chart4" style="width: 100%; height: 420px; margin-left: -35px;"></canvas>
<div id="legend4">
<ul class="legend-marketing d-flex gap-5 flex-wrap mt-30">
<li>
<div class="d-flex">
<div class="icon">
<svg width="10" height="21" viewBox="0 0 10 21" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M5.0868 20.2701C4.7667 20.2701 4.5019 20.1442 4.2926 19.8923C4.0832 19.6545 3.9786 19.3607 3.9786 19.0109V17.29L4.4773 17.7937C3.6276 17.7657 2.88881 17.6468 2.26081 17.4369C1.6328 17.2271 1.10947 16.9962 0.6908 16.7444C0.4199 16.5905 0.229039 16.3806 0.118209 16.1148C0.0196994 15.849 -0.0172404 15.5762 0.00738962 15.2963C0.0320196 15.0025 0.118209 14.7507 0.265979 14.5408C0.413739 14.317 0.60461 14.1701 0.83857 14.1001C1.08484 14.0302 1.3619 14.0861 1.66974 14.268C1.96527 14.4499 2.37779 14.6388 2.90728 14.8346C3.4368 15.0165 4.0832 15.1075 4.8467 15.1075C5.4131 15.1075 5.8687 15.0375 6.2135 14.8976C6.5583 14.7437 6.8046 14.5478 6.9523 14.31C7.1124 14.0721 7.1925 13.7993 7.1925 13.4915C7.1925 13.2397 7.1371 13.0158 7.0262 12.8199C6.9277 12.6241 6.7492 12.4562 6.4906 12.3163C6.2443 12.1624 5.9118 12.0365 5.4932 11.9385L3.4614 11.4348C2.32853 11.155 1.48504 10.6793 0.93092 10.0078C0.3768 9.32224 0.0997396 8.44084 0.0997396 7.36353C0.0997396 6.52408 0.278289 5.77556 0.635389 5.11799C1.0048 4.46042 1.50967 3.92876 2.14998 3.52303C2.80261 3.11729 3.5661 2.87245 4.4403 2.7885L3.9786 3.12429V1.52932C3.9786 1.17955 4.0832 0.885742 4.2926 0.647892C4.5019 0.396062 4.7667 0.270142 5.0868 0.270142C5.3947 0.270142 5.6532 0.396062 5.8626 0.647892C6.0719 0.885742 6.1766 1.17955 6.1766 1.52932V3.12429L5.7148 2.74653C6.2197 2.77451 6.7615 2.88644 7.3402 3.08231C7.9313 3.26419 8.4423 3.53002 8.8733 3.87979C9.1073 4.04768 9.2673 4.25755 9.3535 4.50938C9.452 4.76122 9.4767 5.01306 9.4274 5.26489C9.3905 5.51673 9.2981 5.74058 9.1504 5.93646C9.0026 6.11834 8.8056 6.23726 8.5593 6.29322C8.3253 6.3352 8.0483 6.26524 7.7281 6.08336C7.3956 5.90148 7.0324 5.74758 6.6383 5.62166C6.2443 5.49574 5.7579 5.43278 5.1792 5.43278C4.4527 5.43278 3.8862 5.60068 3.4799 5.93646C3.0858 6.27224 2.88881 6.70596 2.88881 7.23761C2.88881 7.62936 3.0058 7.94415 3.2397 8.182C3.486 8.41984 3.9108 8.61574 4.5142 8.76964L6.5645 9.27324C7.7343 9.56714 8.5962 10.0427 9.1504 10.7003C9.7168 11.3579 10 12.2113 10 13.2607C10 14.0861 9.8215 14.8206 9.4644 15.4642C9.1073 16.0938 8.6147 16.6045 7.9867 16.9962C7.3587 17.388 6.626 17.6398 5.7887 17.7517L6.1766 17.269V19.0109C6.1766 19.3607 6.0719 19.6545 5.8626 19.8923C5.6656 20.1442 5.407 20.2701 5.0868 20.2701Z"
fill="#365CF5" />
</svg>
</div>
<div>
<h3 class="fw-semibold">$63,489.50</h3>
<p class="text-sm">Total Earnings</p>
</div>
</div>
</li>
<li>
<div class="d-flex">
<span class="bg-color primary-bg"> </span>
<div class="text">
<p class="text-sm">Earnings this month</p>
<h5 class="fw-semibold">$48,820</h5>
</div>
</div>
</li>
<li>
<div class="d-flex">
<span class="bg-color blue-light-bg"></span>
<div class="text">
<p class="text-sm">Expense this month</p>
<h5 class="fw-semibold">$26,498</h5>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>Todo List:
You can build a fully functional task manager inside your dashboard and manage tasks from there. You can use the Task Component for the tasks.
<div class="card-style px-0 mb-30">
<div class="title d-flex flex-wrap pl-30 pr-30 mb-10 align-items-center justify-content-between">
<h6>
Today All Task
<span class="text-regular text-sm">(15 Task)</span>
</h6>
<div class="d-flex align-items-center">
<h6>Sort By:</h6>
<div class="select-style-1 mb-0 ml-10">
<div class="select-position">
<select class="p-0 pe-5 border-0">
<option value="">Unread</option>
<option value="">Date</option>
<option value="">Name</option>
</select>
</div>
</div>
</div>
</div>
<div class="table-wrapper table-responsive task-table">
<table class="table">
<tbody>
<tr>
<td>
<div class="check-input-primary">
<input class="form-check-input" type="checkbox" id="checkbox-1" />
</div>
</td>
<td class="min-width name-title">
<h5 class="text-bold text-dark">
Admin Dashboard Design
</h5>
</td>
<td class="min-width">
<p>
<i class="lni lni-calendar mr-10"></i> 22 February,2024
</p>
</td>
<td class="min-width">
<p><i class="lni lni-comments mr-10"></i> 30 Messages</p>
</td>
<td class="min-width">
<div class="employee-image mx-auto">
<img src="assets/images/lead/lead-1.png" alt="" />
</div>
</td>
<td class="min-width">
<div class="action justify-content-end">
<button class="text-dark link-btn">
<i class="lni lni-link"></i>
</button>
<button class="text-dark delete-btn ml-10">
<i class="lni lni-trash-can"></i>
</button>
<button class="more-btn ml-10 dropdown-toggle" id="moreAction1" data-bs-toggle="dropdown"
aria-expanded="false">
<i class="lni lni-more-alt"></i>
</button>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="moreAction1">
<li class="dropdown-item">
<a href="#0" class="text-gray">Mark as Read</a>
</li>
<li class="dropdown-item">
<a href="#0" class="text-gray">Reply</a>
</li>
</ul>
</div>
</td>
</tr>
<!-- end table row -->
<tr>
<td>
<div class="check-input-primary">
<input class="form-check-input" type="checkbox" id="checkbox-2" />
</div>
</td>
<td class="min-width name-title">
<h5 class="text-bold text-dark">
Web Development Services
</h5>
</td>
<td class="min-width">
<p>
<i class="lni lni-calendar mr-10"></i> 22 February,2024
</p>
</td>
<td class="min-width">
<p><i class="lni lni-comments mr-10"></i> 30 Messages</p>
</td>
<td class="min-width">
<div class="employee-image mx-auto">
<img src="assets/images/lead/lead-2.png" alt="" />
</div>
</td>
<td class="min-width">
<div class="action justify-content-end">
<button class="text-dark link-btn">
<i class="lni lni-link"></i>
</button>
<button class="text-dark delete-btn ml-10">
<i class="lni lni-trash-can"></i>
</button>
<button class="more-btn ml-10 dropdown-toggle" id="moreAction2" data-bs-toggle="dropdown"
aria-expanded="false">
<i class="lni lni-more-alt"></i>
</button>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="moreAction2">
<li class="dropdown-item">
<a href="#0" class="text-gray">Mark as Read</a>
</li>
<li class="dropdown-item">
<a href="#0" class="text-gray">Reply</a>
</li>
</ul>
</div>
</td>
</tr>
<!-- end table row -->
<tr>
<td>
<div class="check-input-primary">
<input class="form-check-input" type="checkbox" id="checkbox-3" />
</div>
</td>
<td class="min-width name-title">
<h5 class="text-bold text-dark">
Lindy UI KIt Landing Page Design
</h5>
</td>
<td class="min-width">
<p>
<i class="lni lni-calendar mr-10"></i> 22 February,2024
</p>
</td>
<td class="min-width">
<p><i class="lni lni-comments mr-10"></i> 30 Messages</p>
</td>
<td class="min-width">
<div class="employee-image mx-auto">
<img src="assets/images/lead/lead-3.png" alt="" />
</div>
</td>
<td class="min-width">
<div class="action justify-content-end">
<button class="text-dark link-btn">
<i class="lni lni-link"></i>
</button>
<button class="text-dark delete-btn ml-10">
<i class="lni lni-trash-can"></i>
</button>
<button class="more-btn ml-10 dropdown-toggle" id="moreAction3" data-bs-toggle="dropdown"
aria-expanded="false">
<i class="lni lni-more-alt"></i>
</button>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="moreAction3">
<li class="dropdown-item">
<a href="#0" class="text-gray">Mark as Read</a>
</li>
<li class="dropdown-item">
<a href="#0" class="text-gray">Reply</a>
</li>
</ul>
</div>
</td>
</tr>
<!-- end table row -->
<tr>
<td>
<div class="check-input-primary">
<input class="form-check-input" type="checkbox" id="checkbox-4" />
</div>
</td>
<td class="min-width name-title">
<h5 class="text-bold text-dark">ios Mobile App Design</h5>
</td>
<td class="min-width">
<p>
<i class="lni lni-calendar mr-10"></i> 22 February,2024
</p>
</td>
<td class="min-width">
<p><i class="lni lni-comments mr-10"></i> 30 Messages</p>
</td>
<td class="min-width">
<div class="employee-image mx-auto">
<img src="assets/images/lead/lead-4.png" alt="" />
</div>
</td>
<td class="min-width">
<div class="action justify-content-end">
<button class="text-dark link-btn">
<i class="lni lni-link"></i>
</button>
<button class="text-dark delete-btn ml-10">
<i class="lni lni-trash-can"></i>
</button>
<button class="more-btn ml-10 dropdown-toggle" id="moreAction4" data-bs-toggle="dropdown"
aria-expanded="false">
<i class="lni lni-more-alt"></i>
</button>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="moreAction4">
<li class="dropdown-item">
<a href="#0" class="text-gray">Mark as Read</a>
</li>
<li class="dropdown-item">
<a href="#0" class="text-gray">Reply</a>
</li>
</ul>
</div>
</td>
</tr>
<!-- end table row -->
<tr>
<td>
<div class="check-input-primary">
<input class="form-check-input" type="checkbox" id="checkbox-5" />
</div>
</td>
<td class="min-width name-title">
<h5 class="text-bold text-dark">Product Landing Page</h5>
</td>
<td class="min-width">
<p>
<i class="lni lni-calendar mr-10"></i> 22 February,2024
</p>
</td>
<td class="min-width">
<p><i class="lni lni-comments mr-10"></i> 30 Messages</p>
</td>
<td class="min-width">
<div class="employee-image mx-auto">
<img src="assets/images/lead/lead-5.png" alt="" />
</div>
</td>
<td class="min-width">
<div class="action justify-content-end">
<button class="text-dark link-btn">
<i class="lni lni-link"></i>
</button>
<button class="text-dark delete-btn ml-10">
<i class="lni lni-trash-can"></i>
</button>
<button class="more-btn ml-10 dropdown-toggle" id="moreAction5" data-bs-toggle="dropdown"
aria-expanded="false">
<i class="lni lni-more-alt"></i>
</button>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="moreAction5">
<li class="dropdown-item">
<a href="#0" class="text-gray">Mark as Read</a>
</li>
<li class="dropdown-item">
<a href="#0" class="text-gray">Reply</a>
</li>
</ul>
</div>
</td>
</tr>
<!-- end table row -->
<tr>
<td>
<div class="check-input-primary">
<input class="form-check-input" type="checkbox" id="checkbox-6" />
</div>
</td>
<td class="min-width name-title">
<h5 class="text-bold text-dark">
Space multipurpose template
</h5>
</td>
<td class="min-width">
<p>
<i class="lni lni-calendar mr-10"></i> 22 February,2024
</p>
</td>
<td class="min-width">
<p><i class="lni lni-comments mr-10"></i> 30 Messages</p>
</td>
<td class="min-width">
<div class="employee-image mx-auto">
<img src="assets/images/lead/lead-6.png" alt="" />
</div>
</td>
<td class="min-width">
<div class="action justify-content-end">
<button class="text-dark link-btn">
<i class="lni lni-link"></i>
</button>
<button class="text-dark delete-btn ml-10">
<i class="lni lni-trash-can"></i>
</button>
<button class="more-btn ml-10 dropdown-toggle" id="moreAction6" data-bs-toggle="dropdown"
aria-expanded="false">
<i class="lni lni-more-alt"></i>
</button>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="moreAction6">
<li class="dropdown-item">
<a href="#0" class="text-gray">Mark as Read</a>
</li>
<li class="dropdown-item">
<a href="#0" class="text-gray">Reply</a>
</li>
</ul>
</div>
</td>
</tr>
<!-- end table row -->
</tbody>
</table>
<!-- end table -->
</div>
</div>Last updated
