UI Components Library

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

Button

Component from Soft UI Dashboard Tailwind Builder

<button type="button" class="inline-block px-6 py-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-gradient-to-tl from-purple-700 to-pink-500 leading-pro text-xs ease-soft-in tracking-tight-soft shadow-soft-md bg-150 bg-x-25 hover:scale-102 active:opacity-85 hover:shadow-soft-xs draggable mb-4">Button</button>

Card Currencies List

Component from Adminkit Builder

PRO Component

Card Bank Transfer

Component from Argon Dashboard Builder

PRO Component

Sidebar Simple

Component from Choose Theme Builder

Requires JavaScript

Chart Interest

Component from Asteria Dashboard Builder

PRO Component

Typography H2

Component from Soft UI Dashboard Tailwind Builder

PRO Component

Card Avatars

Component from Riva Dashboard Tailwind Builder

PRO Component

Section Profile Cards

Component from Soft UI Dashboard Tailwind Builder

PRO Component

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>

Typography H3

Component from Soft UI Dashboard Tailwind Builder

PRO Component