Cards
import {
Box,
Center,
useColorModeValue,
Heading,
Text,
Stack,
Image,
} from '@chakra-ui/react';
const IMAGE =
'https://images.unsplash.com/photo-1518051870910-a46e30d9db16?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1350&q=80';
export default function ProductSimple() {
return (
<Center py={12}>
<Box
role={'group'}
p={6}
maxW={'330px'}
w={'full'}
bg={useColorModeValue('white', 'gray.800')}
boxShadow={'2xl'}
rounded={'lg'}
pos={'relative'}
zIndex={1}>
<Box
rounded={'lg'}
mt={-12}
pos={'relative'}
height={'230px'}
_after={{
transition: 'all .3s ease',
content: '""',
w: 'full',
h: 'full',
pos: 'absolute',
top: 5,
left: 0,
backgroundImage: `url(${IMAGE})`,
filter: 'blur(15px)',
zIndex: -1,
}}
_groupHover={{
_after: {
filter: 'blur(20px)',
},
}}>
<Image
rounded={'lg'}
height={230}
width={282}
objectFit={'cover'}
src={IMAGE}
/>
</Box>
<Stack pt={10} align={'center'}>
<Text color={'gray.500'} fontSize={'sm'} textTransform={'uppercase'}>
Brand
</Text>
<Heading fontSize={'2xl'} fontFamily={'body'} fontWeight={500}>
Nice Chair, pink
</Heading>
<Stack direction={'row'} align={'center'}>
<Text fontWeight={800} fontSize={'xl'}>
$57
</Text>
<Text textDecoration={'line-through'} color={'gray.600'}>
$199
</Text>
</Stack>
</Stack>
</Box>
</Center>
);
}
import {
Flex,
Circle,
Box,
Image,
Badge,
useColorModeValue,
Icon,
chakra,
Tooltip,
} from '@chakra-ui/react';
import { BsStar, BsStarFill, BsStarHalf } from 'react-icons/bs';
import { FiShoppingCart } from 'react-icons/fi';
const data = {
isNew: true,
imageURL:
'https://images.unsplash.com/photo-1572635196237-14b3f281503f?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=4600&q=80',
name: 'Wayfarer Classic',
price: 4.5,
rating: 4.2,
numReviews: 34,
};
interface RatingProps {
rating: number;
numReviews: number;
}
function Rating({ rating, numReviews }: RatingProps) {
return (
<Box d="flex" alignItems="center">
{Array(5)
.fill('')
.map((_, i) => {
const roundedRating = Math.round(rating * 2) / 2;
if (roundedRating - i >= 1) {
return (
<BsStarFill
key={i}
style={{ marginLeft: '1' }}
color={i < rating ? 'teal.500' : 'gray.300'}
/>
);
}
if (roundedRating - i === 0.5) {
return <BsStarHalf key={i} style={{ marginLeft: '1' }} />;
}
return <BsStar key={i} style={{ marginLeft: '1' }} />;
})}
<Box as="span" ml="2" color="gray.600" fontSize="sm">
{numReviews} review{numReviews > 1 && 's'}
</Box>
</Box>
);
}
function ProductAddToCart() {
return (
<Flex p={50} w="full" alignItems="center" justifyContent="center">
<Box
bg={useColorModeValue('white', 'gray.800')}
maxW="sm"
borderWidth="1px"
rounded="lg"
shadow="lg"
position="relative">
{data.isNew && (
<Circle
size="10px"
position="absolute"
top={2}
right={2}
bg="red.200"
/>
)}
<Image
src={data.imageURL}
alt={`Picture of ${data.name}`}
roundedTop="lg"
/>
<Box p="6">
<Box d="flex" alignItems="baseline">
{data.isNew && (
<Badge rounded="full" px="2" fontSize="0.8em" colorScheme="red">
New
</Badge>
)}
</Box>
<Flex mt="1" justifyContent="space-between" alignContent="center">
<Box
fontSize="2xl"
fontWeight="semibold"
as="h4"
lineHeight="tight"
isTruncated>
{data.name}
</Box>
<Tooltip
label="Add to cart"
bg="white"
placement={'top'}
color={'gray.800'}
fontSize={'1.2em'}>
<chakra.a href={'#'} display={'flex'}>
<Icon as={FiShoppingCart} h={7} w={7} alignSelf={'center'} />
</chakra.a>
</Tooltip>
</Flex>
<Flex justifyContent="space-between" alignContent="center">
<Rating rating={data.rating} numReviews={data.numReviews} />
<Box fontSize="2xl" color={useColorModeValue('gray.800', 'white')}>
<Box as="span" color={'gray.600'} fontSize="lg">
£
</Box>
{data.price.toFixed(2)}
</Box>
</Flex>
</Box>
</Box>
</Flex>
);
}
export default ProductAddToCart;
import {
Box,
Center,
Text,
Stack,
List,
ListItem,
ListIcon,
Button,
useColorModeValue,
} from '@chakra-ui/react';
import { CheckIcon } from '@chakra-ui/icons';
export default function Pricing() {
return (
<Center py={6}>
<Box
maxW={'330px'}
w={'full'}
bg={useColorModeValue('white', 'gray.800')}
boxShadow={'2xl'}
rounded={'md'}
overflow={'hidden'}>
<Stack
textAlign={'center'}
p={6}
color={useColorModeValue('gray.800', 'white')}
align={'center'}>
<Text
fontSize={'sm'}
fontWeight={500}
bg={useColorModeValue('green.50', 'green.900')}
p={2}
px={3}
color={'green.500'}
rounded={'full'}>
Hobby
</Text>
<Stack direction={'row'} align={'center'} justify={'center'}>
<Text fontSize={'3xl'}>$</Text>
<Text fontSize={'6xl'} fontWeight={800}>
79
</Text>
<Text color={'gray.500'}>/month</Text>
</Stack>
</Stack>
<Box bg={useColorModeValue('gray.50', 'gray.900')} px={6} py={10}>
<List spacing={3}>
<ListItem>
<ListIcon as={CheckIcon} color="green.400" />
5.000 page views
</ListItem>
<ListItem>
<ListIcon as={CheckIcon} color="green.400" />
50 automation executions
</ListItem>
<ListItem>
<ListIcon as={CheckIcon} color="green.400" />
50 identified users
</ListItem>
<ListItem>
<ListIcon as={CheckIcon} color="green.400" />
All features
</ListItem>
</List>
<Button
mt={10}
w={'full'}
bg={'green.400'}
color={'white'}
rounded={'xl'}
boxShadow={'0 5px 20px 0px rgb(72 187 120 / 43%)'}
_hover={{
bg: 'green.500',
}}
_focus={{
bg: 'green.500',
}}>
Start your trial
</Button>
</Box>
</Box>
</Center>
);
}
import Image from 'next/image';
import {
Box,
Center,
Heading,
Text,
Stack,
Avatar,
useColorModeValue,
} from '@chakra-ui/react';
export default function blogPostWithImage() {
return (
<Center py={6}>
<Box
maxW={'445px'}
w={'full'}
bg={useColorModeValue('white', 'gray.900')}
boxShadow={'2xl'}
rounded={'md'}
p={6}
overflow={'hidden'}>
<Box
h={'210px'}
bg={'gray.100'}
mt={-6}
mx={-6}
mb={6}
pos={'relative'}>
<Image
src={
'https://images.unsplash.com/photo-1515378791036-0648a3ef77b2?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80'
}
layout={'fill'}
/>
</Box>
<Stack>
<Text
color={'green.500'}
textTransform={'uppercase'}
fontWeight={800}
fontSize={'sm'}
letterSpacing={1.1}>
Blog
</Text>
<Heading
color={useColorModeValue('gray.700', 'white')}
fontSize={'2xl'}
fontFamily={'body'}>
Boost your conversion rate
</Heading>
<Text color={'gray.500'}>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
et ea rebum.
</Text>
</Stack>
<Stack mt={6} direction={'row'} spacing={4} align={'center'}>
<Avatar
src={'https://avatars0.githubusercontent.com/u/1164541?v=4'}
alt={'Author'}
/>
<Stack direction={'column'} spacing={0} fontSize={'sm'}>
<Text fontWeight={600}>Achim Rolle</Text>
<Text color={'gray.500'}>Feb 08, 2021 · 6min read</Text>
</Stack>
</Stack>
</Box>
</Center>
);
}
import React from 'react';
import { Stack, Text, Button } from '@chakra-ui/react';
import { FcLock } from 'react-icons/fc';
export default function SimpleCookiePreference() {
return (
<Stack p="4" boxShadow="lg" m="4" borderRadius="sm">
<Stack direction="row" alignItems="center">
<Text fontWeight="semibold">Your Privacy</Text>
<FcLock />
</Stack>
<Stack
direction={{ base: 'column', md: 'row' }}
justifyContent="space-between">
<Text fontSize={{ base: 'sm' }} textAlign={'left'} maxW={'4xl'}>
We use cookies and similar technologies to help personalise content,
tailor and measure ads, and provide a better experience. By clicking
OK or turning an option on in Cookie Preferences, you agree to this,
as outlined in our Cookie Policy. To change preferences or withdraw
consent, please update your Cookie Preferences.
</Text>
<Stack direction={{ base: 'column', md: 'row' }}>
<Button variant="outline" colorScheme="green">
Cookie Preferences
</Button>
<Button colorScheme="green">OK</Button>
</Stack>
</Stack>
</Stack>
);
}
import { useState } from 'react';
import {
Box,
Heading,
Text,
Img,
Flex,
Center,
useColorModeValue,
HStack,
} from '@chakra-ui/react';
import { BsArrowUpRight, BsHeartFill, BsHeart } from 'react-icons/bs';
export default function PostWithLike() {
const [liked, setLiked] = useState(false);
return (
<Center py={6}>
<Box
w="xs"
rounded={'sm'}
my={5}
mx={[0, 5]}
overflow={'hidden'}
bg="white"
border={'1px'}
borderColor="black"
boxShadow={useColorModeValue('6px 6px 0 black', '6px 6px 0 cyan')}>
<Box h={'200px'} borderBottom={'1px'} borderColor="black">
<Img
src={
'https://images.unsplash.com/photo-1542435503-956c469947f6?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80'
}
roundedTop={'sm'}
objectFit="cover"
h="full"
w="full"
alt={'Blog Image'}
/>
</Box>
<Box p={4}>
<Box
bg="black"
display={'inline-block'}
px={2}
py={1}
color="white"
mb={2}>
<Text fontSize={'xs'} fontWeight="medium">
React
</Text>
</Box>
<Heading color={'black'} fontSize={'2xl'} noOfLines={1}>
React v18.0
</Heading>
<Text color={'gray.500'} noOfLines={2}>
In this post, we will give an overview of what is new in React 18,
and what it means for the future.
</Text>
</Box>
<HStack borderTop={'1px'} color="black">
<Flex
p={4}
alignItems="center"
justifyContent={'space-between'}
roundedBottom={'sm'}
cursor={'pointer'}
w="full">
<Text fontSize={'md'} fontWeight={'semibold'}>
View more
</Text>
<BsArrowUpRight />
</Flex>
<Flex
p={4}
alignItems="center"
justifyContent={'space-between'}
roundedBottom={'sm'}
borderLeft={'1px'}
cursor="pointer"
onClick={() => setLiked(!liked)}>
{liked ? (
<BsHeartFill fill="red" fontSize={'24px'} />
) : (
<BsHeart fontSize={'24px'} />
)}
</Flex>
</HStack>
</Box>
</Center>
);
}
Support us
Made on the Internet by Achim Rolle and Contributors
Social User Profile with Image
import { Heading, Avatar, Box, Center, Image, Flex, Text, Stack, Button, useColorModeValue, } from '@chakra-ui/react'; export default function SocialProfileWithImage() { return ( <Center py={6}> <Box maxW={'270px'} w={'full'} bg={useColorModeValue('white', 'gray.800')} boxShadow={'2xl'} rounded={'md'} overflow={'hidden'}> <Image h={'120px'} w={'full'} src={ 'https://images.unsplash.com/photo-1612865547334-09cb8cb455da?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80' } objectFit={'cover'} /> <Flex justify={'center'} mt={-12}> <Avatar size={'xl'} src={ 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ' } alt={'Author'} css={{ border: '2px solid white', }} /> </Flex> <Box p={6}> <Stack spacing={0} align={'center'} mb={5}> <Heading fontSize={'2xl'} fontWeight={500} fontFamily={'body'}> John Doe </Heading> <Text color={'gray.500'}>Frontend Developer</Text> </Stack> <Stack direction={'row'} justify={'center'} spacing={6}> <Stack spacing={0} align={'center'}> <Text fontWeight={600}>23k</Text> <Text fontSize={'sm'} color={'gray.500'}> Followers </Text> </Stack> <Stack spacing={0} align={'center'}> <Text fontWeight={600}>23k</Text> <Text fontSize={'sm'} color={'gray.500'}> Followers </Text> </Stack> </Stack> <Button w={'full'} mt={8} bg={useColorModeValue('#151f21', 'gray.900')} color={'white'} rounded={'md'} _hover={{ transform: 'translateY(-2px)', boxShadow: 'lg', }}> Follow </Button> </Box> </Box> </Center> ); }