Chakra - All Components
Discover 32 Chakra components available in Loopple
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
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>