2.3.1 • Published 2 years ago

@chakra-ui/layout v2.3.1

Weekly downloads
61,568
License
MIT
Repository
github
Last release
2 years ago

@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.

<Wrap spacing={3}>
  <Box>Box 1</Box>
  <Box>Box 2</Box>
</Wrap>

Badge is used to render a badge. It can come 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 centers 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>
@ssg-ui/core@fluidtruck/layout@reverb-ui/test@infinitebrahmanuniverse/nolb-_chakfarshid-test-package-1@everything-registry/sub-chunk-164@divriots/starter-yogi@toktokhan-fe/next-page-router@aittorai/ui@aittorai/ui-library@backlight-dev/used-conclusion-0z17g.brana1991@backlight-dev/used-conclusion-0z17g.design-system-nar-events@backlight-dev/puzzled-crime-kumj0.yogi-ldoycdvc@backlight-dev/puzzled-crime-kumj0.yogi-leilsehu@backlight-dev/sillyleo.yogi-lcaas95t@backlight-dev/stately.initial@backlight-dev/step-guarantee-8j1xi.yogi-li6te37r@backlight-dev/serial-one.ds@backlight-dev/serial-one.serialone-ds@backlight-dev/moonshot.yogi-ktyn94ks@backlight-dev/omgui.testui@backlight-dev/phc.phc-design-system@backlight-dev/holiday-challenge-vznxr.yogi-kwqb2aka@backlight-dev/instinctive-grocery-7ocrw.yogi-l40d1j1r@backlight-dev/free-revenue-5c0la.yogi-l09v7bo7@backlight-dev/go-go.my-chakra-ds@backlight-dev/brendon.longterm-communication-7ueyr.yogi-lkdu8npz@backlight-dev/canicacuadrada.canica-design-system@backlight-dev/deafening-foot-mrs9i.yogi-polcaneli@bandit-network/sdk-react@bianic-ui/card@bianic-ui/core@chakra-ui/core586b6e81zero-element-boot@fidesui/react@funnelhub/sidebar@incmix-ui/layout@kvib/react@invoke-ai/ui@invoke-ai/ui-library@duiyun/cocodrive@react-mx/preview@nycplanning/streetscape@packpackman/react@toktokhan-dev/chakra@toktokhan-fe/template-next-app-router@toktokhan-fe/template-next-page-router@tggreene/chakra-ui-react@vocdoni/react-componentscid-module-systembonde-components@steedos-ui/builder-ant-design@steedos-widgets/steedos-object@ssg-ui/react@snapfit-ui/card
2.3.0

2 years ago

2.3.1

2 years ago

2.2.0

2 years ago

2.1.19

2 years ago

2.1.17

2 years ago

2.1.18

2 years ago

2.1.16

2 years ago

2.1.14

2 years ago

2.1.15

2 years ago

2.1.13

2 years ago

2.1.12

3 years ago

2.1.10

3 years ago

2.1.11

3 years ago

2.1.9

3 years ago

2.1.8

3 years ago

2.1.6

3 years ago

2.1.7

3 years ago

2.1.2

3 years ago

2.1.1

3 years ago

2.1.4

3 years ago

2.1.3

3 years ago

2.1.5

3 years ago

2.1.0

3 years ago

2.0.3

3 years ago

2.0.2

3 years ago

2.0.1

3 years ago

2.0.0-next.4

3 years ago

2.0.0-next.2

3 years ago

2.0.0-next.3

3 years ago

2.0.0

3 years ago

1.7.8

3 years ago

2.0.0-next.0

3 years ago

2.0.0-next.1

3 years ago

1.8.0

3 years ago

1.7.7

3 years ago

1.6.0

4 years ago

1.7.6

3 years ago

1.7.5

3 years ago

1.7.4

3 years ago

1.7.3

3 years ago

1.7.2

3 years ago

1.7.1

3 years ago

1.7.0

3 years ago

1.5.1

4 years ago

1.5.0

4 years ago

1.4.11

4 years ago

1.4.10

4 years ago

1.4.9

4 years ago

1.4.8

4 years ago

1.4.8-next.0

4 years ago

1.4.7

4 years ago

1.4.6

4 years ago

1.4.5

4 years ago

1.4.4

4 years ago

1.4.3

4 years ago

1.4.2

4 years ago

1.4.1

4 years ago

1.4.0

4 years ago

1.3.3

4 years ago

1.3.2

4 years ago

1.3.1

4 years ago

1.3.0

4 years ago

1.2.0

4 years ago

1.1.3

4 years ago

1.1.2

4 years ago

1.1.1

5 years ago

1.1.0

5 years ago

1.0.1

5 years ago

1.0.0

5 years ago

1.0.0-rc.8

5 years ago

1.0.0-rc.7

5 years ago

1.0.0-rc.6

5 years ago

1.0.0-rc.5

5 years ago

1.0.0-rc.4

5 years ago

1.0.0-rc.3

5 years ago

1.0.0-rc.2

5 years ago

1.0.0-rc.1

5 years ago

1.0.0-rc.0

5 years ago

1.0.0-next.7

5 years ago

1.0.0-next.6

5 years ago

1.0.0-next.5

5 years ago

1.0.0-next.4

5 years ago

1.0.0-next.3

5 years ago

1.0.0-next.2

5 years ago

1.0.0-next.1

5 years ago

1.0.0-next.0

5 years ago