Framework

All Frameworks
bootstrap tailwind chakra

Theme

All Themes
AdminKit Horizon UI Dashboard Chakra UI Dashboard Motion Landing Library Asteria Dashboard Soft UI Dashboard Riva Dashboard Tailwind Motion Landing Library React Soft UI Design System Soft UI Dashboard Tailwind Argon Dashboard
All 32
Components 12
Typography 3
Cards 8
Sidebars 1
Tables 2
Navbars 1
Cards Section 2
Tables Section 1
Projects Section 1

Chakra Components - Chakra UI Dashboard

Discover 32 Chakra components available in Chakra UI Dashboard

Avatar Group

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

Section Tables Simple

Component from Chakra UI Dashboard Builder 
<Grid data-type='Grid' templateColumns={{base:'repeat(1,1fr)',lg:'repeat(2,1fr)'}} gap={6}>
            <GridItem data-type='GridItem'>
              <TableContainer data-type='TableContainer'>
                <Table data-type='Table' size='md'>
                  <Thead data-type='Thead'>
                    <Tr data-type='Tr'>
                      <Th data-type='Th'>Page</Th>
                      <Th data-type='Th'>Bounce Rate</Th>
                      <Th data-type='Th'>Duration</Th>
                      <Th data-type='Th'>Conversion Rate</Th>
                    </Tr>
                  </Thead>
                  <Tbody data-type='Tbody'>
                    <Tr data-type='Tr'>
                      <Td data-type='Td'>/loopple</Td>
                      <Td data-type='Td'>45%</Td>
                      <Td data-type='Td'>00:00:30</Td>
                      <Td data-type='Td'>1.23%</Td>
                    </Tr>
                    <Tr data-type='Tr'>
                      <Td data-type='Td'>/loopple/react</Td>
                      <Td data-type='Td'>21%</Td>
                      <Td data-type='Td'>00:04:24</Td>
                      <Td data-type='Td'>2.14%</Td>
                    </Tr>
                    <Tr data-type='Tr'>
                      <Td data-type='Td'>/loopple/chakra-ui</Td>
                      <Td data-type='Td'>38%</Td>
                      <Td data-type='Td'>00:03:58</Td>
                      <Td data-type='Td'>1.85%</Td>
                    </Tr>
                  </Tbody>
                  <Tfoot data-type='Tfoot'>
                    <Tr data-type='Tr'>
                      <Td data-type='Td'>/loopple/bootstrap</Td>
                      <Td data-type='Td'>55%</Td>
                      <Td data-type='Td'>00:01:40</Td>
                      <Td data-type='Td'>1.08%</Td>
                    </Tr>
                  </Tfoot>
                </Table>
              </TableContainer>
            </GridItem>
            <GridItem data-type='GridItem'>
            <TableContainer data-type='TableContainer'>
              <Table data-type='Table' size='md'>
                <Thead data-type='Thead'>
                  <Tr data-type='Tr'>
                    <Th data-type='Th'>Language</Th>
                    <Th data-type='Th'>Users</Th>
                    <Th data-type='Th'>Users(%)</Th>
                  </Tr>
                </Thead>
                <Tbody data-type='Tbody'>
                  <Tr data-type='Tr'>
                    <Td data-type='Td'>en-us</Td>
                    <Td data-type='Td'>458</Td>
                    <Td data-type='Td'>52.52%</Td>
                  </Tr>
                  <Tr data-type='Tr'>
                    <Td data-type='Td'>en-gb</Td>
                    <Td data-type='Td'>112</Td>
                    <Td data-type='Td'>12.84%</Td>
                  </Tr>
                  <Tr data-type='Tr'>
                    <Td data-type='Td'>fr-fr</Td>
                    <Td data-type='Td'>33</Td>
                    <Td data-type='Td'>3.78%</Td>
                  </Tr>
                  <Tr data-type='Tr'>
                    <Td data-type='Td'>de-de</Td>
                    <Td data-type='Td'>22</Td>
                    <Td data-type='Td'>2.52%</Td>
                  </Tr>
                </Tbody>
              </Table>
              </TableContainer>
            </GridItem>
          </Grid>

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>

Section Projects Activity

Component from Chakra UI Dashboard Builder 
<Grid data-type='Grid' templateColumns='repeat(12,1fr)' gap={6}>
            <GridItem data-type='GridItem' colSpan={{base:12,lg:4}}>
            <Card data-type='Card'
              overflow='hidden'
              variant='outline'
              >
              <Image data-type='Image'
                objectFit='cover'
                maxW='100%'
                src='https://images.unsplash.com/photo-1620325867502-221cfb5faa5f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8cHJvamVjdHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=2000&q=60'
                alt='Work'
              />
              <Stack data-type='Stack'>
                <CardBody data-type='CardBody'>
                  <Heading data-type='Heading' size='md'>Slack</Heading>
                  <Text data-type='Text' py='2'>
                    This project is about integrating a new chat system to slack platform.
                  </Text>
                  <Stack data-type='Stack' direction='row' mt='3'>
                    <Badge data-type='Badge' colorScheme='green'>IOS App</Badge>
                    <Badge data-type='Badge' colorScheme='red'>Desktop App</Badge>
                  </Stack>
                </CardBody>
                <CardFooter data-type='CardFooter'>
                  <Button data-type='Button' variant='solid' size='sm'>
                    Attach File
                  </Button>
                </CardFooter>
              </Stack>
              </Card>
            </GridItem>
            <GridItem data-type='GridItem' colSpan={{base:12,lg:8}}>
            <Card data-type='Card'
              overflow='hidden'
              variant='outline'
              >
              <Stack data-type='Stack'>
                <CardBody data-type='CardBody'>
                  <Heading data-type='Heading' size='md' mb='4'>Activites</Heading>
                    <Flex data-type='Flex' flex='1' gap='4' alignItems='center' flexWrap='wrap'>
                      <Box data-type='Box'>
                        <Text data-type='Text' fontSize='md'>Vanessa Tucker added 2 new files in Loopple</Text>
                        <Text data-type='Text' fontSize='xs'>Today 7:51 PM</Text>
                      </Box>
                    </Flex>
                    <Divider data-type='Divider' my='3'></Divider>
                    <Flex data-type='Flex' flex='1' gap='4' alignItems='center' flexWrap='wrap'>
                      <Box data-type='Box'>
                        <Text data-type='Text' fontSize='md'>Charles Hall pushed 2 commits into Chakra UI Builder</Text>
                        <Text data-type='Text' fontSize='xs' mb='2'>Today 8:15 PM</Text>
                        <Box data-type='Box' border='1px' borderColor='gray.200' p='2'>
                          <Text data-type='Text' fontSize='xs'>Hi guys, I have a problem when I try to push into the main branch. Do you have any time today to take a look?</Text>
                        </Box>
                      </Box>
                    </Flex>
                    <Divider data-type='Divider' my='3'></Divider>
                    <Flex data-type='Flex' flex='1' gap='4' alignItems='center' flexWrap='wrap'>
                      <Box data-type='Box'>
                        <Text data-type='Text' fontSize='md'>Marko finished tasks</Text>
                        <Text data-type='Text' fontSize='xs'>Today 8:54 PM</Text>
                      </Box>
                    </Flex>
                    <Divider data-type='Divider' my='3'></Divider>
                    <Flex data-type='Flex' flex='1' gap='4' alignItems='center' flexWrap='wrap'>
                      <Box data-type='Box'>
                        <Text data-type='Text' fontSize='md'>Leonard completed the list for today's meeting</Text>
                        <Text data-type='Text' fontSize='xs' mb='2'>Today 9:14 PM</Text>
                        <UnorderedList data-type='UnorderedList'>
                          <ListItem data-type='ListItem'>Add tasks into Jira</ListItem>
                          <ListItem data-type='ListItem'>Discuss about new content on our blog</ListItem>
                        </UnorderedList>
                      </Box>
                    </Flex>
                </CardBody>
                <CardFooter data-type='CardFooter'>
                  <Button data-type='Button' variant='solid' size='sm'>
                    See more
                  </Button>
                </CardFooter>
              </Stack>
              </Card>
            </GridItem>
          </Grid>

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>

Button

Component from Chakra UI Dashboard Builder 
<Button data-type='Button' colorScheme='blue'>Button</Button>

Alert

Component from Chakra UI Dashboard Builder 
<Alert data-type='Alert' status="info">
      <AlertIcon data-type='AlertIcon'> </AlertIcon>
      <AlertTitle data-type='AlertTitle' >
        Alert title
      </AlertTitle>
      <AlertDescription data-type='AlertDescription'>Alert descrsiption</AlertDescription>
    </Alert>

Avatar

Component from Chakra UI Dashboard Builder 
<Avatar data-type='Avatar'><Avatar/ data-type='Avatar/'>

Table Striped

Component from Chakra UI Dashboard Builder 
<TableContainer data-type='TableContainer'>
  <Table data-type='Table' variant='striped' colorScheme='teal'>
    <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' isNumeric>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>