Home
Framework
Theme
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
Card Social

<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>
<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

<Text data-type='Text' fontSize='md'>(md) In love with React & Next</Text>
<Text data-type='Text' fontSize='md'>(md) In love with React & Next</Text>
Sidebar Documentation
Contact Us Section With Form And Map
Stats Section With Title And Description
Progress

<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>
<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
Card Projects
Card Stats

<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>
<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>