Stat With Cta

Stat With Divider

Stat With Icon

Stat With Label And Indicator

Stat With Progress Bar

import { Box, Heading, Stack, Text } from '@chakra-ui/react'

interface Props {
  label: string
  value: string
}
export const Stat = (props: Props) => {
  const { label, value, ...boxProps } = props
  return (
    <Box
      px={{ base: '4', md: '6' }}
      py={{ base: '5', md: '6' }}
      bg="bg.surface"
      borderRadius="lg"
      boxShadow="sm"
      {...boxProps}
    >
      <Stack>
        <Text textStyle="sm" color="fg.muted">
          {label}
        </Text>
        <Heading size={{ base: 'sm', md: 'md' }}>{value}</Heading>
      </Stack>
    </Box>
  )
}


Stat.tsx

import { Box, Container, SimpleGrid } from '@chakra-ui/react'
import { Stat } from './Stat'

const stats = [
  { label: 'Total Subscribers', value: '71,887' },
  { label: 'Avg. Open Rate', value: '56.87%' },
  { label: 'Avg. Click Rate', value: '12.87%' },
]

export const App = () => (
  <Box as="section" py={{ base: '4', md: '8' }}>
    <Container>
      <SimpleGrid columns={{ base: 1, md: 3 }} gap={{ base: '5', md: '6' }}>
        {stats.map(({ label, value }) => (
          <Stat key={label} label={label} value={value} />
        ))}
      </SimpleGrid>
    </Container>
  </Box>
)


App.tsx

State With Label

Form elements, tables, page shells, notifications, sidebars — everything you need to build beautiful responsive web applications.

Stats