Chakra - All Components

Discover 32 Chakra components available in Loopple

Button Icon Right

Component from Chakra UI Dashboard Builder
<Button data-type='Button' rightIcon='{<ArrowForwardIcon/>}' variant='solid'>
   Arrow
  </Button>

Button Icon Left

Component from Chakra UI Dashboard Builder
<Button data-type='Button' leftIcon='{<EmailIcon/>}' variant='solid'>
   Email
  </Button>

Text

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

Card Stats

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

Input Outline

Component from Chakra UI Dashboard Builder
<Input data-type='Input' placeholder='Basic usage' />

Divider

Component from Chakra UI Dashboard Builder
<Divider data-type='Divider' my='4'></Divider>

Avatar Image

Component from Chakra UI Dashboard Builder
<Avatar data-type='Avatar' name='Dan Abrahmov' src='https://bit.ly/dan-abramov'></Avatar>

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
<Textarea data-type='Textarea' placeholder='Here is a sample placeholder'></Textarea>