Framework

All Frameworks
bootstrap tailwind chakra

Theme

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

Bootstrap - All Components

Discover 380 Bootstrap components available in Loopple

Button

Component from Adminkit Builder 
<button type="button" class="btn btn-primary draggable">Primary</button>

Input

Component from Adminkit Builder 
<input type="text" class="form-control draggable" placeholder="Input" aria-label="Email" aria-describedby="email-addon">

Section Profile

Component from Adminkit Builder 
<div class="row removable">
  <div class="col-md-4 col-xl-3 drop-zone">
    <div class="card mb-3 draggable">
      <div class="card-header">
        <h5 class="card-title mb-0">Profile Details</h5>
      </div>
      <div class="card-body text-center">
        <img src="https://demo-basic.adminkit.io/img/avatars/avatar-4.jpg" alt="Christina Mason" class="img-fluid rounded-circle mb-2" width="128" height="128">
        <h5 class="card-title mb-0">Christina Mason</h5>
        <div class="text-muted mb-2">Lead Developer</div>
        <div>
          <a class="btn btn-primary btn-sm" href="#">Follow</a>
          <a class="btn btn-primary btn-sm" href="#">
            <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-message-square">
              <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
            </svg> Message </a>
        </div>
      </div>
      <hr class="my-0">
      <div class="card-body">
        <h5 class="h6 card-title">Skills</h5>
        <a href="#" class="badge bg-primary me-1 my-1">HTML</a>
        <a href="#" class="badge bg-primary me-1 my-1">JavaScript</a>
        <a href="#" class="badge bg-primary me-1 my-1">Sass</a>
        <a href="#" class="badge bg-primary me-1 my-1">Angular</a>
        <a href="#" class="badge bg-primary me-1 my-1">Vue</a>
        <a href="#" class="badge bg-primary me-1 my-1">React</a>
        <a href="#" class="badge bg-primary me-1 my-1">Redux</a>
        <a href="#" class="badge bg-primary me-1 my-1">UI</a>
        <a href="#" class="badge bg-primary me-1 my-1">UX</a>
      </div>
      <hr class="my-0">
      <div class="card-body">
        <h5 class="h6 card-title">About</h5>
        <ul class="list-unstyled mb-0">
          <li class="mb-1">
            <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-home feather-sm me-1">
              <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
              <polyline points="9 22 9 12 15 12 15 22"></polyline>
            </svg> Lives in <a href="#">San Francisco, SA</a>
          </li>
          <li class="mb-1">
            <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-briefcase feather-sm me-1">
              <rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect>
              <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path>
            </svg> Works at <a href="#">GitHub</a>
          </li>
          <li class="mb-1">
            <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-map-pin feather-sm me-1">
              <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
              <circle cx="12" cy="10" r="3"></circle>
            </svg> From <a href="#">Boston</a>
          </li>
        </ul>
      </div>
      <hr class="my-0">
      <div class="card-body">
        <h5 class="h6 card-title">Elsewhere</h5>
        <ul class="list-unstyled mb-0">
          <li class="mb-1">
            <a href="#">staciehall.co</a>
          </li>
          <li class="mb-1">
            <a href="#">Twitter</a>
          </li>
          <li class="mb-1">
            <a href="#">Facebook</a>
          </li>
          <li class="mb-1">
            <a href="#">Instagram</a>
          </li>
          <li class="mb-1">
            <a href="#">LinkedIn</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="col-md-8 col-xl-9 drop-zone">
    <div class="card draggable">
      <div class="card-header">
        <h5 class="card-title mb-0">Activities</h5>
      </div>
      <div class="card-body h-100">
        <div class="d-flex align-items-start">
          <img src="https://demo-basic.adminkit.io/img/avatars/avatar-5.jpg" width="36" height="36" class="rounded-circle me-2" alt="Vanessa Tucker">
          <div class="flex-grow-1">
            <small class="float-end text-navy">5m ago</small>
            <strong>Vanessa Tucker</strong> started following <strong>Christina Mason</strong>
            <br>
            <small class="text-muted">Today 7:51 pm</small>
            <br>
          </div>
        </div>
        <hr>
        <div class="d-flex align-items-start">
          <img src="https://demo-basic.adminkit.io/img/avatars/avatar.jpg" width="36" height="36" class="rounded-circle me-2" alt="Charles Hall">
          <div class="flex-grow-1">
            <small class="float-end text-navy">30m ago</small>
            <strong>Charles Hall</strong> posted something on <strong>Christina Mason</strong>&#39;s timeline <br>
            <small class="text-muted">Today 7:21 pm</small>
            <div class="border text-sm text-muted p-2 mt-1"> Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. </div>
            <a href="#" class="btn btn-sm btn-danger mt-1">
              <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-heart feather-sm">
                <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
              </svg> Like </a>
          </div>
        </div>
        <hr>
        <div class="d-flex align-items-start">
          <img src="https://demo-basic.adminkit.io/img/avatars/avatar-4.jpg" width="36" height="36" class="rounded-circle me-2" alt="Christina Mason">
          <div class="flex-grow-1">
            <small class="float-end text-navy">1h ago</small>
            <strong>Christina Mason</strong> posted a new blog <br>
            <small class="text-muted">Today 6:35 pm</small>
          </div>
        </div>
        <hr>
        <div class="d-flex align-items-start">
          <img src="https://demo-basic.adminkit.io/img/avatars/avatar-2.jpg" width="36" height="36" class="rounded-circle me-2" alt="William Harris">
          <div class="flex-grow-1">
            <small class="float-end text-navy">3h ago</small>
            <strong>William Harris</strong> posted two photos on <strong>Christina Mason</strong>&#39;s timeline <br>
            <small class="text-muted">Today 5:12 pm</small>
            <div class="row g-0 mt-1">
              <div class="col-6 col-md-4 col-lg-4 col-xl-3">
                <img src="https://demo-basic.adminkit.io/img/photos/unsplash-1.jpg" class="img-fluid pe-2" alt="Unsplash">
              </div>
              <div class="col-6 col-md-4 col-lg-4 col-xl-3">
                <img src="https://demo-basic.adminkit.io/img/photos/unsplash-2.jpg" class="img-fluid pe-2" alt="Unsplash">
              </div>
            </div>
            <a href="#" class="btn btn-sm btn-danger mt-1">
              <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-heart feather-sm">
                <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
              </svg> Like </a>
          </div>
        </div>
        <hr>
        <div class="d-flex align-items-start">
          <img src="https://demo-basic.adminkit.io/img/avatars/avatar-2.jpg" width="36" height="36" class="rounded-circle me-2" alt="William Harris">
          <div class="flex-grow-1">
            <small class="float-end text-navy">1d ago</small>
            <strong>William Harris</strong> started following <strong>Christina Mason</strong>
            <br>
            <small class="text-muted">Yesterday 3:12 pm</small>
            <div class="d-flex align-items-start mt-1">
              <a class="pe-3" href="#">
                <img src="https://demo-basic.adminkit.io/img/avatars/avatar-4.jpg" width="36" height="36" class="rounded-circle me-2" alt="Christina Mason">
              </a>
              <div class="flex-grow-1">
                <div class="border text-sm text-muted p-2 mt-1"> Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. </div>
              </div>
            </div>
          </div>
        </div>
        <hr>
        <div class="d-flex align-items-start">
          <img src="https://demo-basic.adminkit.io/img/avatars/avatar-4.jpg" width="36" height="36" class="rounded-circle me-2" alt="Christina Mason">
          <div class="flex-grow-1">
            <small class="float-end text-navy">1d ago</small>
            <strong>Christina Mason</strong> posted a new blog <br>
            <small class="text-muted">Yesterday 2:43 pm</small>
          </div>
        </div>
        <hr>
        <div class="d-flex align-items-start">
          <img src="https://demo-basic.adminkit.io/img/avatars/avatar.jpg" width="36" height="36" class="rounded-circle me-2" alt="Charles Hall">
          <div class="flex-grow-1">
            <small class="float-end text-navy">1d ago</small>
            <strong>Charles Hall</strong> started following <strong>Christina Mason</strong>
            <br>
            <small class="text-muted">Yesterdag 1:51 pm</small>
          </div>
        </div>
        <hr>
        <div class="d-grid">
          <a href="#" class="btn btn-primary">Load more</a>
        </div>
      </div>
    </div>
  </div>
</div>

Section Project

Component from Adminkit Builder 
<div class="row removable">
  <div class="col-md-4 drop-zone">
    <div class="card mb-3 draggable">
      <img src="https://images.unsplash.com/photo-1527219525722-f9767a7f2884?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mjl8fHByb2plY3R8ZW58MHx8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Slack</h5>
        <p class="card-text">This project is about integrating a new chat system to slack platform.</p>
        <a href="#" class="badge bg-info me-1 my-1">IOS App</a>
        <a href="#" class="badge bg-primary me-1 my-1">Desktop App</a>
      </div>
      <div class="card-footer">
        <div class="mb-1 d-flex align-items-center">
          <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-file align-middle me-2">
            <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path>
            <polyline points="13 2 13 9 20 9"></polyline>
          </svg>
          <span>Attach file</span>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-8 drop-zone">
    <div class="card draggable">
      <div class="card-header">
        <h5 class="card-title mb-0">Activities</h5>
      </div>
      <div class="card-body h-100">
        <div class="d-flex align-items-start">
          <img src="https://demo-basic.adminkit.io/img/avatars/avatar-5.jpg" width="36" height="36" class="rounded-circle me-2" alt="Vanessa Tucker">
          <div class="flex-grow-1">
            <small class="float-end text-navy">5m ago</small>
            <strong>Vanessa Tucker</strong> added 2 new files to <strong>Loopple Update</strong>
            <br>
            <small class="text-muted">Today 7:51 pm</small>
            <br>
          </div>
        </div>
        <hr>
        <div class="d-flex align-items-start">
          <img src="https://demo-basic.adminkit.io/img/avatars/avatar.jpg" width="36" height="36" class="rounded-circle me-2" alt="Charles Hall">
          <div class="flex-grow-1">
            <small class="float-end text-navy">30m ago</small>
            <strong>Charles Hall</strong> added a new comment to <strong>AdminKit</strong>#&39;s v2.9.1 Update <br>
            <small class="text-muted">Today 7:21 pm</small>
            <div class="border text-sm text-muted p-2 mt-1"> Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. </div>
            <a href="#" class="btn btn-sm btn-info mt-1">
              <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-tag align-middle me-2">
                <path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path>
                <line x1="7" y1="7" x2="7.01" y2="7"></line>
              </svg> View more </a>
          </div>
        </div>
        <hr>
        <div class="d-flex align-items-start">
          <img src="https://demo-basic.adminkit.io/img/avatars/avatar-4.jpg" width="36" height="36" class="rounded-circle me-2" alt="Christina Mason">
          <div class="flex-grow-1">
            <small class="float-end text-navy">1h ago</small>
            <strong>Christina Mason</strong> finished tasks <br>
            <small class="text-muted">Today 6:35 pm</small>
          </div>
        </div>
        <hr>
        <div class="d-flex align-items-start">
          <img src="https://demo-basic.adminkit.io/img/avatars/avatar-2.jpg" width="36" height="36" class="rounded-circle me-2" alt="William Harris">
          <div class="flex-grow-1">
            <small class="float-end text-navy">3h ago</small>
            <strong>William Harris</strong> posted three updates on <strong>Slack code refactoring</strong>
            <br>
            <small class="text-muted">Today 5:12 pm</small>
            <ul>
              <li class="nav-item"> Fix channels new messages loading error </li>
              <li class="nav-item"> Added view last 100 messages option </li>
            </ul>
            <a href="#" class="btn btn-sm btn-info mt-1">
              <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-tag align-middle me-2">
                <path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path>
                <line x1="7" y1="7" x2="7.01" y2="7"></line>
              </svg> View more </a>
          </div>
        </div>
        <hr>
        <div class="d-grid">
          <a href="#" class="btn btn-primary">Load more</a>
        </div>
      </div>
    </div>
  </div>
</div>

Input Group

Component from Adminkit Builder 
<div class="form-group draggable">
    <div class="input-group">
        <span class="input-group-text" id="basic-addon1">@</span>
        <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
    </div>
</div>

Dropdown

Component from Adminkit Builder 
<div class="dropdown draggable">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

Modal

Component from Adminkit Builder 
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary draggable" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

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>