UI Components Library

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

Simple Footer

Component from Chakra UI Dashboard Builder

import { Box, Container, Stack, Text, Link } from '@chakra-ui/react'
import { ChevronRightIcon } from '@chakra-ui/icons'

const Footer = () => {
  return (
    <Box
      bg='gray.50'
      color='gray.700'
      mt="15">
      <Container
        as={Stack}
        maxW={'6xl'}
        py={4}
        direction={{ base: 'column', md: 'row' }}
        spacing={4}
        justify={{ base: 'center', md: 'space-between' }}
        align={{ base: 'center', md: 'center' }}>
        <Stack direction={'row'} spacing={6}>
          <Link href={'#'}>Home</Link>
          <Link href={'#'}>About</Link>
          <Link href={'#'}>Blog</Link>
          <Link href={'#'}>Contact</Link>
        </Stack>
       <Text>2023 Chakra Builder, built with <Link href='https://www.loopple.com' isExternal>Loopple</Link>.</Text>
      </Container>
    </Box>
  )
}

export default Footer

Card Product

Component from Chakra UI Dashboard Builder

<Card data-type='Card' maxW='sm'>
  <CardBody data-type='CardBody'>
    <Image data-type='Image'
      src='https://images.unsplash.com/photo-1555041469-a586c61ea9bc?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80'
      alt='Green double couch with wooden legs'
      borderRadius='lg'></Image>
    <Stack data-type='Stack' mt='6' spacing='3'>
      <Heading data-type='Heading' size='md'>Living room Sofa</Heading>
      <Text data-type='Text'>
        This sofa is perfect for modern tropical spaces, baroque inspired
        spaces, earthy toned spaces and for people who love a chic design with a
        sprinkle of vintage design.
      </Text>
      <Text data-type='Text' color='blue.600' fontSize='2xl'>
        $450
      </Text>
    </Stack>
  </CardBody>
  <CardFooter data-type='CardFooter'>
    <ButtonGroup data-type='ButtonGroup' spacing='2'>
      <Button data-type='Button' variant='solid' colorScheme='blue'>
        Buy now
      </Button>
    </ButtonGroup>
  </CardFooter>
</Card>

Textarea

Component from Chakra UI Dashboard Builder

Input Filled

Component from Chakra UI Dashboard Builder

Faq With Vertical Accordion

Component from Motion Landing Library Builder

PRO Component

Sidebar Simple

Component from Chakra UI Dashboard Builder

import { Box, Button, Drawer, DrawerOverlay, DrawerCloseButton, DrawerHeader, DrawerBody, DrawerContent, VStack, Image, Text } from '@chakra-ui/react';

interface Props {
  onClose: Function,
  isOpen: boolean,
  variant: 'drawer' | 'sidebar',
}

const SidebarContent = ({ onClick }: { onClick: Function }) => (
  <VStack>
    <Box w='100%' display="flex" justifyContent="center">
      <Image w='50%' src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/logos/loopple-logo-text.png" alt='Loopple'/>
    </Box>
    <Button w="100%">
      Home
    </Button>
    <Button w="100%">
      Dashboard
    </Button>
    <Button w="100%">
      Users
    </Button>
    <Button w="100%">
      Analytics
    </Button>
  </VStack>
)

const Sidebar = ({ isOpen, variant, onClose }: Props) => {
  return variant === 'sidebar' ? (
    <Box
      position="fixed"
      left={0}
      p={3}
      w="240px"
      top={0}
      h="100%"
      bg="#fff"
      borderRight="1px solid #ddd"
    >
      <VStack>
        <Box w='100%' display="flex" justifyContent="center">
          <Image w='50%' src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/logos/loopple-logo-text.png" alt='Loopple'/>
        </Box>
        <Button w="100%">
          Home
        </Button>
        <Button w="100%">
          Dashboard
        </Button>
        <Button w="100%">
          Users
        </Button>
        <Button w="100%">
          Analytics
        </Button>
      </VStack>
    </Box>
  ) : (
    <Drawer isOpen={isOpen} placement="left" onClose={onClose}>
      <DrawerOverlay>
        <DrawerContent>
          <DrawerCloseButton />
          <DrawerHeader>Loopple Chakra</DrawerHeader>
          <DrawerBody>
            <SidebarContent onClick={onClose} />
          </DrawerBody>
        </DrawerContent>
      </DrawerOverlay>
    </Drawer>
  )
}

export default Sidebar;

Badge

Component from Chakra UI Dashboard Builder

Table

Component from Chakra UI Dashboard Builder

<TableContainer data-type='TableContainer'>
  <Table data-type='Table' variant='simple'>
    <Thead data-type='Thead'>
      <Tr data-type='Tr'>
        <Th data-type='Th'>To convert</Th>
        <Th data-type='Th'>into</Th>
        <Th data-type='Th'>multiply by</Th>
      </Tr>
    </Thead>
    <Tbody data-type='Tbody'>
      <Tr data-type='Tr'>
        <Td data-type='Td'>inches</Td>
        <Td data-type='Td'>millimetres (mm)</Td>
        <Td data-type='Td' isNumeric>25.4</Td>
      </Tr>
      <Tr data-type='Tr'>
        <Td data-type='Td'>feet</Td>
        <Td data-type='Td'>centimetres (cm)</Td>
        <Td data-type='Td' isNumeric>30.48</Td>
      </Tr>
      <Tr data-type='Tr'>
        <Td data-type='Td'>yards</Td>
        <Td data-type='Td'>metres (m)</Td>
        <Td data-type='Td' isNumeric>0.91444</Td>
      </Tr>
    </Tbody>
    <Tfoot data-type='Tfoot'>
      <Tr data-type='Tr'>
        <Th data-type='Th'>To convert</Th>
        <Th data-type='Th'>into</Th>
        <Th data-type='Th' isNumeric>multiply by</Th>
      </Tr>
    </Tfoot>
  </Table>
</TableContainer>

Modal

Component from Argon Dashboard Builder

<button type="button" class="btn btn-primary draggable" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Navbar With Logo And Search Input

Component from Motion Landing Library React Builder