Framework
Theme
All
689
Forms
16
Charts
21
Navbars
45
Sidebars
27
Typography
42
Components
62
Tables
34
Cards
70
Contact Us
9
Testimonials
19
General
6
Features
25
Cards Section
38
Teams Section
11
Faq
9
Headers
47
Blogs
15
Contacts Section
9
Profiles Section
13
Charts Section
7
Tables Section
15
Contents
18
Logo Areas
12
Projects Section
14
Stats
13
Authentication
15
Call To Actions
21
Http Codes
6
Teams
16
Pricing
13
UI Components Library
Discover 689 components available in Loopple’s library! Create modern templates without creativity of a designer
Authentication With Card And Image
Table Progress
Component from
Argon Dashboard
Builder
<div class="card draggable">
<div class="card-header border-0">
<div class="row align-items-center">
<div class="col">
<h3 class="mb-0">Social traffic</h3>
</div>
<div class="col text-right">
<a href="#!" class="btn btn-sm btn-primary">See all</a>
</div>
</div>
</div>
<div class="table-responsive">
<table class="table align-items-center table-flush">
<thead class="thead-light">
<tr>
<th scope="col">Referral</th>
<th scope="col">Visitors</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
Facebook
</th>
<td>
1,480
</td>
<td>
<div class="d-flex align-items-center">
<span class="mr-2">60%</span>
<div>
<div class="progress">
<div class="progress-bar bg-gradient-danger" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
</div>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row">
Facebook
</th>
<td>
5,480
</td>
<td>
<div class="d-flex align-items-center">
<span class="mr-2">70%</span>
<div>
<div class="progress">
<div class="progress-bar bg-gradient-success" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%;"></div>
</div>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row">
Google
</th>
<td>
4,807
</td>
<td>
<div class="d-flex align-items-center">
<span class="mr-2">80%</span>
<div>
<div class="progress">
<div class="progress-bar bg-gradient-primary" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;"></div>
</div>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row">
Instagram
</th>
<td>
3,678
</td>
<td>
<div class="d-flex align-items-center">
<span class="mr-2">75%</span>
<div>
<div class="progress">
<div class="progress-bar bg-gradient-info" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%;"></div>
</div>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row">
twitter
</th>
<td>
2,645
</td>
<td>
<div class="d-flex align-items-center">
<span class="mr-2">30%</span>
<div>
<div class="progress">
<div class="progress-bar bg-gradient-warning" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%;"></div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>Feature With 3 Cards
Component from
Motion Landing Library
Builder
<div class="mx-auto lg:container draggable">
<div class="flex flex-col items-center justify-center">
<div class="grid grid-cols-1 gap-10 mt-20 lg:grid-cols-3 px-5">
<div class="flex flex-col items-center col-span-1 gap-6 px-10 py-5">
<div>
<div class="flex items-center justify-center w-16 h-16 rounded-2xl bg-purple-blue-500">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24" fill="none">
<path d="M22.8233 8C22.8233 7.28 22.4533 6.65 21.8833 6.3L12.8333 1L3.78331 6.3C3.21331 6.65 2.83331 7.28 2.83331 8V18C2.83331 19.1 3.73331 20 4.83331 20H20.8333C21.9333 20 22.8333 19.1 22.8333 18L22.8233 8ZM20.8233 8V8.01L12.8333 13L4.83331 8L12.8333 3.32L20.8233 8ZM4.83331 18V10.34L12.8333 15.36L20.8233 10.37L20.8333 18H4.83331Z" fill="white"/>
</svg>
</div>
</div>
<div class="flex flex-col gap-2 px-2 text-center">
<h4 class="text-2xl font-extrabold text-dark-grey-900 font-display">Seamless Web Integration</h4>
<p class="font-medium text-grey-700">Integrate our shared team inboxes seamlessly with your website. Enhance the user experience and provide efficient communication channels. </p>
</div>
</div>
<div class="flex flex-col items-center col-span-1 gap-6 px-10 py-5 bg-white shadow-main rounded-3xl">
<div>
<div class="flex items-center justify-center w-16 h-16 rounded-2xl bg-purple-blue-500">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24" fill="none">
<path d="M3.28996 14.78L3.19996 14.69C2.80996 14.3 2.80996 13.67 3.19996 13.28L9.28996 7.18C9.67996 6.79 10.31 6.79 10.7 7.18L13.99 10.47L20.38 3.29C20.76 2.86 21.43 2.85 21.83 3.25C22.2 3.63 22.22 4.23 21.87 4.62L14.7 12.69C14.32 13.12 13.66 13.14 13.25 12.73L9.99996 9.48L4.69996 14.78C4.31996 15.17 3.67996 15.17 3.28996 14.78ZM4.69996 20.78L9.99996 15.48L13.25 18.73C13.66 19.14 14.32 19.12 14.7 18.69L21.87 10.62C22.22 10.23 22.2 9.63 21.83 9.25C21.43 8.85 20.76 8.86 20.38 9.29L13.99 16.47L10.7 13.18C10.31 12.79 9.67996 12.79 9.28996 13.18L3.19996 19.28C2.80996 19.67 2.80996 20.3 3.19996 20.69L3.28996 20.78C3.67996 21.17 4.31996 21.17 4.69996 20.78Z" fill="white"/>
</svg>
</div>
</div>
<div class="flex flex-col gap-2 px-2 text-center">
<h4 class="text-2xl font-extrabold text-dark-grey-900 font-display">Effortless Team Management</h4>
<p class="font-medium text-grey-700">Manage your team effortlessly with our shared team inboxes. Simplify team reporting and ensure smooth operations. </p>
</div>
</div>
<div class="flex flex-col items-center col-span-1 gap-6 px-10 py-5">
<div>
<div class="flex items-center justify-center w-16 h-16 rounded-2xl bg-purple-blue-500">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24" fill="none">
<path d="M15.8766 12.71C16.857 11.9387 17.5726 10.8809 17.9239 9.68394C18.2751 8.48697 18.2445 7.21027 17.8364 6.03147C17.4283 4.85267 16.6629 3.83039 15.6467 3.10686C14.6305 2.38332 13.4141 1.99451 12.1666 1.99451C10.9192 1.99451 9.70274 2.38332 8.68655 3.10686C7.67037 3.83039 6.90497 4.85267 6.49684 6.03147C6.0887 7.21027 6.05814 8.48697 6.40938 9.68394C6.76063 10.8809 7.47623 11.9387 8.45662 12.71C6.7767 13.383 5.31091 14.4994 4.21552 15.9399C3.12012 17.3805 2.43619 19.0913 2.23662 20.89C2.22218 21.0213 2.23374 21.1542 2.27065 21.2811C2.30756 21.4079 2.36909 21.5263 2.45173 21.6293C2.61864 21.8375 2.86141 21.9708 3.12662 22C3.39184 22.0292 3.65778 21.9518 3.86595 21.7849C4.07411 21.618 4.20745 21.3752 4.23662 21.11C4.45621 19.1552 5.38831 17.3498 6.85484 16.0388C8.32137 14.7278 10.2195 14.003 12.1866 14.003C14.1537 14.003 16.0519 14.7278 17.5184 16.0388C18.9849 17.3498 19.917 19.1552 20.1366 21.11C20.1638 21.3557 20.2811 21.5827 20.4657 21.747C20.6504 21.9114 20.8894 22.0015 21.1366 22H21.2466C21.5088 21.9698 21.7483 21.8373 21.9132 21.6313C22.078 21.4252 22.1547 21.1624 22.1266 20.9C21.9261 19.0962 21.2385 17.381 20.1375 15.9382C19.0364 14.4954 17.5635 13.3795 15.8766 12.71ZM12.1666 12C11.3755 12 10.6021 11.7654 9.94434 11.3259C9.28655 10.8864 8.77385 10.2616 8.4711 9.53074C8.16835 8.79983 8.08914 7.99557 8.24348 7.21964C8.39782 6.44372 8.77879 5.73099 9.3382 5.17158C9.89761 4.61217 10.6103 4.2312 11.3863 4.07686C12.1622 3.92252 12.9665 4.00173 13.6974 4.30448C14.4283 4.60724 15.053 5.11993 15.4925 5.77772C15.932 6.43552 16.1666 7.20888 16.1666 8C16.1666 9.06087 15.7452 10.0783 14.9951 10.8284C14.2449 11.5786 13.2275 12 12.1666 12Z" fill="white"/>
</svg>
</div>
</div>
<div class="flex flex-col gap-2 px-2 text-center">
<h4 class="text-2xl font-extrabold text-dark-grey-900 font-display">Gain Insights with Analytics</h4>
<p class="font-medium text-grey-700">Gain valuable insights and data analytics for your team through our analytics dashboard. Make informed decisions and track your progress effectively.</p>
</div>
</div>
</div>
</div>
</div>Section Tables Simple
Component from
Chakra UI Dashboard
Builder
<Grid data-type='Grid' templateColumns={{base:'repeat(1,1fr)',lg:'repeat(2,1fr)'}} gap={6}>
<GridItem data-type='GridItem'>
<TableContainer data-type='TableContainer'>
<Table data-type='Table' size='md'>
<Thead data-type='Thead'>
<Tr data-type='Tr'>
<Th data-type='Th'>Page</Th>
<Th data-type='Th'>Bounce Rate</Th>
<Th data-type='Th'>Duration</Th>
<Th data-type='Th'>Conversion Rate</Th>
</Tr>
</Thead>
<Tbody data-type='Tbody'>
<Tr data-type='Tr'>
<Td data-type='Td'>/loopple</Td>
<Td data-type='Td'>45%</Td>
<Td data-type='Td'>00:00:30</Td>
<Td data-type='Td'>1.23%</Td>
</Tr>
<Tr data-type='Tr'>
<Td data-type='Td'>/loopple/react</Td>
<Td data-type='Td'>21%</Td>
<Td data-type='Td'>00:04:24</Td>
<Td data-type='Td'>2.14%</Td>
</Tr>
<Tr data-type='Tr'>
<Td data-type='Td'>/loopple/chakra-ui</Td>
<Td data-type='Td'>38%</Td>
<Td data-type='Td'>00:03:58</Td>
<Td data-type='Td'>1.85%</Td>
</Tr>
</Tbody>
<Tfoot data-type='Tfoot'>
<Tr data-type='Tr'>
<Td data-type='Td'>/loopple/bootstrap</Td>
<Td data-type='Td'>55%</Td>
<Td data-type='Td'>00:01:40</Td>
<Td data-type='Td'>1.08%</Td>
</Tr>
</Tfoot>
</Table>
</TableContainer>
</GridItem>
<GridItem data-type='GridItem'>
<TableContainer data-type='TableContainer'>
<Table data-type='Table' size='md'>
<Thead data-type='Thead'>
<Tr data-type='Tr'>
<Th data-type='Th'>Language</Th>
<Th data-type='Th'>Users</Th>
<Th data-type='Th'>Users(%)</Th>
</Tr>
</Thead>
<Tbody data-type='Tbody'>
<Tr data-type='Tr'>
<Td data-type='Td'>en-us</Td>
<Td data-type='Td'>458</Td>
<Td data-type='Td'>52.52%</Td>
</Tr>
<Tr data-type='Tr'>
<Td data-type='Td'>en-gb</Td>
<Td data-type='Td'>112</Td>
<Td data-type='Td'>12.84%</Td>
</Tr>
<Tr data-type='Tr'>
<Td data-type='Td'>fr-fr</Td>
<Td data-type='Td'>33</Td>
<Td data-type='Td'>3.78%</Td>
</Tr>
<Tr data-type='Tr'>
<Td data-type='Td'>de-de</Td>
<Td data-type='Td'>22</Td>
<Td data-type='Td'>2.52%</Td>
</Tr>
</Tbody>
</Table>
</TableContainer>
</GridItem>
</Grid>Card Project
Component from
Chakra UI Dashboard
Builder
<Card data-type='Card'>
<CardHeader data-type='CardHeader'>
<Heading data-type='Heading' size='sm' mb='4'> Loopple Dashboard</Heading>
<AvatarGroup data-type='AvatarGroup'>
<Avatar data-type='Avatar' name='Ryan Florence' size='sm' src='https://bit.ly/ryan-florence'></Avatar>
<Avatar data-type='Avatar' name='Segun Adebayo' size='sm' src='https://bit.ly/sage-adebayo'></Avatar>
<Avatar data-type='Avatar' name='Kent Dodds' size='sm' src='https://bit.ly/kent-c-dodds'></Avatar>
<Avatar data-type='Avatar' name='Prosper Otemuyiwa' size='sm' src='https://bit.ly/prosper-baba'></Avatar>
<Avatar data-type='Avatar' name='Christian Nwamba' size='sm' src='https://bit.ly/code-beast'></Avatar>
</AvatarGroup>
</CardHeader>
<CardBody data-type='CardBody'>
<Text data-type='Text'>View a summary of all your customers over the last month.</Text>
</CardBody>
<CardFooter data-type='CardFooter'>
<Button data-type='Button'>View project</Button>
</CardFooter>
</Card>Section Projects Activity
Component from
Chakra UI Dashboard
Builder
<Grid data-type='Grid' templateColumns='repeat(12,1fr)' gap={6}>
<GridItem data-type='GridItem' colSpan={{base:12,lg:4}}>
<Card data-type='Card'
overflow='hidden'
variant='outline'
>
<Image data-type='Image'
objectFit='cover'
maxW='100%'
src='https://images.unsplash.com/photo-1620325867502-221cfb5faa5f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8cHJvamVjdHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=2000&q=60'
alt='Work'
/>
<Stack data-type='Stack'>
<CardBody data-type='CardBody'>
<Heading data-type='Heading' size='md'>Slack</Heading>
<Text data-type='Text' py='2'>
This project is about integrating a new chat system to slack platform.
</Text>
<Stack data-type='Stack' direction='row' mt='3'>
<Badge data-type='Badge' colorScheme='green'>IOS App</Badge>
<Badge data-type='Badge' colorScheme='red'>Desktop App</Badge>
</Stack>
</CardBody>
<CardFooter data-type='CardFooter'>
<Button data-type='Button' variant='solid' size='sm'>
Attach File
</Button>
</CardFooter>
</Stack>
</Card>
</GridItem>
<GridItem data-type='GridItem' colSpan={{base:12,lg:8}}>
<Card data-type='Card'
overflow='hidden'
variant='outline'
>
<Stack data-type='Stack'>
<CardBody data-type='CardBody'>
<Heading data-type='Heading' size='md' mb='4'>Activites</Heading>
<Flex data-type='Flex' flex='1' gap='4' alignItems='center' flexWrap='wrap'>
<Box data-type='Box'>
<Text data-type='Text' fontSize='md'>Vanessa Tucker added 2 new files in Loopple</Text>
<Text data-type='Text' fontSize='xs'>Today 7:51 PM</Text>
</Box>
</Flex>
<Divider data-type='Divider' my='3'></Divider>
<Flex data-type='Flex' flex='1' gap='4' alignItems='center' flexWrap='wrap'>
<Box data-type='Box'>
<Text data-type='Text' fontSize='md'>Charles Hall pushed 2 commits into Chakra UI Builder</Text>
<Text data-type='Text' fontSize='xs' mb='2'>Today 8:15 PM</Text>
<Box data-type='Box' border='1px' borderColor='gray.200' p='2'>
<Text data-type='Text' fontSize='xs'>Hi guys, I have a problem when I try to push into the main branch. Do you have any time today to take a look?</Text>
</Box>
</Box>
</Flex>
<Divider data-type='Divider' my='3'></Divider>
<Flex data-type='Flex' flex='1' gap='4' alignItems='center' flexWrap='wrap'>
<Box data-type='Box'>
<Text data-type='Text' fontSize='md'>Marko finished tasks</Text>
<Text data-type='Text' fontSize='xs'>Today 8:54 PM</Text>
</Box>
</Flex>
<Divider data-type='Divider' my='3'></Divider>
<Flex data-type='Flex' flex='1' gap='4' alignItems='center' flexWrap='wrap'>
<Box data-type='Box'>
<Text data-type='Text' fontSize='md'>Leonard completed the list for today's meeting</Text>
<Text data-type='Text' fontSize='xs' mb='2'>Today 9:14 PM</Text>
<UnorderedList data-type='UnorderedList'>
<ListItem data-type='ListItem'>Add tasks into Jira</ListItem>
<ListItem data-type='ListItem'>Discuss about new content on our blog</ListItem>
</UnorderedList>
</Box>
</Flex>
</CardBody>
<CardFooter data-type='CardFooter'>
<Button data-type='Button' variant='solid' size='sm'>
See more
</Button>
</CardFooter>
</Stack>
</Card>
</GridItem>
</Grid>Card Horizontal
Component from
Chakra UI Dashboard
Builder
<Card data-type='Card'
direction={{base:'column',sm:'row'}}
overflow='hidden'
variant='outline'
>
<Image data-type='Image'
objectFit='cover'
maxW={{base:'100%',sm:'200px'}}
src='https://images.unsplash.com/photo-1667489022797-ab608913feeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw5fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=800&q=60'
alt='Caffe Latte'
/>
<Stack data-type='Stack'>
<CardBody data-type='CardBody'>
<Heading data-type='Heading' size='md'>The perfect latte</Heading>
<Text data-type='Text' py='2'>
Caffè latte is a coffee beverage of Italian origin made with espresso
and steamed milk.
</Text>
</CardBody>
<CardFooter data-type='CardFooter'>
<Button data-type='Button' variant='solid' colorScheme='blue'>
Buy Latte
</Button>
</CardFooter>
</Stack>
</Card>Feature With Informations And Image
Pricing With 2 Plan Options And Swith Button For Monthlyyearly
Card Vertical
Component from
Chakra UI Dashboard
Builder
<Card data-type='Card' overflow="hidden" variant="outline">
<Image data-type='Image' alt="Caffe Latte" src="https://images.unsplash.com/photo-1667489022797-ab608913feeb?ixlib" objectFit="cover" maxW='100%'>
</Image>
<Stack data-type='Stack'>
<CardBody data-type='CardBody'>
<Heading data-type='Heading' size="md">
The perfect latte
</Heading>
<Text data-type='Text' py="2">
Caffè latte is a coffee beverage of Italian origin made with espresso and steamed milk.
</Text>
</CardBody>
<CardFooter data-type='CardFooter'>
<Button data-type='Button' type="button" variant="solid" colorScheme="blue">
Buy Latte
</Button>
</CardFooter>
</Stack>
</Card>