Pricing

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.