Chakra Components - Chakra UI Dashboard

Discover 32 Chakra components available in Chakra UI Dashboard

Button Icon Right

<Button data-type='Button' rightIcon='{<ArrowForwardIcon/>}' variant='solid'>
   Arrow
  </Button>

Button Icon Left

<Button data-type='Button' leftIcon='{<EmailIcon/>}' variant='solid'>
   Email
  </Button>

Text

<Text data-type='Text' fontSize='md'>(md) In love with React & Next</Text>

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>

Input Outline

<Input data-type='Input' placeholder='Basic usage' />

Divider

<Divider data-type='Divider' my='4'></Divider>

Avatar Image

<Avatar data-type='Avatar' name='Dan Abrahmov' src='https://bit.ly/dan-abramov'></Avatar>

Simple Footer

Card Product

<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

<Textarea data-type='Textarea' placeholder='Here is a sample placeholder'></Textarea>