Framework

All Frameworks
bootstrap tailwind chakra

Theme

All Themes
Horizon UI Dashboard AdminKit Chakra UI Dashboard Motion Landing Library Asteria Dashboard Soft UI Dashboard Motion Landing Library React Riva Dashboard Tailwind Soft UI Design System Soft UI Dashboard Tailwind Argon Dashboard
All 32
Components 12
Typography 3
Cards 8
Sidebars 1
Tables 2
Navbars 1
Cards Section 2
Tables Section 1
Projects Section 1

Chakra Cards Section - Chakra UI Dashboard

Discover 2 Chakra Cards Section available in Chakra UI Dashboard

Stats Cards

Component from Chakra UI Dashboard Builder 
<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>

Stats Card Dark

Component from Chakra UI Dashboard Builder 
<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>