Chakra UI layout components that give you massive speed

Usage no npm install needed!

<script type="module">
  import chakraUiLayout from 'https://cdn.skypack.dev/@chakra-ui/layout';



A set of layout primitives that make it super easy to manage page and components.


yarn add @chakra-ui/layout

# or

npm i @chakra-ui/layout

Import Components

import { Box, Flex, Stack, Grid, Wrap, AspectRatio } from "@chakra-ui/layout"


Box is just a div on steroids. It gives you the ability to pass style props

<Box color="tomato" _hover={{ bg: "red.500", color: "white" }}>
  Welcome to Box

Flex is just a Box with display: flex

  <Box flex="1">Box 1</Box>
  <Box>Box 2</Box>

Stack is used to group elements and apply a spacing between them. It stacks its children vertically by default.

<Stack spacing="20px">
  <Box>Box 1</Box>
  <Box>Box 2</Box>

AspectRatio is used to constrain its child to specific aspect ratio. It is mostly used for embedding videos, images, and maps.

<AspectRatio ratio={16 / 9}>
  <img src="./some-ig-story" alt="Instagram story" />

Wrap is used to manage the distribution of child elements that are liable to wrap. It is mostly used for button groups, tag group, badge group, and chips.

<AspectRatio ratio={16 / 9}>
  <img src="./some-ig-story" alt="Instagram story" />

Badge is used to render a badge. It can comes in different variants and color schemes as defined in the theme.components.Badge

<Badge variant="solid" colorScheme="green">
  Verified <FaCheck />

Center is used to vertically and horizontally center its child

<Center bg="blue.500" borderRadius="4px" boxSize="40px">
  <FaPhoneIcon />

Container is used to manage content areas on a website or blog. It center's itself using margin-left: auto and margin-right: auto. It also applies a default max-width of 60ch (60 characters)

  <BlogContent />

Spacer is a component that takes up the remaining space in a flex container. It is mostly useful to manage space and wrapping in flex containers

  <Box boxSize="40px" />
  <Spacer />
  <Box boxSize="40px" />