Framework

All Frameworks
bootstrap tailwind chakra

Theme

All Themes
AdminKit Horizon UI Dashboard Chakra UI Dashboard Motion Landing Library Asteria Dashboard Soft UI Dashboard Riva Dashboard Tailwind Motion Landing Library React 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>