import { Button } from '@chakra-ui/react'

export const ActionButton = (props) => (
  <Button
    colorScheme="brand"
    size="lg"
    w="full"
    fontWeight="extrabold"
    py={{
      md: '8',
    }}
    {...props}
  />
)


ActionButton.jsx

import { Button, ButtonProps } from '@chakra-ui/react'

export const ActionButton = (props: ButtonProps) => (
  <Button
    colorScheme="brand"
    size="lg"
    w="full"
    fontWeight="extrabold"
    py={{ md: '8' }}
    {...props}
  />
)


ActionButton.tsx

import { Box, SimpleGrid, useColorModeValue } from '@chakra-ui/react'
import { SiHive, SiMarketo, SiMicrosoft } from 'react-icons/si'
import { ActionButton } from './ActionButton'
import { PricingCard } from './PricingCard'

export const App = () => (
  <Box
    as="section"
    bg={useColorModeValue('gray.50', 'gray.800')}
    py="14"
    px={{
      base: '4',
      md: '8',
    }}
  >
    <SimpleGrid
      columns={{
        base: 1,
        lg: 3,
      }}
      spacing={{
        base: '8',
        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>
)


App.jsx

import { Box, SimpleGrid, useColorModeValue } from '@chakra-ui/react'
import { SiHive, SiMarketo, SiMicrosoft } from 'react-icons/si'
import { ActionButton } from './ActionButton'
import { PricingCard } from './PricingCard'

export const App = () => (
  <Box
    as="section"
    bg={useColorModeValue('gray.50', 'gray.800')}
    py="14"
    px={{ base: '4', md: '8' }}
  >
    <SimpleGrid
      columns={{ base: 1, lg: 3 }}
      spacing={{ base: '8', 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>
)


App.tsx

import { Box, useColorModeValue } from '@chakra-ui/react'
import { CardBadge } from './CardBadge'

export const Card = (props) => {
  const { children, isPopular, ...rest } = props
  return (
    <Box
      bg={useColorModeValue('white', 'gray.700')}
      position="relative"
      px="6"
      pb="6"
      pt="16"
      overflow="hidden"
      shadow="lg"
      maxW="md"
      width="100%"
      {...rest}
    >
      {isPopular && <CardBadge>Popular</CardBadge>}
      {children}
    </Box>
  )
}


Card.jsx

import { Box, BoxProps, useColorModeValue } from '@chakra-ui/react'
import { CardBadge } from './CardBadge'

export interface CardProps extends BoxProps {
  isPopular?: boolean
}

export const Card = (props: CardProps) => {
  const { children, isPopular, ...rest } = props
  return (
    <Box
      bg={useColorModeValue('white', 'gray.700')}
      position="relative"
      px="6"
      pb="6"
      pt="16"
      overflow="hidden"
      shadow="lg"
      maxW="md"
      width="100%"
      {...rest}
    >
      {isPopular && <CardBadge>Popular</CardBadge>}
      {children}
    </Box>
  )
}


Card.tsx

import { Flex, Text, useColorModeValue } from '@chakra-ui/react'

export const CardBadge = (props) => {
  const { children, ...flexProps } = props
  return (
    <Flex
      bg={useColorModeValue('brand.500', 'brand.200')}
      position="absolute"
      right={-20}
      top={6}
      width="240px"
      transform="rotate(45deg)"
      py={2}
      justifyContent="center"
      alignItems="center"
      {...flexProps}
    >
      <Text
        fontSize="xs"
        textTransform="uppercase"
        fontWeight="bold"
        letterSpacing="wider"
        color={useColorModeValue('white', 'gray.800')}
      >
        {children}
      </Text>
    </Flex>
  )
}


CardBadge.jsx

import { Flex, FlexProps, Text, useColorModeValue } from '@chakra-ui/react'

export const CardBadge = (props: FlexProps) => {
  const { children, ...flexProps } = props
  return (
    <Flex
      bg={useColorModeValue('brand.500', 'brand.200')}
      position="absolute"
      right={-20}
      top={6}
      width="240px"
      transform="rotate(45deg)"
      py={2}
      justifyContent="center"
      alignItems="center"
      {...flexProps}
    >
      <Text
        fontSize="xs"
        textTransform="uppercase"
        fontWeight="bold"
        letterSpacing="wider"
        color={useColorModeValue('white', 'gray.800')}
      >
        {children}
      </Text>
    </Flex>
  )
}


CardBadge.tsx

import {
  Flex,
  Heading,
  Icon,
  List,
  ListIcon,
  ListItem,
  Text,
  useColorModeValue,
  VStack,
} from '@chakra-ui/react'
import { HiCheckCircle } from 'react-icons/hi'
import { Card } from './Card'

export const PricingCard = (props) => {
  const { data, icon, button, ...rest } = props
  const { features, price, name } = data
  const accentColor = useColorModeValue('brand.600', 'brand.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>
  )
}


PricingCard.jsx

import {
  Flex,
  Heading,
  Icon,
  List,
  ListIcon,
  ListItem,
  Text,
  useColorModeValue,
  VStack,
} from '@chakra-ui/react'
import { ElementType, ReactElement } 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: ElementType
  button: ReactElement
}

export const PricingCard = (props: PricingCardProps) => {
  const { data, icon, button, ...rest } = props
  const { features, price, name } = data
  const accentColor = useColorModeValue('brand.600', 'brand.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>
  )
}
