@chakra-ui/layout
    TypeScript icon, indicating that this package has built-in type declarations

    1.4.10 • Public • Published

    @chakra-ui/layout

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

    Installation

    yarn add @chakra-ui/layout
    
    # or
    
    npm i @chakra-ui/layout

    Import Components

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

    Usage

    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
    </Box>

    Flex is just a Box with display: flex

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

    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>
    </Stack>

    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" />
    </AspectRatio>

    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" />
    </AspectRatio>

    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 />
    </Badge>

    Center is used to vertically and horizontally center its child

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

    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)

    <Container>
      <BlogContent />
    </Container>

    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

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

    Install

    npm i @chakra-ui/layout

    DownloadsWeekly Downloads

    155,750

    Version

    1.4.10

    License

    MIT

    Unpacked Size

    312 kB

    Total Files

    129

    Last publish

    Collaborators

    • segunadebayo
    • tiolukaka
    • _codebender828
    • with-heart