Box

Box is the most abstract component on top of which all other Purity UI Dashboard components are built. By default, it renders a div element.

The Box component is useful because it helps with 3 common use cases:

  • Create responsive layouts with ease.
  • Provide a shorthand way to pass styles via props (bg instead of backgroundColor).
  • Compose new component and allow for override using the as prop.

Import#

import { Box } from "@chakra-ui/react"

Usage#

<Box bg="tomato" w="100%" p={4} color="white">
This is the Box
</Box>
<Box bg="tomato" w="100%" p={4} color="white">
This is the Box
</Box>

Usage#

function Example() {
const property = {
imageUrl: "https://bit.ly/2Z4KKcF",
imageAlt: "Rear view of modern home with pool",
beds: 3,
baths: 2,
title: "Modern home in city center in the heart of historic Los Angeles",
formattedPrice: "$1,900.00",
reviewCount: 34,
rating: 4,
}
return (
<Box maxW="sm" borderWidth="1px" borderRadius="lg" overflow="hidden">
<Image src={property.imageUrl} alt={property.imageAlt} />
<Box p="6">
<Box d="flex" alignItems="baseline">
<Badge borderRadius="full" px="2" colorScheme="teal">
New
</Badge>
<Box
color="gray.500"
fontWeight="semibold"
letterSpacing="wide"
fontSize="xs"
textTransform="uppercase"
ml="2"
>
{property.beds} beds &bull; {property.baths} baths
</Box>
</Box>
<Box
mt="1"
fontWeight="semibold"
as="h4"
lineHeight="tight"
isTruncated
>
{property.title}
</Box>
<Box>
{property.formattedPrice}
<Box as="span" color="gray.600" fontSize="sm">
/ wk
</Box>
</Box>
<Box d="flex" mt="2" alignItems="center">
{Array(5)
.fill("")
.map((_, i) => (
<StarIcon
key={i}
color={i < property.rating ? "teal.500" : "gray.300"}
/>
))}
<Box as="span" ml="2" color="gray.600" fontSize="sm">
{property.reviewCount} reviews
</Box>
</Box>
</Box>
</Box>
)
}
function Example() {
const property = {
imageUrl: "https://bit.ly/2Z4KKcF",
imageAlt: "Rear view of modern home with pool",
beds: 3,
baths: 2,
title: "Modern home in city center in the heart of historic Los Angeles",
formattedPrice: "$1,900.00",
reviewCount: 34,
rating: 4,
}
return (
<Box maxW="sm" borderWidth="1px" borderRadius="lg" overflow="hidden">
<Image src={property.imageUrl} alt={property.imageAlt} />
<Box p="6">
<Box d="flex" alignItems="baseline">
<Badge borderRadius="full" px="2" colorScheme="teal">
New
</Badge>
<Box
color="gray.500"
fontWeight="semibold"
letterSpacing="wide"
fontSize="xs"
textTransform="uppercase"
ml="2"
>
{property.beds} beds &bull; {property.baths} baths
</Box>
</Box>
<Box
mt="1"
fontWeight="semibold"
as="h4"
lineHeight="tight"
isTruncated
>
{property.title}
</Box>
<Box>
{property.formattedPrice}
<Box as="span" color="gray.600" fontSize="sm">
/ wk
</Box>
</Box>
<Box d="flex" mt="2" alignItems="center">
{Array(5)
.fill("")
.map((_, i) => (
<StarIcon
key={i}
color={i < property.rating ? "teal.500" : "gray.300"}
/>
))}
<Box as="span" ml="2" color="gray.600" fontSize="sm">
{property.reviewCount} reviews
</Box>
</Box>
</Box>
</Box>
)
}

as prop#

You can use the as prop to change the element render, just like styled-components.

<Box as="button" borderRadius="md" bg="tomato" color="white" px={4} h={8}>
Button
</Box>
<Box as="button" borderRadius="md" bg="tomato" color="white" px={4} h={8}>
Button
</Box>

© 2021, Made with ❤️ by Creative Tim & Simmmple for a better web

  • Creative Tim
  • Simmmple
  • Blog
  • License