@hakuna matata ui/layout

Chakra UI layout components that give you massive speed

Version: 1.6.1 Updated: 04/05/2022

By: monacohq License: MIT

Downloads Last 30 Days: 11

@hakuna-matata-ui/layout

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

Installation

yarn add @hakuna-matata-ui/layout

# or

npm i @hakuna-matata-ui/layout

Import Components

import {
  Box,
  Flex,
  Stack,
  Grid,
  Wrap,
  AspectRatio,
} from "@hakuna-matata-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>
Categories: React js
Tags: react layoutreact layout builderreact layout component patternreact layout libraryreact layout gridreact layout templatereact layout examplereact layout tutorialreact layout effectreact layout managerreact componentreact component libraryreact component examplereact component typescriptreact component statereact component childrenreact component naming conventionreact component typereact component stylereact componentdidmount hookreact gridreact grid layoutreact grid systemreact grid tablereact grid layout examplereact grid examplereact grid libraryreact grid galleryreact grid viewreact grid dndreact stackreact stack navigationreact stackblitzreact stack componentreact stacked bar chartreact stackoverflowreact stack tracereact stack gridreact stack components verticallyreact stacked cardsreact wrapper componentreact wrap componentreact wrap textreact wrapper findreact wrappedcomponentreact wrapper component typescriptreact wrap tests with actreact wrapper function componentreact wrap functional componentreact wrap each childreact boxreact box shadowreact box sizingreact box examplereact box and whisker plotreact box flexreact box shadow generatorreact box borderreact boxplotreact box background colorreact aspect ratioreact aspect ratio imagereact native aspect ratioreact native aspect ratio imagereact native aspect ratio viewreact player aspect ratioreact div aspect ratioreact webcam aspect ratioreact chartjs aspect ratioreact native camera aspect ratioreact uireact ui librariesreact ui frameworkreact ui componentsreact ui component librariesreact ui kitreact ui builderreact ui templatesreact ui testingreact ui libraries 2021react badgereact badge githubreact badge colorreact badge not workingreact badge npmreact badge sizereact badge iconreact badge notificationreact badge onclickbadge react nativereact primitivesreact native primitives@react-pdf/primitivesreact svg primitivesreact-primitives vs react-native-webreact chakra uireact chakra ui templatesreact chakra ui tutorialreact chakra ui carouselreact-chakra-ui-datepickerreact native chakra uireact table chakra uireact select chakra uireact pagination chakra uireact hook form chakra ui