import * as React from 'react';
import { Box, IconButton, LinearProgress, Typography } from '@mui/material';
import { TbEditCircle, TbPin, TbShare, TbShoe } from 'react-icons/tb';
export default function StatProgress() {
    return (<Box sx={{
            display: 'flex',
            flexDirection: 'column',
            bgcolor: 'background.paper',
            borderRadius: 1,
            p: 3,
            borderWidth: 1,
            borderStyle: 'solid',
            borderColor: 'gray.200',
            width: '100%',
            maxWidth: 480,
        }}>
      <Box sx={{
            display: 'flex',
            flexDirection: { xs: 'column', sm: 'row' },
            rowGap: 1,
            justifyContent: 'space-between',
            mb: 2,
        }}>
        <Box sx={{
            display: 'flex',
            flexDirection: 'row',
            alignItems: 'center',
            gap: 1.5,
        }}>
          <Box sx={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            color: 'primary.500',
            bgcolor: 'primary.100',
            borderRadius: 1,
            height: 36,
            width: 36,
        }}>
            <TbShoe size={20}/>
          </Box>
          <Box sx={{
            display: 'flex',
            flexDirection: 'column',
        }}>
            <Typography variant='h2'>Step challenge</Typography>
            <Typography sx={{
            color: 'gray.500',
            fontSize: 'sm',
            lineHeight: 1,
        }}>
              20k per day
            </Typography>
          </Box>
        </Box>
        <Box>
          <IconButton>
            <TbShare />
          </IconButton>
          <IconButton>
            <TbEditCircle />
          </IconButton>
          <IconButton color='primary'>
            <TbPin />
          </IconButton>
        </Box>
      </Box>
      <Box sx={{
            display: 'flex',
            flexDirection: 'row',
            justifyContent: 'space-between',
            mb: 0.5,
        }}>
        <Typography sx={{
            fontSize: 'sm',
            color: 'gray.500',
        }}>
          Progress
        </Typography>
        <Typography sx={{
            fontSize: 'sm',
            color: 'gray.500',
        }}>
          46%
        </Typography>
      </Box>
      <Box>
        <LinearProgress value={46} variant='determinate' sx={{
            height: 10,
            borderRadius: 1,
        }}/>
      </Box>
      <Box sx={{
            display: 'flex',
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'space-between',
            mt: 1,
        }}>
        <Typography sx={{
            fontSize: { xs: 'sm', sm: 'md' },
            fontWeight: 500,
            color: 'gray.700',
        }}>
          9,200{' '}
          <Box component='span' sx={{
            fontSize: 'xs',
            color: 'gray.500',
        }}>
            / 20,000
          </Box>
        </Typography>
        <Box component='span' sx={{
            display: 'flex',
            alignItems: 'center',
            height: 'max-content',
            px: 1,
            py: 0,
            fontSize: { xs: 10, sm: 'xs' },
            fontWeight: 600,
            color: 'yellow.700',
            bgcolor: 'yellow.100',
            borderRadius: 1,
            textTransform: 'uppercase',
        }}>
          11 hours left
        </Box>
      </Box>
    </Box>);
}


import * as React from 'react';
import { Box, IconButton, LinearProgress, Typography } from '@mui/material';
import { TbEditCircle, TbPin, TbShare, TbShoe } from 'react-icons/tb';

export default function StatProgress() {
  return (
    <Box
      sx={{
        display: 'flex',
        flexDirection: 'column',
        bgcolor: 'background.paper',
        borderRadius: 1,
        p: 3,
        borderWidth: 1,
        borderStyle: 'solid',
        borderColor: 'gray.200',
        width: '100%',
        maxWidth: 480,
      }}
    >
      <Box
        sx={{
          display: 'flex',
          flexDirection: { xs: 'column', sm: 'row' },
          rowGap: 1,
          justifyContent: 'space-between',
          mb: 2,
        }}
      >
        <Box
          sx={{
            display: 'flex',
            flexDirection: 'row',
            alignItems: 'center',
            gap: 1.5,
          }}
        >
          <Box
            sx={{
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              color: 'primary.500',
              bgcolor: 'primary.100',
              borderRadius: 1,
              height: 36,
              width: 36,
            }}
          >
            <TbShoe size={20} />
          </Box>
          <Box
            sx={{
              display: 'flex',
              flexDirection: 'column',
            }}
          >
            <Typography variant='h2'>Step challenge</Typography>
            <Typography
              sx={{
                color: 'gray.500',
                fontSize: 'sm',
                lineHeight: 1,
              }}
            >
              20k per day
            </Typography>
          </Box>
        </Box>
        <Box>
          <IconButton>
            <TbShare />
          </IconButton>
          <IconButton>
            <TbEditCircle />
          </IconButton>
          <IconButton color='primary'>
            <TbPin />
          </IconButton>
        </Box>
      </Box>
      <Box
        sx={{
          display: 'flex',
          flexDirection: 'row',
          justifyContent: 'space-between',
          mb: 0.5,
        }}
      >
        <Typography
          sx={{
            fontSize: 'sm',
            color: 'gray.500',
          }}
        >
          Progress
        </Typography>
        <Typography
          sx={{
            fontSize: 'sm',
            color: 'gray.500',
          }}
        >
          46%
        </Typography>
      </Box>
      <Box>
        <LinearProgress
          value={46}
          variant='determinate'
          sx={{
            height: 10,
            borderRadius: 1,
          }}
        />
      </Box>
      <Box
        sx={{
          display: 'flex',
          flexDirection: 'row',
          alignItems: 'center',
          justifyContent: 'space-between',
          mt: 1,
        }}
      >
        <Typography
          sx={{
            fontSize: { xs: 'sm', sm: 'md' },
            fontWeight: 500,
            color: 'gray.700',
          }}
        >
          9,200{' '}
          <Box
            component='span'
            sx={{
              fontSize: 'xs',
              color: 'gray.500',
            }}
          >
            / 20,000
          </Box>
        </Typography>
        <Box
          component='span'
          sx={{
            display: 'flex',
            alignItems: 'center',
            height: 'max-content',
            px: 1,
            py: 0,
            fontSize: { xs: 10, sm: 'xs' },
            fontWeight: 600,
            color: 'yellow.700',
            bgcolor: 'yellow.100',
            borderRadius: 1,
            textTransform: 'uppercase',
          }}
        >
          11 hours left
        </Box>
      </Box>
    </Box>
  );
}


import { Box, Paper, Tooltip, Typography, useMediaQuery, useTheme, } from '@mui/material';
import * as React from 'react';
import { TbInfoCircle } from 'react-icons/tb';
export default function StatCardSimple({ title = 'Total tickets revenue', description = 'Amount made per day from all ticket sales, all events included', titleIcon, helpTooltipText, value = 4510, valuePrefix = '$', valueSuffix = '/day', detail = 'Jan 1 - Jan 31, 2021', }) {
    const theme = useTheme();
    const matchesSmBreakpoint = useMediaQuery(theme.breakpoints.up('sm'));
    const valueShouldBeDeemphasized = value === undefined || value === null || value === 0;
    return (<Paper variant='outlined' sx={{
            padding: { xs: 1.5, md: 2, lg: 3 },
            display: 'flex',
            flexDirection: 'column',
            ...(!matchesSmBreakpoint && {
                borderRadius: 0,
                '&:first-child': {
                    borderTopLeftRadius: theme => theme.shape.borderRadius,
                    borderTopRightRadius: theme => theme.shape.borderRadius,
                    borderBottomWidth: 0,
                },
                '&:last-child': {
                    borderBottomLeftRadius: theme => theme.shape.borderRadius,
                    borderBottomRightRadius: theme => theme.shape.borderRadius,
                },
                '&&&:not(:first-child):not(:last-child)': {
                    borderRadius: 0,
                    borderBottomWidth: 0,
                },
            }),
        }}>
      <Box sx={{
            display: 'flex',
            alignItems: 'center',
            maxHeight: 24,
        }}>
        <Box sx={{
            display: 'flex',
            alignItems: 'center',
            gap: 0.5,
            color: 'gray.500',
            overflow: 'hidden',
        }}>
          {titleIcon && (<Box sx={{
                display: 'flex',
                alignItems: 'center',
                color: 'gray.400',
                bgcolor: 'gray.100',
                borderRadius: 1,
                p: 0.5,
            }}>
              {titleIcon}
            </Box>)}
          <Typography sx={{
            color: 'gray.700',
            fontSize: 'md',
            fontWeight: 600,
            textOverflow: 'ellipsis',
            whiteSpace: 'nowrap',
            overflow: 'hidden',
        }}>
            {title}
          </Typography>
          {helpTooltipText && (<Tooltip title={helpTooltipText}>
              <TbInfoCircle />
            </Tooltip>)}
        </Box>
      </Box>
      {description && (<Typography sx={{
                color: 'gray.500',
                fontSize: 'sm',
                fontWeight: 400,
            }}>
          {description}
        </Typography>)}
      <Box sx={{
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'baseline',
            flexWrap: 'wrap',
            my: { xs: 0, sm: 0.5 },
        }}>
        <>
          <Typography sx={{
            fontSize: { xs: 'lg', md: '32px' },
            fontWeight: 'bold',
            color: valueShouldBeDeemphasized ? 'gray.300' : 'gray.800',
            letterSpacing: '-1px',
            lineHeight: 1,
        }}>
            <Box component='span' sx={{
            fontSize: { xs: 'sm', md: 'md' },
            marginRight: 0.25,
        }}>
              {valuePrefix}
            </Box>
            {value}
            <Box component='span' sx={{
            fontWeight: 400,
            letterSpacing: '0',
            fontSize: { xs: 'sm', md: 'md' },
            color: 'gray.500',
            marginLeft: 0.25,
        }}>
              {valueSuffix}
            </Box>
          </Typography>
        </>
      </Box>
      {detail && (<Box sx={{
                paddingY: 1,
                fontSize: 'sm',
                fontWeight: 500,
            }}>
          {detail}
        </Box>)}
    </Paper>);
}


import {
  Box,
  Paper,
  Tooltip,
  Typography,
  useMediaQuery,
  useTheme,
} from '@mui/material';
import * as React from 'react';
import { TbInfoCircle } from 'react-icons/tb';

export default function StatCardSimple({
  title = 'Total tickets revenue',
  description = 'Amount made per day from all ticket sales, all events included',
  titleIcon,
  helpTooltipText,
  value = 4510,
  valuePrefix = '$',
  valueSuffix = '/day',
  detail = 'Jan 1 - Jan 31, 2021',
}: {
  title: string | React.ReactNode;
  description?: string;
  titleIcon?: React.ReactNode;
  helpTooltipText?: string;
  value?: number | string;
  valuePrefix?: string;
  valueSuffix?: string | React.ReactNode;
  detail?: React.ReactElement | string;
}) {
  const theme = useTheme();
  const matchesSmBreakpoint = useMediaQuery(theme.breakpoints.up('sm'));
  const valueShouldBeDeemphasized =
    value === undefined || value === null || value === 0;

  return (
    <Paper
      variant='outlined'
      sx={{
        padding: { xs: 1.5, md: 2, lg: 3 },
        display: 'flex',
        flexDirection: 'column',
        ...(!matchesSmBreakpoint && {
          borderRadius: 0,
          '&:first-child': {
            borderTopLeftRadius: theme => theme.shape.borderRadius,
            borderTopRightRadius: theme => theme.shape.borderRadius,
            borderBottomWidth: 0,
          },
          '&:last-child': {
            borderBottomLeftRadius: theme => theme.shape.borderRadius,
            borderBottomRightRadius: theme => theme.shape.borderRadius,
          },
          '&&&:not(:first-child):not(:last-child)': {
            borderRadius: 0,
            borderBottomWidth: 0,
          },
        }),
      }}
    >
      <Box
        sx={{
          display: 'flex',
          alignItems: 'center',
          maxHeight: 24,
        }}
      >
        <Box
          sx={{
            display: 'flex',
            alignItems: 'center',
            gap: 0.5,
            color: 'gray.500',
            overflow: 'hidden',
          }}
        >
          {titleIcon && (
            <Box
              sx={{
                display: 'flex',
                alignItems: 'center',
                color: 'gray.400',
                bgcolor: 'gray.100',
                borderRadius: 1,
                p: 0.5,
              }}
            >
              {titleIcon}
            </Box>
          )}
          <Typography
            sx={{
              color: 'gray.700',
              fontSize: 'md',
              fontWeight: 600,
              textOverflow: 'ellipsis',
              whiteSpace: 'nowrap',
              overflow: 'hidden',
            }}
          >
            {title}
          </Typography>
          {helpTooltipText && (
            <Tooltip title={helpTooltipText}>
              <TbInfoCircle />
            </Tooltip>
          )}
        </Box>
      </Box>
      {description && (
        <Typography
          sx={{
            color: 'gray.500',
            fontSize: 'sm',
            fontWeight: 400,
          }}
        >
          {description}
        </Typography>
      )}
      <Box
        sx={{
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'baseline',
          flexWrap: 'wrap',
          my: { xs: 0, sm: 0.5 },
        }}
      >
        <>
          <Typography
            sx={{
              fontSize: { xs: 'lg', md: '32px' },
              fontWeight: 'bold',
              color: valueShouldBeDeemphasized ? 'gray.300' : 'gray.800',
              letterSpacing: '-1px',
              lineHeight: 1,
            }}
          >
            <Box
              component='span'
              sx={{
                fontSize: { xs: 'sm', md: 'md' },
                marginRight: 0.25,
              }}
            >
              {valuePrefix}
            </Box>
            {value}
            <Box
              component='span'
              sx={{
                fontWeight: 400,
                letterSpacing: '0',
                fontSize: { xs: 'sm', md: 'md' },
                color: 'gray.500',
                marginLeft: 0.25,
              }}
            >
              {valueSuffix}
            </Box>
          </Typography>
        </>
      </Box>
      {detail && (
        <Box
          sx={{
            paddingY: 1,
            fontSize: 'sm',
            fontWeight: 500,
          }}
        >
          {detail}
        </Box>
      )}
    </Paper>
  );
}


import { Box, Paper, Tooltip, Typography, useMediaQuery, useTheme, } from '@mui/material';
import * as React from 'react';
import { TbCalendar, TbInfoCircle } from 'react-icons/tb';
export default function StatCardIcon({ title = 'Today', description = 'Over the last week, your average steps were 10,198 per day.', titleIcon = <TbCalendar />, helpTooltipText, value = '12,480', valuePrefix, valueSuffix = 'total', detail, }) {
    const theme = useTheme();
    const matchesSmBreakpoint = useMediaQuery(theme.breakpoints.up('sm'));
    const valueShouldBeDeemphasized = value === undefined || value === null || value === 0;
    return (<Paper variant='outlined' sx={{
            padding: { xs: 1.5, md: 2, lg: 3 },
            display: 'flex',
            flexDirection: 'column',
            ...(!matchesSmBreakpoint && {
                borderRadius: 0,
                '&:first-child': {
                    borderTopLeftRadius: theme => theme.shape.borderRadius,
                    borderTopRightRadius: theme => theme.shape.borderRadius,
                    borderBottomWidth: 0,
                },
                '&:last-child': {
                    borderBottomLeftRadius: theme => theme.shape.borderRadius,
                    borderBottomRightRadius: theme => theme.shape.borderRadius,
                },
                '&&&:not(:first-child):not(:last-child)': {
                    borderRadius: 0,
                    borderBottomWidth: 0,
                },
            }),
        }}>
      <Box sx={{
            display: 'flex',
            alignItems: 'center',
            maxHeight: 24,
        }}>
        <Box sx={{
            display: 'flex',
            alignItems: 'center',
            gap: 0.5,
            color: 'gray.500',
            overflow: 'hidden',
        }}>
          {titleIcon && (<Box sx={{
                display: 'flex',
                alignItems: 'center',
                color: 'gray.400',
                bgcolor: 'gray.100',
                borderRadius: 1,
                p: 0.25,
            }}>
              {titleIcon}
            </Box>)}
          <Typography sx={{
            color: 'gray.700',
            fontSize: 'md',
            fontWeight: 600,
            textOverflow: 'ellipsis',
            whiteSpace: 'nowrap',
            overflow: 'hidden',
        }}>
            {title}
          </Typography>
          {helpTooltipText && (<Tooltip title={helpTooltipText}>
              <TbInfoCircle />
            </Tooltip>)}
        </Box>
      </Box>
      {description && (<Typography sx={{
                color: 'gray.500',
                fontSize: 'sm',
                fontWeight: 400,
            }}>
          {description}
        </Typography>)}
      <Box sx={{
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'baseline',
            flexWrap: 'wrap',
            my: { xs: 0, sm: 0.5 },
        }}>
        <>
          <Typography sx={{
            fontSize: { xs: 'lg', md: '32px' },
            fontWeight: 'bold',
            color: valueShouldBeDeemphasized ? 'gray.300' : 'gray.800',
            letterSpacing: '-1px',
            lineHeight: 1,
        }}>
            <Box component='span' sx={{
            fontSize: { xs: 'sm', md: 'md' },
            marginRight: 0.25,
        }}>
              {valuePrefix}
            </Box>
            {value}
            <Box component='span' sx={{
            fontWeight: 400,
            letterSpacing: '0',
            fontSize: { xs: 'sm', md: 'md' },
            color: 'gray.500',
            marginLeft: 0.25,
        }}>
              {valueSuffix}
            </Box>
          </Typography>
        </>
      </Box>
      {detail && (<Box sx={{
                paddingY: 1,
                fontSize: 'sm',
                fontWeight: 500,
            }}>
          {detail}
        </Box>)}
    </Paper>);
}


import {
  Box,
  Paper,
  Tooltip,
  Typography,
  useMediaQuery,
  useTheme,
} from '@mui/material';
import * as React from 'react';
import { TbCalendar, TbInfoCircle } from 'react-icons/tb';

export default function StatCardIcon({
  title = 'Today',
  description = 'Over the last week, your average steps were 10,198 per day.',
  titleIcon = <TbCalendar />,
  helpTooltipText,
  value = '12,480',
  valuePrefix,
  valueSuffix = 'total',
  detail,
}: {
  title: string | React.ReactNode;
  description?: string;
  titleIcon?: React.ReactNode;
  helpTooltipText?: string;
  value?: number | string;
  valuePrefix?: string;
  valueSuffix?: string | React.ReactNode;
  detail?: React.ReactElement | string;
}) {
  const theme = useTheme();
  const matchesSmBreakpoint = useMediaQuery(theme.breakpoints.up('sm'));
  const valueShouldBeDeemphasized =
    value === undefined || value === null || value === 0;

  return (
    <Paper
      variant='outlined'
      sx={{
        padding: { xs: 1.5, md: 2, lg: 3 },
        display: 'flex',
        flexDirection: 'column',
        ...(!matchesSmBreakpoint && {
          borderRadius: 0,
          '&:first-child': {
            borderTopLeftRadius: theme => theme.shape.borderRadius,
            borderTopRightRadius: theme => theme.shape.borderRadius,
            borderBottomWidth: 0,
          },
          '&:last-child': {
            borderBottomLeftRadius: theme => theme.shape.borderRadius,
            borderBottomRightRadius: theme => theme.shape.borderRadius,
          },
          '&&&:not(:first-child):not(:last-child)': {
            borderRadius: 0,
            borderBottomWidth: 0,
          },
        }),
      }}
    >
      <Box
        sx={{
          display: 'flex',
          alignItems: 'center',
          maxHeight: 24,
        }}
      >
        <Box
          sx={{
            display: 'flex',
            alignItems: 'center',
            gap: 0.5,
            color: 'gray.500',
            overflow: 'hidden',
          }}
        >
          {titleIcon && (
            <Box
              sx={{
                display: 'flex',
                alignItems: 'center',
                color: 'gray.400',
                bgcolor: 'gray.100',
                borderRadius: 1,
                p: 0.25,
              }}
            >
              {titleIcon}
            </Box>
          )}
          <Typography
            sx={{
              color: 'gray.700',
              fontSize: 'md',
              fontWeight: 600,
              textOverflow: 'ellipsis',
              whiteSpace: 'nowrap',
              overflow: 'hidden',
            }}
          >
            {title}
          </Typography>
          {helpTooltipText && (
            <Tooltip title={helpTooltipText}>
              <TbInfoCircle />
            </Tooltip>
          )}
        </Box>
      </Box>
      {description && (
        <Typography
          sx={{
            color: 'gray.500',
            fontSize: 'sm',
            fontWeight: 400,
          }}
        >
          {description}
        </Typography>
      )}
      <Box
        sx={{
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'baseline',
          flexWrap: 'wrap',
          my: { xs: 0, sm: 0.5 },
        }}
      >
        <>
          <Typography
            sx={{
              fontSize: { xs: 'lg', md: '32px' },
              fontWeight: 'bold',
              color: valueShouldBeDeemphasized ? 'gray.300' : 'gray.800',
              letterSpacing: '-1px',
              lineHeight: 1,
            }}
          >
            <Box
              component='span'
              sx={{
                fontSize: { xs: 'sm', md: 'md' },
                marginRight: 0.25,
              }}
            >
              {valuePrefix}
            </Box>
            {value}
            <Box
              component='span'
              sx={{
                fontWeight: 400,
                letterSpacing: '0',
                fontSize: { xs: 'sm', md: 'md' },
                color: 'gray.500',
                marginLeft: 0.25,
              }}
            >
              {valueSuffix}
            </Box>
          </Typography>
        </>
      </Box>
      {detail && (
        <Box
          sx={{
            paddingY: 1,
            fontSize: 'sm',
            fontWeight: 500,
          }}
        >
          {detail}
        </Box>
      )}
    </Paper>
  );
}


Stats

Stat card with progress

Simple Stat Card

Icon Stat Card