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 data-type='Button' rightIcon='{<ArrowForwardIcon/>}' variant='solid'>
Arrow
</Button>Button Icon Left
<Button data-type='Button' leftIcon='{<EmailIcon/>}' variant='solid'>
Email
</Button><Button data-type='Button' leftIcon='{<EmailIcon/>}' variant='solid'>
Email
</Button>Text
<Text data-type='Text' fontSize='md'>(md) In love with React & Next</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><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' /><Input data-type='Input' placeholder='Basic usage' />Divider
<Divider data-type='Divider' my='4'></Divider><Divider data-type='Divider' my='4'></Divider>Avatar Image
<Avatar data-type='Avatar' name='Dan Abrahmov' src='https://bit.ly/dan-abramov'></Avatar><Avatar data-type='Avatar' name='Dan Abrahmov' src='https://bit.ly/dan-abramov'></Avatar>Simple Footer
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 FooterCard 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><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><Textarea data-type='Textarea' placeholder='Here is a sample placeholder'></Textarea>