Chakra Components
Chakra UI Statistics Card

Horizon UI Boilerplate - Default

Chakra UI Statistics Card

The Statistics card offers an easy way to display important information in any dashboard.

page.tsx
import Statistics from '@/components/dashboard/main/cards/Statistics';
 
<Statistics
        icon={
            <Flex
            h={'56px'}
            w={'56px'}
            justifyContent="center"
            alignItems={'center'}
            rounded="full"
            fontSize="36px"
            color={brandColor}
            bg={bg}
            >
            <Icon as={MdOutlineGroup} w="24px" h="24px" />
            </Flex>
        }
        title="Credits used in the last month"
        value="46,042"
    />

Statistics