Framework

All Frameworks
bootstrap tailwind chakra

Theme

All Themes
Horizon UI Dashboard Chakra UI Dashboard AdminKit Asteria Dashboard Soft UI Design System Motion Landing Library Soft UI Dashboard Tailwind Soft UI Dashboard Riva Dashboard Tailwind Motion Landing Library React Argon Dashboard
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

Team Section With Profile Cards

Component from Motion Landing Library Builder

Faq With Text And Accordions In The Right

Component from Motion Landing Library Builder
PRO Component

Header Illustration Blue

Component from Riva Dashboard Tailwind Builder

Navbar Simple

Component from Chakra UI Dashboard Builder 
import { Box, IconButton, Text, Flex, Button } from '@chakra-ui/react'
import { ChevronRightIcon } from '@chakra-ui/icons'

interface Props {
  onShowSidebar: Function,
  showSidebarButton: boolean
}

const Header = ({ showSidebarButton = true, onShowSidebar }: Props) => {
  return (
    <Flex bg="#151515" p={4} color="white" justifyContent="center" w="100%">
      <Box flex="1">
        {showSidebarButton && (
          <IconButton
            icon={<ChevronRightIcon w={5} h={5} />}
            colorScheme="white"
            variant="outline"
            size="sm"
            onClick={onShowSidebar}
          />
        )}
      </Box>
      {!showSidebarButton && (
      <Box display="flex" ml="auto" alignItems="center" justifyContent="center" h="30px">
        <Text fontSize="md" mr="5">About Us</Text>
        <Text fontSize="md" mr="5">Contact</Text>
        <Text fontSize="md" mr="5">Terms</Text>
      </Box>
      )}
      <Box display="flex" ml="auto" alignItems="center" justifyContent="center" h="30px">
        <Button colorScheme='white' variant="outline" size="sm">Sign Up</Button>
      </Box>
    </Flex>
  )
}

export default Header

Stats Cards

Component from Chakra UI Dashboard Builder 
<Grid data-type='Grid' templateColumns='repeat(4, 1fr)' gap={6} mb="6">
            <GridItem data-type='GridItem'>
              <Card data-type='Card'
                overflow='hidden'
                variant='outline'
                >
<CardBody data-type='CardBody'>
                <Stat data-type='Stat'>
                 <StatLabel data-type='StatLabel'>Visits</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>
            </GridItem>
            <GridItem data-type='GridItem'>
              <Card data-type='Card'
                overflow='hidden'
                variant='outline'
                >
<CardBody data-type='CardBody'>
                <Stat data-type='Stat'>
                 <StatLabel data-type='StatLabel'>Users</StatLabel>
                 <StatNumber data-type='StatNumber'>16,890</StatNumber>
                 <StatHelpText data-type='StatHelpText'>
                   <StatArrow data-type='StatArrow' type='increase'></StatArrow>
                   14.85%
                 </StatHelpText>
               </Stat>
</CardBody>
              </Card>
            </GridItem>
            <GridItem data-type='GridItem'>
              <Card data-type='Card'
                overflow='hidden'
                variant='outline'
                >
<CardBody data-type='CardBody'>
                <Stat data-type='Stat'>
                 <StatLabel data-type='StatLabel'>Revenue</StatLabel>
                 <StatNumber data-type='StatNumber'>$1,230,670</StatNumber>
                 <StatHelpText data-type='StatHelpText'>
                   <StatArrow data-type='StatArrow' type='decrease'></StatArrow>
                   1.12%
                 </StatHelpText>
               </Stat>
</CardBody>
              </Card>
            </GridItem>
            <GridItem data-type='GridItem'>
              <Card data-type='Card'
                overflow='hidden'
                variant='outline'
                >
<CardBody data-type='CardBody'>
                <Stat data-type='Stat'>
                 <StatLabel data-type='StatLabel'>Expenses</StatLabel>
                 <StatNumber data-type='StatNumber'>$480,783</StatNumber>
                 <StatHelpText data-type='StatHelpText'>
                   <StatArrow data-type='StatArrow' type='increase'></StatArrow>
                   5.12%
                 </StatHelpText>
               </Stat>
</CardBody>
              </Card>
            </GridItem>
          </Grid>

Stats Card Dark

Component from Chakra UI Dashboard Builder 
<Grid data-type='Grid' templateColumns='repeat(4, 1fr)' gap={6} mb="6">
            <GridItem data-type='GridItem'>
              <Card data-type='Card'
                overflow='hidden'
                variant='outline'
                bg="blackAlpha.900"
                >
<CardBody data-type='CardBody'>
                <Stat data-type='Stat'>
                 <StatLabel data-type='StatLabel' color="white">Visits</StatLabel>
                 <StatNumber data-type='StatNumber' color="white">345,670</StatNumber>
                 <StatHelpText data-type='StatHelpText' color="white">
                   <StatArrow data-type='StatArrow' type='increase'></StatArrow>
                   23.36%
                 </StatHelpText>
               </Stat>
</CardBody>
              </Card>
            </GridItem>
            <GridItem data-type='GridItem'>
              <Card data-type='Card'
                overflow='hidden'
                variant='outline'
                bg="blackAlpha.900"
                >
<CardBody data-type='CardBody'>
                <Stat data-type='Stat'>
                 <StatLabel data-type='StatLabel' color="white">Users</StatLabel>
                 <StatNumber data-type='StatNumber' color="white">16,890</StatNumber>
                 <StatHelpText data-type='StatHelpText' color="white">
                   <StatArrow data-type='StatArrow' type='increase'></StatArrow>
                   14.85%
                 </StatHelpText>
               </Stat>
</CardBody>
              </Card>
            </GridItem>
            <GridItem data-type='GridItem'>
              <Card data-type='Card'
                overflow='hidden'
                variant='outline'
                bg="blackAlpha.900"
                >
<CardBody data-type='CardBody'>
                <Stat data-type='Stat'>
                 <StatLabel data-type='StatLabel' color="white">Revenue</StatLabel>
                 <StatNumber data-type='StatNumber' color="white">$1,230,670</StatNumber>
                 <StatHelpText data-type='StatHelpText' color="white">
                   <StatArrow data-type='StatArrow' type='decrease'></StatArrow>
                   1.12%
                 </StatHelpText>
               </Stat>
</CardBody>
              </Card>
            </GridItem>
            <GridItem data-type='GridItem'>
              <Card data-type='Card'
                overflow='hidden'
                variant='outline'
                bg="blackAlpha.900"
                >
<CardBody data-type='CardBody'>
                <Stat data-type='Stat'>
                 <StatLabel data-type='StatLabel' color="white">Expenses</StatLabel>
                 <StatNumber data-type='StatNumber' color="white">$480,783</StatNumber>
                 <StatHelpText data-type='StatHelpText' color="white">
                   <StatArrow data-type='StatArrow' type='increase'></StatArrow>
                   5.12%
                 </StatHelpText>
               </Stat>
</CardBody>
              </Card>
            </GridItem>
          </Grid>

Card With Divider

Component from Chakra UI Dashboard Builder 
<Card data-type='Card'>
  <CardHeader data-type='CardHeader'>
    <Heading data-type='Heading' size='md'>Client Report</Heading>
  </CardHeader>

  <CardBody data-type='CardBody'>
    <Stack data-type='Stack' spacing='4'>
      <Box data-type='Box'>
        <Heading data-type='Heading' size='xs' textTransform='uppercase'>
          Summary
        </Heading>
        <Text data-type='Text' pt='2' fontSize='sm'>
          View a summary of all your clients over the last month.
        </Text>
      </Box>
      <Divider data-type='Divider' orientation='horizontal'></Divider>
      <Box data-type='Box'>
        <Heading data-type='Heading' size='xs' textTransform='uppercase'>
          Overview
        </Heading>
        <Text data-type='Text' pt='2' fontSize='sm'>
          Check out the overview of your clients.
        </Text>
      </Box>
      <Divider data-type='Divider' orientation='horizontal'></Divider>
      <Box data-type='Box'>
        <Heading data-type='Heading' size='xs' textTransform='uppercase'>
          Analysis
        </Heading>
        <Text data-type='Text' pt='2' fontSize='sm'>
          See a detailed analysis of all your business clients.
        </Text>
      </Box>
    </Stack>
  </CardBody>
</Card>

Card Stats Dark

Component from Chakra UI Dashboard Builder 
<Card data-type='Card'
                overflow='hidden'
                variant='outline'
                bg="blackAlpha.900"
                >
<CardBody data-type='CardBody'>
                <Stat data-type='Stat'>
                 <StatLabel data-type='StatLabel' color="white">Visits</StatLabel>
                 <StatNumber data-type='StatNumber' color="white">345,670</StatNumber>
                 <StatHelpText data-type='StatHelpText' color="white">
                   <StatArrow data-type='StatArrow' type='increase'></StatArrow>
                   23.36%
                 </StatHelpText>
               </Stat>
</CardBody>
              </Card>

Card Post

Component from Chakra UI Dashboard Builder 
<Card data-type='Card' maxW='md'>
 <CardHeader data-type='CardHeader'>
   <Flex data-type='Flex' spacing='4'>
     <Flex data-type='Flex' flex='1' gap='4' alignItems='center' flexWrap='wrap'>
       <Avatar data-type='Avatar' name='Segun Adebayo' src='https://images.unsplash.com/photo-1531384441138-2736e62e0919?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NzF8fHBvcnRyYWl0fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60'></Avatar>
       <Box data-type='Box'>
         <Heading data-type='Heading' size='sm'>Aloïs Pierre</Heading>
         <Text data-type='Text'>Creator of Studio 23</Text>
        </Box>
      </Flex>
    </Flex>
  </CardHeader>
 <CardBody data-type='CardBody'>
   <Text data-type='Text'>
      With Chakra UI, I wanted to sync the speed of development with the speed
      of design. I wanted the developer to be just as excited as the designer to
      create a screen.
    </Text>
  </CardBody>
 <Image data-type='Image'
    objectFit='cover'
    src='https://images.unsplash.com/photo-1546815670-5c5e437ffc6d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8c3RhcmJ1Y2tzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60'
    alt='Starbucks'
  ></Image>

 <CardFooter data-type='CardFooter'
    justify='space-between'
    flexWrap='wrap'
  >
   <Button data-type='Button' mr='2' flex='1' leftIcon='{<ChatIcon/>}'>
      Comment
    </Button>
   <Button data-type='Button' flex='1' leftIcon='{<LinkIcon/>}'>
      Share
    </Button>
  </CardFooter>
</Card>

Avatar Group

Component from Chakra UI Dashboard Builder 
<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>