Home

Framework

All Frameworks
bootstrap tailwind chakra

Theme

All Themes
Horizon UI Dashboard AdminKit Soft UI Dashboard Soft UI Design System Soft UI Dashboard Tailwind Asteria Dashboard Chakra UI Dashboard Motion Landing Library React Motion Landing Library Riva Dashboard Tailwind Argon Dashboard
All 669
Forms 12
Charts 21
Navbars 45
Sidebars 27
Typography 42
Components 51
General 6
Tables 34
Cards 70
Contact Us 9
Testimonials 19
Cards Section 37
Features 25
Teams Section 11
Faq 9
Headers 45
Blogs 13
Contacts Section 9
Profiles Section 13
Charts Section 7
Tables Section 15
Contents 18
Logo Areas 12
Projects Section 14
Stats 13
Http Codes 6
Authentication 15
Call To Actions 21
Teams 16
Pricing 13

UI Components Library

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

Input With Icon

Soft UI Dashboard Tailwind View Theme

Card Social

Riva Dashboard Tailwind View Theme 
<div class="relative flex flex-col min-w-0 break-words border border-dashed bg-clip-border rounded-2xl border-stone-200 bg-light/30 draggable">
  <!-- card body  -->
  <div class="flex flex-col items-start justify-between flex-auto py-8 px-9">
    <div class="m-0">
      <img class="w-[35px]" src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/riva-dashboard-tailwind/img/logos/twitter.svg" alt="Logo Twitter">
    </div>
    <div class="flex flex-col my-7">
      <span class="text-secondary-inverse text-4xl tracking-[-0.115rem] font-bold">1.3k</span>
      <div class="m-0">
        <span class="font-medium text-secondary-dark text-lg/normal">Followers</span>
      </div>
    </div>
    <span class="text-center align-baseline inline-flex px-2 py-1 mr-auto items-center font-semibold text-base/none text-success bg-success-light rounded-lg border border-success">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mr-1">
        <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18L9 11.25l4.306 4.307a11.95 11.95 0 015.814-5.519l2.74-1.22m0 0l-5.94-2.28m5.94 2.28l-2.28 5.941"></path>
      </svg> 12% </span>
  </div>
  <!-- end card body  -->
</div>

Text

Chakra UI Dashboard View Theme 
<Text data-type='Text' fontSize='md'>(md) In love with React & Next</Text>

Sidebar Documentation

Argon Dashboard View Theme

Contact Us Section With Form And Map

Motion Landing Library View Theme

Stats Section With Title And Description

Motion Landing Library View Theme

Progress

Soft UI Dashboard Tailwind View Theme 
<div class="w-full mb-4 draggable">
  <div class="flex mb-2">
    <span class="mr-2 font-semibold leading-normal capitalize text-sm">default progress</span>
    <span class="ml-auto font-semibold leading-normal text-sm">50%</span>
  </div>
  <div>
    <div class="h-0.75 text-xs flex overflow-visible rounded-lg bg-gray-200">
      <div class="bg-fuchsia-500 w-1/2 transition-width duration-600 ease-soft rounded-1 -mt-0.38 -ml-px flex h-1.5 flex-col justify-center overflow-hidden whitespace-nowrap text-center text-white"></div>
    </div>
  </div>
</div>

Http Code With Title Description Button And Image

Motion Landing Library View Theme

Card Projects

Riva Dashboard Tailwind View Theme

Card Stats

Chakra UI Dashboard View Theme 
<Card data-type='Card'
              overflow='hidden'
              variant='outline'
              >
<CardBody data-type='CardBody'>
              <Stat data-type='Stat'>
               <StatLabel data-type='StatLabel'>Sent</StatLabel>
               <StatNumber data-type='StatNumber'>345,670</StatNumber>
               <StatHelpText data-type='StatHelpText'>
                 <StatArrow data-type='StatArrow' type='increase'></StatArrow>
                 23.36%
               </StatHelpText>
             </Stat>
</CardBody>
            </Card>