Pricing
Used to display the prices of your software, product, or service.
Pricing with corner badge
import { Box, Button, ButtonProps, SimpleGrid, useColorModeValue as mode } from '@chakra-ui/react'
import * as React from 'react'
import { SiHive, SiMarketo, SiMicrosoft } from 'react-icons/si'
import { PricingCard } from './PricingCard'
const ActionButton = (props: ButtonProps) => (
<Button colorScheme="blue" size="lg" w="full" fontWeight="extrabold" py="8" {...props} />
)
export const App: React.FC = () => {
return (
<Box as="section" bg={mode('gray.50', 'gray.800')} py="14">
<SimpleGrid
columns={{ base: 1, lg: 3 }}
spacing={{ base: '4', lg: '0' }}
maxW="7xl"
mx="auto"
justifyItems="center"
alignItems="center"
>
<PricingCard
data={{
price: '$29',
name: 'Application UI',
features: [
'All application UI components',
'Lifetime access',
'Use on unlimited projects',
'Free Updates',
],
}}
icon={SiMicrosoft}
button={
<ActionButton variant="outline" borderWidth="2px">
Buy now
</ActionButton>
}
/>
<PricingCard
zIndex={1}
isPopular
transform={{ lg: 'scale(1.05)' }}
data={{
price: '$49',
name: 'Bundle',
features: [
'All application UI components',
'Lifetime access',
'Use on unlimited projects',
'Use on unlimited projects',
'Free Updates',
],
}}
icon={SiHive}
button={<ActionButton>Buy now</ActionButton>}
/>
<PricingCard
data={{
price: '$29',
name: 'Marketing UI',
features: [
'All application UI components',
'Lifetime access',
'Use on unlimited projects',
'Free Updates',
],
}}
icon={SiMarketo}
button={
<ActionButton variant="outline" borderWidth="2px">
Buy now
</ActionButton>
}
/>
</SimpleGrid>
</Box>
)
}
import { Box, BoxProps, Flex, Text, useColorModeValue as mode } from '@chakra-ui/react'
import * as React from 'react'
export interface CardProps extends BoxProps {
isPopular?: boolean
}
export const Card: React.FC<CardProps> = (props) => {
const { children, isPopular, ...rest } = props
return (
<Box
position="relative"
px="6"
pb="6"
pt="16"
overflow="hidden"
bg={mode('white', 'gray.700')}
shadow="lg"
maxW="md"
width="100%"
{...rest}
>
{isPopular && (
<Flex
bg={mode('blue.500', 'blue.200')}
position="absolute"
right={-20}
top={6}
width="240px"
transform="rotate(45deg)"
py={2}
justifyContent="center"
alignItems="center"
>
<Text
fontSize="xs"
textTransform="uppercase"
fontWeight="bold"
letterSpacing="wider"
color={mode('white', 'gray.800')}
>
Popular
</Text>
</Flex>
)}
{children}
</Box>
)
}
import {
Flex,
Heading,
Icon,
List,
ListIcon,
ListItem,
Text,
useColorModeValue as mode,
VStack,
} from '@chakra-ui/react'
import * as React from 'react'
import { HiCheckCircle } from 'react-icons/hi'
import { Card, CardProps } from './Card'
export interface PricingCardData {
features: string[]
name: string
price: string
}
interface PricingCardProps extends CardProps {
data: PricingCardData
icon: React.ElementType
button: React.ReactElement
}
export const PricingCard = (props: PricingCardProps) => {
const { data, icon, button, ...rest } = props
const { features, price, name } = data
const accentColor = mode('blue.600', 'blue.200')
return (
<Card rounded={{ sm: 'xl' }} {...rest}>
<VStack spacing={6}>
<Icon aria-hidden as={icon} fontSize="4xl" color={accentColor} />
<Heading size="md" fontWeight="extrabold">
{name}
</Heading>
</VStack>
<Flex align="flex-end" justify="center" fontWeight="extrabold" color={accentColor} my="8">
<Heading size="3xl" fontWeight="inherit" lineHeight="0.9em">
{price}
</Heading>
<Text fontWeight="inherit" fontSize="2xl">
/ yr
</Text>
</Flex>
<List spacing="4" mb="8" maxW="28ch" mx="auto">
{features.map((feature, index) => (
<ListItem fontWeight="medium" key={index}>
<ListIcon fontSize="xl" as={HiCheckCircle} marginEnd={2} color={accentColor} />
{feature}
</ListItem>
))}
</List>
{button}
</Card>
)
}
# 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.