Stats
Displays usage related data, statistics or limits.
Stat with three columns
import { Box, SimpleGrid, useColorModeValue as mode } from '@chakra-ui/react'
import * as React from 'react'
import { StatCard } from './StatCard'
const data = [
{ label: 'Total Subscribers', value: '71,887' },
{ label: 'Avg. Open Rate', value: '56.87%' },
{ label: 'Avg. Click Rate', value: '12.87%' },
]
export const App = () => {
return (
<Box as="section" bg={mode('gray.50', 'gray.800')} p="10">
<Box maxW="7xl" mx="auto" px={{ base: '6', md: '8' }}>
<SimpleGrid columns={{ base: 1, md: 3 }} spacing="6">
{data.map((stat, idx) => (
<StatCard key={idx} data={stat} />
))}
</SimpleGrid>
</Box>
</Box>
)
}
import { Stat, StatLabel, StatNumber, useColorModeValue as mode } from '@chakra-ui/react'
import * as React from 'react'
interface StatCardProps {
data: { label: string; value: string | number }
}
export const StatCard = (props: StatCardProps) => {
const { label, value } = props.data
return (
<Stat px={{ base: 4, sm: 6 }} py="5" bg={mode('white', 'gray.700')} shadow="base" rounded="lg">
<StatLabel fontWeight="medium" isTruncated color={mode('gray.500', 'gray.400')}>
{label}
</StatLabel>
<StatNumber fontSize="3xl" fontWeight="medium" color={mode('gray.900', 'white')}>
{value}
</StatNumber>
</Stat>
)
}
# Getting Started
All of the components in Chakra UI are designed for Chakra UI v1.0+<br>
#In some components we use `react-icons` to pep up the visual appearance. Feel free to replace them with your own icons.
## Installation
Inside your React project directory, install Chakra UI by running either of the following:
```sh
# npm
$ npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion react-icons
```
or when using yarn:
```sh
# yarn
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion react-icons
```
## Setup Chakra UI
For Chakra UI to work correctly, you need to setup the ChakraProvider at the root of your application.
```tsx
import * as React from 'react'
import { ChakraProvider } from '@chakra-ui/react'
export const App = () => {
return (
<ChakraProvider>
<App />
</ChakraProvider>
)
}
```
## Chakra UI Docs
If you need more help, feel free to visit the [official webiste](https://chakra-ui.com) of Chakra UI. Here you can find help with installation, theming and much more.