Framework

All Frameworks
bootstrap tailwind chakra

Theme

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

Bootstrap - All Components

Discover 380 Bootstrap components available in Loopple

Nav Tabs

Component from Adminkit Builder 
<ul class="nav nav-tabs draggable" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
      <p>True reasoning is only possible when there is no motivation.</p>
  </div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
      <p>Be patient, it takes 10 years to build a career in anything.</p>
  </div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
      <p> The goal of media is to make every problem, your problem.</p>
  </div>
</div>
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