Framework

All Frameworks
bootstrap tailwind chakra

Theme

All Themes
Horizon UI Dashboard Motion Landing Library Soft UI Dashboard Tailwind Soft UI Design System Chakra UI Dashboard Soft UI Dashboard Riva Dashboard Tailwind Asteria Dashboard Argon Dashboard AdminKit Motion Landing Library React
All 380
Testimonials 9
Navbars 27
Faq 1
Blogs 11
Headers 30
Contents 10
Stats 4
Authentication 7
Features 16
Cards Section 28
Teams 5
Call To Actions 9
Logo Areas 3
Contact Us 2
Pricing 4
Components 27
Sidebars 19
Tables 24
Profiles Section 8
Projects Section 10
Typography 24
Tables Section 11
Teams Section 8
Cards 38
Contacts Section 9
Charts Section 4
Forms 9
Charts 14

Bootstrap - All Components

Discover 380 Bootstrap components available in Loopple

Requires JavaScript

Chart Pie

Component from Adminkit Builder 
<div class="card flex-fill w-100 draggable">
    <div class="card-header">
        <h5 class="card-title mb-0">Browser Usage</h5>
    </div>
    <div class="card-body d-flex">
        <div class="align-self-center w-100">
            <div class="py-3">
                <div class="chart chart-xs"><div class="chartjs-size-monitor"><div class="chartjs-size-monitor-expand"><div class=""></div></div><div class="chartjs-size-monitor-shrink"><div class=""></div></div></div>
                    <canvas id="chartjs-dashboard-pie" width="856" height="400" style="display: block; height: 200px; width: 428px;" class="chart-pie chartjs-render-monitor"></canvas>
                </div>
            </div>

            <table class="table mb-0">
                <tbody>
                    <tr>
                        <td>Chrome</td>
                        <td class="text-end">4306</td>
                    </tr>
                    <tr>
                        <td>Firefox</td>
                        <td class="text-end">3801</td>
                    </tr>
                    <tr>
                        <td>IE</td>
                        <td class="text-end">1689</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
var chartsPie = document.querySelectorAll(".chart-pie");

chartsPie.forEach(function(chart) {
  if (!chart.getAttribute('data-chart-initialized')) {
      new Chart(chart, {
      type: "pie",
        data: {
          labels: ["Chrome", "Firefox", "IE"],
          datasets: [{
            data: [4306, 3801, 1689],
            backgroundColor: [
              window.theme.primary,
              window.theme.warning,
              window.theme.danger
            ],
            borderWidth: 5
          }]
        },
        options: {
          responsive: !window.MSInputMethodContext,
          maintainAspectRatio: false,
          legend: {
            display: false
          },
          cutoutPercentage: 75
        }
      });
      chart.setAttribute("data-chart-initialized", "true");
  }
});
</script>

Card Stats

Component from Adminkit Builder 
<div class="card draggable">
    <div class="card-body">
        <div class="row">
            <div class="col mt-0">
                <h5 class="card-title">Sales</h5>
            </div>

            <div class="col-auto">
                <div class="stat text-primary">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-truck align-middle"><rect x="1" y="3" width="15" height="13"></rect><polygon points="16 8 20 8 23 11 23 16 16 16 16 8"></polygon><circle cx="5.5" cy="18.5" r="2.5"></circle><circle cx="18.5" cy="18.5" r="2.5"></circle></svg>
                </div>
            </div>
        </div>
        <h1 class="mt-1 mb-3">2.382</h1>
        <div class="mb-0">
            <span class="text-danger"> <i class="mdi mdi-arrow-bottom-right"></i> -3.65% </span>
            <span class="text-muted">Since last week</span>
        </div>
    </div>
</div>
Requires JavaScript

Chart Line

Component from Adminkit Builder 
<div class="card flex-fill w-100 draggable">
    <div class="card-header">
        <h5 class="card-title mb-0">Recent Movement</h5>
    </div>
    <div class="card-body py-3">
        <div class="chart chart-sm"><div class="chartjs-size-monitor"><div class="chartjs-size-monitor-expand"><div class=""></div></div><div class="chartjs-size-monitor-shrink"><div class=""></div></div></div>
            <canvas id="chartjs-dashboard-line" style="display: block; height: 252px; width: 428px;" width="856" height="504" class="chart-line chartjs-render-monitor"></canvas>
        </div>
    </div>
</div>

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

chartsLine.forEach(function(chart) {
  if (!chart.getAttribute('data-chart-initialized')) {
      var ctx = chart.getContext("2d");

      var gradient = ctx.createLinearGradient(0, 0, 0, 225);
      gradient.addColorStop(0, "rgba(215, 227, 244, 1)");
      gradient.addColorStop(1, "rgba(215, 227, 244, 0)");
      // Line chart
      new Chart(ctx, {
          type: "line",
          data: {
              labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
              datasets: [{
                  label: "Sales ($)",
                  fill: true,
                  backgroundColor: gradient,
                  borderColor: window.theme.primary,
                  data: [
                      2115,
                      1562,
                      1584,
                      1892,
                      1587,
                      1923,
                      2566,
                      2448,
                      2805,
                      3438,
                      2917,
                      3327
                  ]
              }]
          },
          options: {
              maintainAspectRatio: false,
              legend: {
                  display: false
              },
              tooltips: {
                  intersect: false
              },
              hover: {
                  intersect: true
              },
              plugins: {
                  filler: {
                      propagate: false
                  }
              },
              scales: {
                  xAxes: [{
                      reverse: true,
                      gridLines: {
                          color: "rgba(0,0,0,0.0)"
                      }
                  }],
                  yAxes: [{
                      ticks: {
                          stepSize: 1000
                      },
                      display: true,
                      borderDash: [3, 3],
                      gridLines: {
                          color: "rgba(0,0,0,0.0)"
                      }
                  }]
              }
          }
      });
      chart.setAttribute("data-chart-initialized", "true");
  }
});
</script>

Table Projects

Component from Adminkit Builder 
<div class="card flex-fill draggable">
    <div class="card-header">
        <h5 class="card-title mb-0">Latest Projects</h5>
    </div>
    <table class="table table-hover my-0">
        <thead>
            <tr>
                <th>Name</th>
                <th class="d-none d-xl-table-cell">Start Date</th>
                <th class="d-none d-xl-table-cell">End Date</th>
                <th>Status</th>
                <th class="d-none d-md-table-cell">Assignee</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Project Apollo</td>
                <td class="d-none d-xl-table-cell">01/01/2021</td>
                <td class="d-none d-xl-table-cell">31/06/2021</td>
                <td><span class="badge bg-success">Done</span></td>
                <td class="d-none d-md-table-cell">Vanessa Tucker</td>
            </tr>
            <tr>
                <td>Project Fireball</td>
                <td class="d-none d-xl-table-cell">01/01/2021</td>
                <td class="d-none d-xl-table-cell">31/06/2021</td>
                <td><span class="badge bg-danger">Cancelled</span></td>
                <td class="d-none d-md-table-cell">William Harris</td>
            </tr>
            <tr>
                <td>Project Hades</td>
                <td class="d-none d-xl-table-cell">01/01/2021</td>
                <td class="d-none d-xl-table-cell">31/06/2021</td>
                <td><span class="badge bg-success">Done</span></td>
                <td class="d-none d-md-table-cell">Sharon Lessman</td>
            </tr>
            <tr>
                <td>Project Nitro</td>
                <td class="d-none d-xl-table-cell">01/01/2021</td>
                <td class="d-none d-xl-table-cell">31/06/2021</td>
                <td><span class="badge bg-warning">In progress</span></td>
                <td class="d-none d-md-table-cell">Vanessa Tucker</td>
            </tr>
            <tr>
                <td>Project Phoenix</td>
                <td class="d-none d-xl-table-cell">01/01/2021</td>
                <td class="d-none d-xl-table-cell">31/06/2021</td>
                <td><span class="badge bg-success">Done</span></td>
                <td class="d-none d-md-table-cell">William Harris</td>
            </tr>
            <tr>
                <td>Project X</td>
                <td class="d-none d-xl-table-cell">01/01/2021</td>
                <td class="d-none d-xl-table-cell">31/06/2021</td>
                <td><span class="badge bg-success">Done</span></td>
                <td class="d-none d-md-table-cell">Sharon Lessman</td>
            </tr>
            <tr>
                <td>Project Romeo</td>
                <td class="d-none d-xl-table-cell">01/01/2021</td>
                <td class="d-none d-xl-table-cell">31/06/2021</td>
                <td><span class="badge bg-success">Done</span></td>
                <td class="d-none d-md-table-cell">Christina Mason</td>
            </tr>
            <tr>
                <td>Project Wombat</td>
                <td class="d-none d-xl-table-cell">01/01/2021</td>
                <td class="d-none d-xl-table-cell">31/06/2021</td>
                <td><span class="badge bg-warning">In progress</span></td>
                <td class="d-none d-md-table-cell">William Harris</td>
            </tr>
        </tbody>
    </table>
</div>

Table Simple

Component from Adminkit Builder 
<table class="table draggable">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry the Bird</td>
      <td>Jokomo</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Card Image

Component from Adminkit Builder 
<div class="card draggable" style="width: 18rem;">
  <img src="https://demo-basic.adminkit.io/img/photos/unsplash-1.jpg" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card#&39;s content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
Requires JavaScript

Section Tables

Component from Adminkit Builder 
<div class="row removable">
  <div class="col-12 col-lg-8 col-xxl-9 d-flex drop-zone">
    <div class="card flex-fill draggable">
      <div class="card-header">
        <h5 class="card-title mb-0">Latest Projects</h5>
      </div>
      <table class="table table-hover my-0">
        <thead>
          <tr>
            <th>Name</th>
            <th class="d-none d-xl-table-cell">Start Date</th>
            <th class="d-none d-xl-table-cell">End Date</th>
            <th>Status</th>
            <th class="d-none d-md-table-cell">Assignee</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Project Apollo</td>
            <td class="d-none d-xl-table-cell">01/01/2021</td>
            <td class="d-none d-xl-table-cell">31/06/2021</td>
            <td>
              <span class="badge bg-success">Done</span>
            </td>
            <td class="d-none d-md-table-cell">Vanessa Tucker</td>
          </tr>
          <tr>
            <td>Project Fireball</td>
            <td class="d-none d-xl-table-cell">01/01/2021</td>
            <td class="d-none d-xl-table-cell">31/06/2021</td>
            <td>
              <span class="badge bg-danger">Cancelled</span>
            </td>
            <td class="d-none d-md-table-cell">William Harris</td>
          </tr>
          <tr>
            <td>Project Hades</td>
            <td class="d-none d-xl-table-cell">01/01/2021</td>
            <td class="d-none d-xl-table-cell">31/06/2021</td>
            <td>
              <span class="badge bg-success">Done</span>
            </td>
            <td class="d-none d-md-table-cell">Sharon Lessman</td>
          </tr>
          <tr>
            <td>Project Nitro</td>
            <td class="d-none d-xl-table-cell">01/01/2021</td>
            <td class="d-none d-xl-table-cell">31/06/2021</td>
            <td>
              <span class="badge bg-warning">In progress</span>
            </td>
            <td class="d-none d-md-table-cell">Vanessa Tucker</td>
          </tr>
          <tr>
            <td>Project Phoenix</td>
            <td class="d-none d-xl-table-cell">01/01/2021</td>
            <td class="d-none d-xl-table-cell">31/06/2021</td>
            <td>
              <span class="badge bg-success">Done</span>
            </td>
            <td class="d-none d-md-table-cell">William Harris</td>
          </tr>
          <tr>
            <td>Project X</td>
            <td class="d-none d-xl-table-cell">01/01/2021</td>
            <td class="d-none d-xl-table-cell">31/06/2021</td>
            <td>
              <span class="badge bg-success">Done</span>
            </td>
            <td class="d-none d-md-table-cell">Sharon Lessman</td>
          </tr>
          <tr>
            <td>Project Romeo</td>
            <td class="d-none d-xl-table-cell">01/01/2021</td>
            <td class="d-none d-xl-table-cell">31/06/2021</td>
            <td>
              <span class="badge bg-success">Done</span>
            </td>
            <td class="d-none d-md-table-cell">Christina Mason</td>
          </tr>
          <tr>
            <td>Project Wombat</td>
            <td class="d-none d-xl-table-cell">01/01/2021</td>
            <td class="d-none d-xl-table-cell">31/06/2021</td>
            <td>
              <span class="badge bg-warning">In progress</span>
            </td>
            <td class="d-none d-md-table-cell">William Harris</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <div class="col-12 col-lg-4 col-xxl-3 d-flex drop-zone">
    <div class="card flex-fill w-100 draggable">
      <div class="card-header">
        <h5 class="card-title mb-0">Monthly Sales</h5>
      </div>
      <div class="card-body d-flex w-100">
        <div class="align-self-center chart chart-lg">
          <div class="chartjs-size-monitor">
            <div class="chartjs-size-monitor-expand">
              <div class=""></div>
            </div>
            <div class="chartjs-size-monitor-shrink">
              <div class=""></div>
            </div>
          </div>
          <canvas id="chartjs-dashboard-bar" width="528" height="700" style="display: block; height: 350px; width: 264px;" class="chartjs-render-monitor"></canvas>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
// Bar chart
                    			new Chart(document.getElementById("chartjs-dashboard-bar"), {
                    				type: "bar",
                    				data: {
                    					labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
                    					datasets: [{
                    						label: "This year",
                    						backgroundColor: window.theme.primary,
                    						borderColor: window.theme.primary,
                    						hoverBackgroundColor: window.theme.primary,
                    						hoverBorderColor: window.theme.primary,
                    						data: [54, 67, 41, 55, 62, 45, 55, 73, 60, 76, 48, 79],
                    						barPercentage: .75,
                    						categoryPercentage: .5
                    					}]
                    				},
                    				options: {
                    					maintainAspectRatio: false,
                    					legend: {
                    						display: false
                    					},
                    					scales: {
                    						yAxes: [{
                    							gridLines: {
                    								display: false
                    							},
                    							stacked: false,
                    							ticks: {
                    								stepSize: 20
                    							}
                    						}],
                    						xAxes: [{
                    							stacked: false,
                    							gridLines: {
                    								color: "transparent"
                    							}
                    						}]
                    					}
                    				}
                    			});
</script>
Requires JavaScript

Section Tables Dark

Component from Adminkit Builder 
<div class="row removable">
  <div class="col-12 col-lg-8 col-xxl-9 drop-zone d-flex">
    <div class="card bg-dark flex-fill draggable">
      <div class="card-header bg-transparent">
        <h5 class="card-title mb-0">Latest Projects</h5>
      </div>
      <table class="table table-hover table-dark table-borderless my-0">
        <thead>
          <tr>
            <th>Name</th>
            <th class="d-none d-xl-table-cell">Start Date</th>
            <th class="d-none d-xl-table-cell">End Date</th>
            <th>Status</th>
            <th class="d-none d-md-table-cell">Assignee</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Project Apollo</td>
            <td class="d-none d-xl-table-cell">01/01/2021</td>
            <td class="d-none d-xl-table-cell">31/06/2021</td>
            <td>
              <span class="badge bg-success">Done</span>
            </td>
            <td class="d-none d-md-table-cell">Vanessa Tucker</td>
          </tr>
          <tr>
            <td>Project Fireball</td>
            <td class="d-none d-xl-table-cell">01/01/2021</td>
            <td class="d-none d-xl-table-cell">31/06/2021</td>
            <td>
              <span class="badge bg-danger">Cancelled</span>
            </td>
            <td class="d-none d-md-table-cell">William Harris</td>
          </tr>
          <tr>
            <td>Project Hades</td>
            <td class="d-none d-xl-table-cell">01/01/2021</td>
            <td class="d-none d-xl-table-cell">31/06/2021</td>
            <td>
              <span class="badge bg-success">Done</span>
            </td>
            <td class="d-none d-md-table-cell">Sharon Lessman</td>
          </tr>
          <tr>
            <td>Project Nitro</td>
            <td class="d-none d-xl-table-cell">01/01/2021</td>
            <td class="d-none d-xl-table-cell">31/06/2021</td>
            <td>
              <span class="badge bg-warning">In progress</span>
            </td>
            <td class="d-none d-md-table-cell">Vanessa Tucker</td>
          </tr>
          <tr>
            <td>Project Phoenix</td>
            <td class="d-none d-xl-table-cell">01/01/2021</td>
            <td class="d-none d-xl-table-cell">31/06/2021</td>
            <td>
              <span class="badge bg-success">Done</span>
            </td>
            <td class="d-none d-md-table-cell">William Harris</td>
          </tr>
          <tr>
            <td>Project X</td>
            <td class="d-none d-xl-table-cell">01/01/2021</td>
            <td class="d-none d-xl-table-cell">31/06/2021</td>
            <td>
              <span class="badge bg-success">Done</span>
            </td>
            <td class="d-none d-md-table-cell">Sharon Lessman</td>
          </tr>
          <tr>
            <td>Project Romeo</td>
            <td class="d-none d-xl-table-cell">01/01/2021</td>
            <td class="d-none d-xl-table-cell">31/06/2021</td>
            <td>
              <span class="badge bg-success">Done</span>
            </td>
            <td class="d-none d-md-table-cell">Christina Mason</td>
          </tr>
          <tr>
            <td>Project Wombat</td>
            <td class="d-none d-xl-table-cell">01/01/2021</td>
            <td class="d-none d-xl-table-cell">31/06/2021</td>
            <td>
              <span class="badge bg-warning">In progress</span>
            </td>
            <td class="d-none d-md-table-cell">William Harris</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <div class="col-12 col-lg-4 col-xxl-3 drop-zone d-flex">
    <div class="card bg-dark flex-fill w-100 draggable">
      <div class="card-header bg-transparent">
        <h5 class="card-title mb-0">Monthly Sales</h5>
      </div>
      <div class="card-body d-flex w-100">
        <div class="align-self-center chart chart-lg">
          <div class="chartjs-size-monitor">
            <div class="chartjs-size-monitor-expand">
              <div class=""></div>
            </div>
            <div class="chartjs-size-monitor-shrink">
              <div class=""></div>
            </div>
          </div>
          <canvas id="chartjs-dashboard-bar-dark" width="528" height="700" style="display: block; height: 350px; width: 264px;" class="chartjs-render-monitor"></canvas>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
// Bar chart
                    			new Chart(document.getElementById("chartjs-dashboard-bar-dark"), {
                    				type: "bar",
                    				data: {
                    					labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
                    					datasets: [{
                    						label: "This year",
                    						backgroundColor: window.theme.primary,
                    						borderColor: window.theme.primary,
                    						hoverBackgroundColor: window.theme.primary,
                    						hoverBorderColor: window.theme.primary,
                    						data: [54, 67, 41, 55, 62, 45, 55, 73, 60, 76, 48, 79],
                    						barPercentage: .75,
                    						categoryPercentage: .5
                    					}]
                    				},
                    				options: {
                    					maintainAspectRatio: false,
                    					legend: {
                    						display: false
                    					},
                    					scales: {
                    						yAxes: [{
                    							gridLines: {
                    								display: false
                    							},
                    							stacked: false,
                    							ticks: {
                    								stepSize: 20
                    							}
                    						}],
                    						xAxes: [{
                    							stacked: false,
                    							gridLines: {
                    								color: "transparent"
                    							}
                    						}]
                    					}
                    				}
                    			});
</script>

Nav Pills Background

Component from Adminkit Builder

Card Currencies List

Component from Adminkit Builder