Framework

All Frameworks
bootstrap tailwind chakra

Theme

All Themes
Horizon UI Dashboard AdminKit Chakra UI Dashboard Motion Landing Library Asteria Dashboard Soft UI Dashboard Motion Landing Library React Riva Dashboard Tailwind Soft UI Design System Argon Dashboard Soft UI Dashboard Tailwind
All 689
Forms 16
Charts 21
Navbars 45
Sidebars 27
Typography 42
Components 62
Tables 34
Cards 70
Contact Us 9
Testimonials 19
General 6
Features 25
Cards Section 38
Teams Section 11
Faq 9
Headers 47
Blogs 15
Contacts Section 9
Profiles Section 13
Charts Section 7
Tables Section 15
Contents 18
Logo Areas 12
Projects Section 14
Stats 13
Authentication 15
Call To Actions 21
Http Codes 6
Teams 16
Pricing 13

UI Components Library

Discover 689 components available in Loopple’s library! Create modern templates without creativity of a designer

Navbar Dark

Component from Riva Dashboard Tailwind Builder

Table Products

Component from Soft UI Dashboard Tailwind Builder

Typography H1

Component from Riva Dashboard Tailwind Builder
Requires JavaScript

Chart Line Nav

Component from Argon Dashboard Builder 
<div class="card bg-default draggable">
  <div class="card-header bg-transparent">
      <div class="row align-items-center">
        <div class="col">
          <h6 class="text-light text-uppercase ls-1 mb-1">Overview</h6>
          <h5 class="h3 text-white mb-0">Sales value</h5>
        </div>
        <div class="col">
        <ul class="nav nav-pills justify-content-end">
          <li class="nav-item mr-2 mr-md-0" data-toggle="chart">
            <a href="#" class="nav-link py-2 px-3 active" data-toggle="tab">
              <span class="d-none d-md-block">Month</span>
              <span class="d-md-none">M</span>
            </a>
          </li>
          <li class="nav-item" data-toggle="chart">
            <a href="#" class="nav-link py-2 px-3" data-toggle="tab">
              <span class="d-none d-md-block">Week</span>
              <span class="d-md-none">W</span>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="card-body">
    <div class="chart">
      <canvas id="chart-sales-dark" class="chart-line chart-canvas"></canvas>
    </div>
  </div>
</div>

<script>
var chartsLine = document.querySelectorAll(".chart-line");

chartsLine.forEach(function(chart) {
    if (!chart.getAttribute('data-chart-initialized')) {

        new Chart(chart, {
            type: "line",
            data: {
                labels: ["May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
                datasets: [{
                    label: "Performance",
                    tension: 0.4,
                    borderWidth: 4,
                    borderColor: "#5e72e4",
                    pointRadius: 0,
                    backgroundColor: "transparent",
                    data: [0, 20, 10, 30, 15, 40, 20, 60, 60],
                }, ],
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                legend: {
                    display: false,
                },
                tooltips: {
                    enabled: true,
                    mode: "index",
                    intersect: false,
                },
                scales: {
                    yAxes: [{
                        barPercentage: 1.6,
                        gridLines: {
                            drawBorder: false,
                            color: "rgba(29,140,248,0.0)",
                            zeroLineColor: "transparent",
                        },
                        ticks: {
                            padding: 0,
                            fontColor: "#8898aa",
                            fontSize: 13,
                            fontFamily: "Open Sans",
                        },
                    }, ],
                    xAxes: [{
                        barPercentage: 1.6,
                        gridLines: {
                            drawBorder: false,
                            color: "rgba(29,140,248,0.0)",
                            zeroLineColor: "transparent",
                        },
                        ticks: {
                            padding: 10,
                            fontColor: "#8898aa",
                            fontSize: 13,
                            fontFamily: "Open Sans",
                        },
                    }, ],
                },
                layout: {
                    padding: 0,
                },
            },
        });
        chart.setAttribute("data-chart-initialized", "true");
    }
});
</script>

Blog Digital Agency Software

Component from Soft UI Design System Builder

Input Icon Right

Component from Riva Dashboard Tailwind Builder

Table Visits

Component from Argon Dashboard Builder 
<div class="card draggable">
  <div class="card-header border-0">
    <div class="row align-items-center">
      <div class="col">
        <h3 class="mb-0">Page visits</h3>
      </div>
      <div class="col text-right">
        <a href="#!" class="btn btn-sm btn-primary">See all</a>
      </div>
    </div>
  </div>
  <div class="table-responsive">
    <table class="table align-items-center table-flush">
      <thead class="thead-light">
        <tr>
          <th scope="col">Page name</th>
          <th scope="col">Visitors</th>
          <th scope="col">Unique users</th>
          <th scope="col">Bounce rate</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">
            /argon/
          </th>
          <td>
            4,569
          </td>
          <td>
            340
          </td>
          <td>
            <i class="fas fa-arrow-up text-success mr-3"></i> 46,53%
          </td>
        </tr>
        <tr>
          <th scope="row">
            /argon/index.html
          </th>
          <td>
            3,985
          </td>
          <td>
            319
          </td>
          <td>
            <i class="fas fa-arrow-down text-warning mr-3"></i> 46,53%
          </td>
        </tr>
        <tr>
          <th scope="row">
            /argon/charts.html
          </th>
          <td>
            3,513
          </td>
          <td>
            294
          </td>
          <td>
            <i class="fas fa-arrow-down text-warning mr-3"></i> 36,49%
          </td>
        </tr>
        <tr>
          <th scope="row">
            /argon/tables.html
          </th>
          <td>
            2,050
          </td>
          <td>
            147
          </td>
          <td>
            <i class="fas fa-arrow-up text-success mr-3"></i> 50,87%
          </td>
        </tr>
        <tr>
          <th scope="row">
            /argon/profile.html
          </th>
          <td>
            1,795
          </td>
          <td>
            190
          </td>
          <td>
            <i class="fas fa-arrow-down text-danger mr-3"></i> 46,53%
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Card Simple

Component from Argon Dashboard Builder 
<div class="card draggable">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

Card Stats

Component from Argon Dashboard Builder 
<div class="card card-stats draggable">
  <div class="card-body">
    <div class="row">
      <div class="col">
        <h5 class="card-title text-uppercase text-muted mb-0">New users</h5>
        <span class="h2 font-weight-bold mb-0">2,356</span>
      </div>
      <div class="col-auto">
        <div class="icon icon-shape bg-orange text-white rounded-circle shadow">
          <i class="fa fa-chart-pie"></i>
        </div>
      </div>
    </div>
    <p class="mt-3 mb-0 text-sm">
      <span class="text-success mr-2">
        <i class="fa fa-arrow-up"></i> 3.48% </span>
      <span class="text-nowrap">Since last month</span>
    </p>
  </div>
</div>

Profile Section With Image

Component from Riva Dashboard Tailwind Builder 
<div class="relative flex flex-col w-full min-w-0 mb-6 break-words border border-dashed bg-clip-border rounded-2xl border-stone-200 bg-light/30 draggable">
  <!-- card body -->
  <div class="px-9 pt-9 flex-auto min-h-[70px] pb-0 bg-transparent">
    <div class="flex flex-wrap mb-6 xl:flex-nowrap">
      <div class="mb-5 mr-5">
        <div class="relative inline-block shrink-0 rounded-2xl">
          <img class="inline-block shrink-0 rounded-2xl w-[80px] h-[80px] lg:w-[160px] lg:h-[160px]" src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/riva-dashboard-tailwind/img/avatars/avatar1.jpg" alt="image" />
          <div class="group/tooltip relative">
            <span class="w-[15px] h-[15px] absolute bg-success rounded-full bottom-0 end-0 -mb-1 -mr-2  border border-white"></span>
            <span class="text-xs absolute z-10 transition-opacity duration-300 ease-in-out px-3 py-2 whitespace-nowrap text-center transform bg-white rounded-2xl shadow-sm bottom-0 -mb-2 start-full ml-4 font-medium text-secondary-inverse group-hover/tooltip:opacity-100 opacity-0 block"> Status: Active </span>
          </div>
        </div>
      </div>
      <div class="grow">
        <div class="flex flex-wrap items-start justify-between mb-2">
          <div class="flex flex-col">
            <div class="flex items-center mb-2">
              <a class="text-secondary-inverse hover:text-primary transition-colors duration-200 ease-in-out font-semibold text-[1.5rem] mr-1" href="javascript:void(0)"> Alec Jhonson </a>
            </div>
            <div class="flex flex-wrap pr-2 mb-4 font-medium">
              <a class="flex items-center mb-2 mr-5 text-secondary-dark hover:text-primary" href="javascript:void(0)">
                <span class="mr-1">
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5">
                    <path fill-rule="evenodd" d="M11.54 22.351l.07.04.028.016a.76.76 0 00.723 0l.028-.015.071-.041a16.975 16.975 0 001.144-.742 19.58 19.58 0 002.683-2.282c1.944-1.99 3.963-4.98 3.963-8.827a8.25 8.25 0 00-16.5 0c0 3.846 2.02 6.837 3.963 8.827a19.58 19.58 0 002.682 2.282 16.975 16.975 0 001.145.742zM12 13.5a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd" />
                  </svg>
                </span> New York, NY </a>
              <a class="flex items-center mb-2 mr-5 text-secondary-dark hover:text-primary" href="javascript:void(0)">
                <span class="mr-1">
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5">
                    <path d="M1.5 8.67v8.58a3 3 0 003 3h15a3 3 0 003-3V8.67l-8.928 5.493a3 3 0 01-3.144 0L1.5 8.67z" />
                    <path d="M22.5 6.908V6.75a3 3 0 00-3-3h-15a3 3 0 00-3 3v.158l9.714 5.978a1.5 1.5 0 001.572 0L22.5 6.908z" />
                  </svg>
                </span> [email protected] </a>
            </div>
          </div>
          <div class="flex flex-wrap my-auto">
            <a href="javascript:void(0)" class="inline-block px-6 py-3 mr-3 text-base font-medium leading-normal text-center align-middle transition-colors duration-150 ease-in-out border-0 shadow-none cursor-pointer rounded-2xl text-muted bg-light border-light hover:bg-light-dark active:bg-light-dark focus:bg-light-dark "> Follow </a>
            <a href="javascript:void(0)" class="inline-block px-6 py-3 text-base font-medium leading-normal text-center text-white align-middle transition-colors duration-150 ease-in-out border-0 shadow-none cursor-pointer rounded-2xl bg-primary hover:bg-primary-dark active:bg-primary-dark focus:bg-primary-dark "> Hire </a>
          </div>
        </div>
        <div class="flex flex-wrap justify-between">
          <div class="flex flex-wrap items-center">
            <a href="javascript:void(0)" class="mr-3 mb-2 inline-flex items-center justify-center text-secondary-inverse rounded-full bg-neutral-100 hover:bg-neutral-200 transition-all duration-200 ease-in-out px-3 py-1 text-sm font-medium leading-normal"> 320 Following </a>
            <a href="javascript:void(0)" class="mr-3 mb-2 inline-flex items-center justify-center text-secondary-inverse rounded-full bg-neutral-100 hover:bg-neutral-200 transition-all duration-200 ease-in-out px-3 py-1 text-sm font-medium leading-normal"> 2.5k Followers </a>
            <a href="javascript:void(0)" class="mr-3 mb-2 inline-flex items-center justify-center text-secondary-inverse rounded-full bg-neutral-100 hover:bg-neutral-200 transition-all duration-200 ease-in-out px-3 py-1 text-sm font-medium leading-normal"> 48 Deals </a>
          </div>
        </div>
      </div>
    </div>
    <hr class="w-full h-px border-neutral-200">
    <ul nav-tabs class="group flex flex-wrap items-stretch text-[1.15rem] font-semibold list-none border-b-2 border-transparent border-solid active-assignments">
      <li class="flex mt-2 -mb-[2px]">
        <a aria-controls="summary" class="py-5 mr-1 sm:mr-3 lg:mr-10 transition-colors duration-200 ease-in-out border-b-2 border-transparent group-[.active-summary]:border-primary group-[.active-summary]:text-primary text-muted hover:border-primary" href="javascript:void(0)"> Summary </a>
      </li>
      <li class="flex mt-2 -mb-[2px]">
        <a aria-controls="assignments" class="py-5 mr-1 sm:mr-3 lg:mr-10 transition-colors duration-200 ease-in-out border-b-2 border-transparent group-[.active-assignments]:border-primary group-[.active-assignments]:text-primary text-muted hover:border-primary" href="javascript:void(0)"> Assignments </a>
      </li>
      <li class="flex mt-2 -mb-[2px]">
        <a aria-controls="marketing" class="py-5 mr-1 sm:mr-3 lg:mr-10 transition-colors duration-200 ease-in-out border-b-2 border-transparent group-[.active-marketing]:border-primary group-[.active-marketing]:text-primary text-muted hover:border-primary" href="javascript:void(0)"> Marketing </a>
      </li>
      <li class="flex mt-2 -mb-[2px]">
        <a aria-controls="followers" class="py-5 mr-1 sm:mr-3 lg:mr-10 transition-colors duration-200 ease-in-out border-b-2 border-transparent group-[.active-followers]:border-primary group-[.active-followers]:text-primary text-muted hover:border-primary" href="javascript:void(0)"> Followers </a>
      </li>
      <li class="flex mt-2 -mb-[2px] group">
        <a aria-controls="history" class="py-5 mr-1 sm:mr-3 lg:mr-10 transition-colors duration-200 ease-in-out border-b-2 border-transparent group-[.active-history]:border-primary group-[.active-history]:text-primary text-muted hover:border-primary" href="javascript:void(0)"> History </a>
      </li>
    </ul>
  </div>
</div>