Framework

All Frameworks
bootstrap tailwind chakra

Theme

All Themes
Horizon UI Dashboard AdminKit Chakra UI Dashboard Motion Landing Library Asteria Dashboard Soft UI Dashboard Riva Dashboard Tailwind Motion Landing Library React Soft UI Design System Argon Dashboard Soft UI Dashboard Tailwind
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
Teams Section 8
Typography 24
Headers 30
Contacts Section 9
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

Requires JavaScript

Chart Pie

Component from Asteria Dashboard Builder 
<div class="card mb-4 z-index-2 draggable">
    <div class="card-header pb-0">
        <h6 class="mb-1">Market Distribution</h6>
    </div>
    <div class="card-body card-body px-3 pt-lg-6 pb-lg-5">
        <div class="row h-100">
        <div class="col-lg-5 my-auto text-center d-lg-block d-flex justify-content-center">
            <div id="chart-pie" class="chart-pie">
            </div>
        </div>
        </div>
    </div>
</div>

<script>
var ctx = document.getElementById("chart-pie");

  var chartPie = new ApexCharts(ctx, {
    chart: {
       width: 380,
       type: 'donut',
     },
     dataLabels: {
       enabled: false
     },
     plotOptions: {
        pie: {
          customScale: 1,
          expandOnClick: false,
          donut: {
            size: "80%",
          }
        },
      },
    legend: {
        position: "right",
        verticalAlign: "center",
        containerMargin: {
          left: 35,
          right: 60
        }
      },
     series: [66, 55, 13, 33],
     labels: ['Asia', 'USA', 'China', 'Africa'],
     colors: ['#00ab5599', '#00ab55', '#00ab5535', '#00ab5550'],
     donut: {
       size: "100%"
     },
     responsive: [
        {
           breakpoint: 1550,
           options: {
             chart: {
                width: 340,
             },
             legend: {
                 position: "bottom",
                 verticalAlign: "bottom",
                 containerMargin: {
                   left: 'auto',
                   right: 'auto'
                 }
               },
           }
        },
        {
           breakpoint: 1450,
           options: {
             chart: {
                width: 300,
             },
           }
        }
      ]
  });

  chartPie.render();
</script>

Table Excel

Component from Asteria Dashboard Builder 
<div class="card table-responsive draggable">
    <div class="card-header border-bottom-0">
        <h6 class="text-dark">Table Excel</h6>
    </div>
    <table class="table" data-integration="excel" tbody-td-classes="text-sm px-4" thead-th-classes="text-secondary text-sm font-weight-bold opacity-8">
        <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>
            <td scope="row" class="text-sm px-4">1</td>
            <td class="text-sm px-4">Mark</td>
            <td class="text-sm px-4" >Otto</td>
            <td class="text-sm px-4">@mdo</td>
            </tr>
            <tr>
            <td scope="row" class="text-sm px-4">2</td>
            <td class="text-sm px-4">Jacob</td>
            <td class="text-sm px-4">Thornton</td>
            <td class="text-sm px-4">@fat</td>
            </tr>
            <tr>
            <td scope="row" class="text-sm px-4">3</td>
            <td class="text-sm px-4">Larry</td>
            <td class="text-sm px-4">the Bird</td>
            <td class="text-sm px-4">@twitter</td>
            </tr>
        </tbody>
    </table>
</div>
Requires JavaScript

Chart Lines

Component from Asteria Dashboard Builder 
<div class="card mb-4 draggable">
    <div class="card-header pb-0 d-flex align-items-center">
        <div>
        <h6 class="mb-1">Sales overview</h6>
        <p class="text-sm mb-0">
            (+32%) more in 2021
        </p>
        </div>
        <select class="form-select form-select-sm ms-auto w-20 font-weight-bolder bg-gray-100" aria-label=".form-select-sm example">
        <option selected>2021</option>
        <option value="2020">2020</option>
        </select>
    </div>
    <div class="card-body p-3">
        <div class="chart">
        <canvas class="chart-line" class="chart-canvas" height="300"></canvas>
        </div>
    </div>
</div>

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

    new Chart(ctx2[ctx2.length-1], {
        type: "line",
        data: {
          labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
          datasets: [{
              label: "Black Friday",
              tension: 0.4,
              borderWidth: 0,
              pointRadius: 0,
              borderColor: "#00ab55",
              borderWidth: 3,
              backgroundColor: "transparent",
              data: [20, 60, 20, 50, 90, 220, 440, 380, 500],
              maxBarThickness: 6
            },
            {
              label: "Autumn Sale",
              tension: 0.4,
              borderWidth: 0,
              pointRadius: 0,
              borderColor: "#212b36",
              borderWidth: 3,
              backgroundColor: "transparent",
              data: [30, 90, 40, 140, 290, 290, 240, 270, 230],
              maxBarThickness: 6
            },
          ],
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          legend: {
            display: false,
          },
          tooltips: {
            enabled: true,
            mode: "index",
            intersect: false,
          },
          scales: {
            yAxes: [{
              gridLines: {
                borderDash: [2],
                borderDashOffset: [2],
                color: '#dee2e6',
                zeroLineColor: '#dee2e6',
                zeroLineWidth: 1,
                zeroLineBorderDash: [2],
                drawBorder: false,
              },
              ticks: {
                suggestedMin: 0,
                suggestedMax: 500,
                beginAtZero: true,
                padding: 10,
                fontSize: 11,
                fontColor: '#adb5bd',
                lineHeight: 3,
                fontStyle: 'normal',
                fontFamily: "Public Sans",
              },
            }, ],
            xAxes: [{
              gridLines: {
                zeroLineColor: 'rgba(0,0,0,0)',
                display: false,
              },
              ticks: {
                padding: 10,
                fontSize: 11,
                fontColor: '#adb5bd',
                lineHeight: 3,
                fontStyle: 'normal',
                fontFamily: "Public Sans",
              },
            }, ],
          },
        },
      });
</script>

Card Stats

Component from Asteria Dashboard Builder 
<div class="row removable">
  <div class="col-xl-3 col-sm-6 drop-zone">
    <div class="card mb-4 draggable">
        <div class="card-body p-3">
            <div class="row">
            <div class="col-8">
                <div class="numbers">
                <p class="text-sm mb-0 text-capitalize text-dark font-weight-bold">Today's Money</p>
                <div class="d-flex align-items-center my-2">
                    <span class="badge bg-success-soft text-xxs">
                    <i class="fas fa-angle-up text-success" aria-hidden="true"></i>
                    </span>
                    <span class="text-xs font-weight-bolder ms-1">+55%</span>
                </div>
                <h4 class="font-weight-bolder mb-0">
                    $53,000
                </h4>
                </div>
            </div>
            <div class="col-4 text-end">
                <div class="icon icon-shape bg-primary shadow text-center border-radius-md ms-auto">
                <i class="ni ni-money-coins text-lg opacity-10" aria-hidden="true"></i>
                </div>
            </div>
            </div>
        </div>
    </div>
  </div>

  <div class="col-xl-3 col-sm-6 drop-zone">
    <div class="card mb-4 draggable">
  <div class="card-body p-3">
    <div class="row">
      <div class="col-8">
        <div class="numbers">
          <p class="text-sm mb-0 text-capitalize text-dark font-weight-bold">Today's Users</p>
          <div class="d-flex align-items-center my-2">
            <span class="badge bg-success-soft text-xxs">
              <i class="fas fa-angle-up text-success" aria-hidden="true"></i>
            </span>
            <span class="text-xs font-weight-bolder ms-1">+3%</span>
          </div>
          <h4 class="font-weight-bolder mb-0">
            2,300
          </h4>
        </div>
      </div>
      <div class="col-4 text-end">
        <div class="icon icon-shape bg-primary shadow text-center border-radius-md ms-auto">
          <i class="ni ni-world text-lg opacity-10" aria-hidden="true"></i>
        </div>
      </div>
    </div>
  </div>
</div>

  </div>

  <div class="col-xl-3 col-sm-6 drop-zone">
    <div class="card mb-4 draggable">
  <div class="card-body p-3">
    <div class="row">
      <div class="col-8">
        <div class="numbers">
          <p class="text-sm mb-0 text-capitalize text-dark font-weight-bold">New Clients</p>
          <div class="d-flex align-items-center my-2">
            <span class="badge bg-danger-soft text-xxs">
              <i class="fas fa-angle-down text-danger" aria-hidden="true"></i>
            </span>
            <span class="text-xs font-weight-bolder ms-1">-2.06%</span>
          </div>
          <h4 class="font-weight-bolder mb-0">
            3,462
          </h4>
        </div>
      </div>
      <div class="col-4 text-end">
        <div class="icon icon-shape bg-primary shadow text-center border-radius-md ms-auto">
          <i class="ni ni-paper-diploma text-lg opacity-10" aria-hidden="true"></i>
        </div>
      </div>
    </div>
  </div>
</div>

  </div>

  <div class="col-xl-3 col-sm-6 drop-zone">
    <div class="card mb-4 draggable">
  <div class="card-body p-3">
    <div class="row">
      <div class="col-8">
        <div class="numbers">
          <p class="text-sm mb-0 text-capitalize text-dark font-weight-bold">Sales</p>
          <div class="d-flex align-items-center my-2">
            <span class="badge bg-success-soft text-xxs">
              <i class="fas fa-angle-up text-success" aria-hidden="true"></i>
            </span>
            <span class="text-xs font-weight-bolder ms-1">+5,42%</span>
          </div>
          <h4 class="font-weight-bolder mb-0">
            $103,430
          </h4>
        </div>
      </div>
      <div class="col-4 text-end">
        <div class="icon icon-shape bg-primary shadow text-center border-radius-md ms-auto">
          <i class="ni ni-cart text-lg opacity-10" aria-hidden="true"></i>
        </div>
      </div>
    </div>
  </div>
</div>

  </div>
</div>
Requires JavaScript

Chart Bar Stacked

Component from Asteria Dashboard Builder 
<div class="card mb-4 z-index-2 draggable">
    <div class="card-header pb-0">
        <h6 class="mb-1">Stock Available</h6>
    </div>
    <div class="card-body">
        <canvas class="chart-bar-stacked" width="400" height="200"></canvas>
    </div>
</div>

<script>
const ctx3 = document.querySelectorAll('.chart-bar-stacked');

const data = {
  labels: [
    "2015",
    "2016",
    "2017",
    "2018",
    "2019",
    "2020"
  ],
  datasets: [
    {
      label: "Long",
      backgroundColor: "#0dcaf0",

      data: [
        9000,
        5000,
        5240,
        3520,
        2510,
        3652
      ]
    },
    {
      label: "Short",
      backgroundColor: "#5e72e4",
      data: [
        3000,
        4000,
        6000,
        3500,
        3600,
        8060
      ]
    },
    {
      label: "Spreading",
      backgroundColor: "#20c997",
      data: [
        6000,
        7200,
        6500,
        4600,
        3600,
        9200
      ]
    }
  ]
};

const options = {
  scales: {
    yAxes: [
       { 
           stacked: true,  
           ticks: { fontSize: 14, lineHeight: 3, fontColor: "#adb5bd" }, 
           gridLines: { display: false }
     
        }],
    xAxes: [
      {
        stacked: true,
        ticks: {  fontSize: 14, lineHeight: 3, fontColor: "#adb5bd" }
      }
    ]
  }
};

const chart = new Chart(ctx3[ctx3.length-1], {
  // The type of chart we want to create
  type: "bar",
  // The data for our dataset
  data: data,
  // Configuration options go here
  options: options
});
</script>
Requires JavaScript

Chart Income

Component from Asteria Dashboard Builder

Table Products

Component from Asteria Dashboard Builder

Section Tables Ecommerce

Component from Asteria Dashboard Builder

Section Contact Simple Horizontal

Component from Asteria Dashboard Builder

Profile Section Work

Component from Asteria Dashboard Builder