Black Friday! Up to 90% OFF
<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>