Chakra - All Components

<Input data-type='Input' variant='filled' placeholder='Filled' />

import { Box, Button, Drawer, DrawerOverlay, DrawerCloseButton, DrawerHeader, DrawerBody, DrawerContent, VStack, Image, Text } from '@chakra-ui/react';

interface Props {
  onClose: Function,
  isOpen: boolean,
  variant: 'drawer' | 'sidebar',
}

const SidebarContent = ({ onClick }: { onClick: Function }) => (
  <VStack>
    <Box w='100%' display="flex" justifyContent="center">
      <Image w='50%' src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/logos/loopple-logo-text.png" alt='Loopple'/>
    </Box>
    <Button w="100%">
      Home
    </Button>
    <Button w="100%">
      Dashboard
    </Button>
    <Button w="100%">
      Users
    </Button>
    <Button w="100%">
      Analytics
    </Button>
  </VStack>
)

const Sidebar = ({ isOpen, variant, onClose }: Props) => {
  return variant === 'sidebar' ? (
    <Box
      position="fixed"
      left={0}
      p={3}
      w="240px"
      top={0}
      h="100%"
      bg="#fff"
      borderRight="1px solid #ddd"
    >
      <VStack>
        <Box w='100%' display="flex" justifyContent="center">
          <Image w='50%' src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/logos/loopple-logo-text.png" alt='Loopple'/>
        </Box>
        <Button w="100%">
          Home
        </Button>
        <Button w="100%">
          Dashboard
        </Button>
        <Button w="100%">
          Users
        </Button>
        <Button w="100%">
          Analytics
        </Button>
      </VStack>
    </Box>
  ) : (
    <Drawer isOpen={isOpen} placement="left" onClose={onClose}>
      <DrawerOverlay>
        <DrawerContent>
          <DrawerCloseButton />
          <DrawerHeader>Loopple Chakra</DrawerHeader>
          <DrawerBody>
            <SidebarContent onClick={onClose} />
          </DrawerBody>
        </DrawerContent>
      </DrawerOverlay>
    </Drawer>
  )
}

export default Sidebar;

<Badge data-type='Badge'>Default</Badge>

<TableContainer data-type='TableContainer'>
  <Table data-type='Table' variant='simple'>
    <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'>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>

import { Box, IconButton, Text, Flex, Button } from '@chakra-ui/react'
import { ChevronRightIcon } from '@chakra-ui/icons'

interface Props {
  onShowSidebar: Function,
  showSidebarButton: boolean
}

const Header = ({ showSidebarButton = true, onShowSidebar }: Props) => {
  return (
    <Flex bg="#151515" p={4} color="white" justifyContent="center" w="100%">
      <Box flex="1">
        {showSidebarButton && (
          <IconButton
            icon={<ChevronRightIcon w={5} h={5} />}
            colorScheme="white"
            variant="outline"
            size="sm"
            onClick={onShowSidebar}
          />
        )}
      </Box>
      {!showSidebarButton && (
      <Box display="flex" ml="auto" alignItems="center" justifyContent="center" h="30px">
        <Text fontSize="md" mr="5">About Us</Text>
        <Text fontSize="md" mr="5">Contact</Text>
        <Text fontSize="md" mr="5">Terms</Text>
      </Box>
      )}
      <Box display="flex" ml="auto" alignItems="center" justifyContent="center" h="30px">
        <Button colorScheme='white' variant="outline" size="sm">Sign Up</Button>
      </Box>
    </Flex>
  )
}

export default Header

<Grid data-type='Grid' templateColumns='repeat(4, 1fr)' gap={6} mb="6">
            <GridItem data-type='GridItem'>
              <Card data-type='Card'
                overflow='hidden'
                variant='outline'
                >
<CardBody data-type='CardBody'>
                <Stat data-type='Stat'>
                 <StatLabel data-type='StatLabel'>Visits</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>
            </GridItem>
            <GridItem data-type='GridItem'>
              <Card data-type='Card'
                overflow='hidden'
                variant='outline'
                >
<CardBody data-type='CardBody'>
                <Stat data-type='Stat'>
                 <StatLabel data-type='StatLabel'>Users</StatLabel>
                 <StatNumber data-type='StatNumber'>16,890</StatNumber>
                 <StatHelpText data-type='StatHelpText'>
                   <StatArrow data-type='StatArrow' type='increase'></StatArrow>
                   14.85%
                 </StatHelpText>
               </Stat>
</CardBody>
              </Card>
            </GridItem>
            <GridItem data-type='GridItem'>
              <Card data-type='Card'
                overflow='hidden'
                variant='outline'
                >
<CardBody data-type='CardBody'>
                <Stat data-type='Stat'>
                 <StatLabel data-type='StatLabel'>Revenue</StatLabel>
                 <StatNumber data-type='StatNumber'>$1,230,670</StatNumber>
                 <StatHelpText data-type='StatHelpText'>
                   <StatArrow data-type='StatArrow' type='decrease'></StatArrow>
                   1.12%
                 </StatHelpText>
               </Stat>
</CardBody>
              </Card>
            </GridItem>
            <GridItem data-type='GridItem'>
              <Card data-type='Card'
                overflow='hidden'
                variant='outline'
                >
<CardBody data-type='CardBody'>
                <Stat data-type='Stat'>
                 <StatLabel data-type='StatLabel'>Expenses</StatLabel>
                 <StatNumber data-type='StatNumber'>$480,783</StatNumber>
                 <StatHelpText data-type='StatHelpText'>
                   <StatArrow data-type='StatArrow' type='increase'></StatArrow>
                   5.12%
                 </StatHelpText>
               </Stat>
</CardBody>
              </Card>
            </GridItem>
          </Grid>

<Grid data-type='Grid' templateColumns='repeat(4, 1fr)' gap={6} mb="6">
            <GridItem data-type='GridItem'>
              <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>
            </GridItem>
            <GridItem data-type='GridItem'>
              <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">Users</StatLabel>
                 <StatNumber data-type='StatNumber' color="white">16,890</StatNumber>
                 <StatHelpText data-type='StatHelpText' color="white">
                   <StatArrow data-type='StatArrow' type='increase'></StatArrow>
                   14.85%
                 </StatHelpText>
               </Stat>
</CardBody>
              </Card>
            </GridItem>
            <GridItem data-type='GridItem'>
              <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">Revenue</StatLabel>
                 <StatNumber data-type='StatNumber' color="white">$1,230,670</StatNumber>
                 <StatHelpText data-type='StatHelpText' color="white">
                   <StatArrow data-type='StatArrow' type='decrease'></StatArrow>
                   1.12%
                 </StatHelpText>
               </Stat>
</CardBody>
              </Card>
            </GridItem>
            <GridItem data-type='GridItem'>
              <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">Expenses</StatLabel>
                 <StatNumber data-type='StatNumber' color="white">$480,783</StatNumber>
                 <StatHelpText data-type='StatHelpText' color="white">
                   <StatArrow data-type='StatArrow' type='increase'></StatArrow>
                   5.12%
                 </StatHelpText>
               </Stat>
</CardBody>
              </Card>
            </GridItem>
          </Grid>

<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 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 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>