Chakra UI Dashboard Components
Discover 8 components available in Chakra UI Dashboard
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>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>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>Card Project
Component from
Chakra UI Dashboard
Builder
<Card data-type='Card'>
<CardHeader data-type='CardHeader'>
<Heading data-type='Heading' size='sm' mb='4'> Loopple Dashboard</Heading>
<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>
</CardHeader>
<CardBody data-type='CardBody'>
<Text data-type='Text'>View a summary of all your customers over the last month.</Text>
</CardBody>
<CardFooter data-type='CardFooter'>
<Button data-type='Button'>View project</Button>
</CardFooter>
</Card>Card Horizontal
Component from
Chakra UI Dashboard
Builder
<Card data-type='Card'
direction={{base:'column',sm:'row'}}
overflow='hidden'
variant='outline'
>
<Image data-type='Image'
objectFit='cover'
maxW={{base:'100%',sm:'200px'}}
src='https://images.unsplash.com/photo-1667489022797-ab608913feeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw5fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=800&q=60'
alt='Caffe Latte'
/>
<Stack data-type='Stack'>
<CardBody data-type='CardBody'>
<Heading data-type='Heading' size='md'>The perfect latte</Heading>
<Text data-type='Text' py='2'>
Caffè latte is a coffee beverage of Italian origin made with espresso
and steamed milk.
</Text>
</CardBody>
<CardFooter data-type='CardFooter'>
<Button data-type='Button' variant='solid' colorScheme='blue'>
Buy Latte
</Button>
</CardFooter>
</Stack>
</Card>Card Vertical
Component from
Chakra UI Dashboard
Builder
<Card data-type='Card' overflow="hidden" variant="outline">
<Image data-type='Image' alt="Caffe Latte" src="https://images.unsplash.com/photo-1667489022797-ab608913feeb?ixlib" objectFit="cover" maxW='100%'>
</Image>
<Stack data-type='Stack'>
<CardBody data-type='CardBody'>
<Heading data-type='Heading' size="md">
The perfect latte
</Heading>
<Text data-type='Text' py="2">
Caffè latte is a coffee beverage of Italian origin made with espresso and steamed milk.
</Text>
</CardBody>
<CardFooter data-type='CardFooter'>
<Button data-type='Button' type="button" variant="solid" colorScheme="blue">
Buy Latte
</Button>
</CardFooter>
</Stack>
</Card>