chakra-layout-components

Welcome to chakra-layout-components 👋

[](#contributors-)

chakra-ui Layout Helper Components

This project simplify uses horizontal, grid,vertical and space for Chakra UI.

Props

These props are applicable to both Horizontal and Vertical components.

Prop	Type
wrap	boolean
spaceBetween	boolean
spaceAround	boolean
justifyEnd	boolean
justifyStart	boolean
flex	number
spaceFirst	number
spacing	number
spaceBottom	boolean
alignStart	boolean
alignItemsStart	boolean
center	boolean
centerV	boolean
centerH	boolean
noShrink	boolean
styles	CSSProperties
invert	boolean
reverse	boolean
fullW	boolean
fullH	boolean
debug	boolean

In addition to this, the components also support Chakra UI's style props.

Example

const App = () => {
  return (
    <L.Vertical spacing={50}>
      <L.Vertical spacing={20} bg="teal.100">
        <Text> We </Text>
        <Text> are </Text>
        <Text> Vertical </Text>
      </L.Vertical>

      <L.Horizontal spaceBetween bg="pink.100" p={4}>
        <Text> We </Text>
        <Text> are </Text>
        <Text> Horizontal </Text>
      </L.Horizontal>

      <L.Space size={50} />

      <L.Horizontal centerV h={200} w={400} debug>
        <Text> I am centered vertically </Text>
      </L.Horizontal>

      <L.Horizontal centerH h={200} w={400} debug>
        <Text> I am centered Horizontally </Text>
      </L.Horizontal>

      <L.Horizontal center h={200} w={400} debug>
        <Text> I am just centered </Text>
      </L.Horizontal>

      <L.Vertical fullW debug>
        <Text> I will take full width </Text>
      </L.Vertical>
    </L.Vertical>
  );
};

Produces:

Install

yarn install && yarn watch

Usage

cd examples && yarn start

See it in browser at http://localhost:1234

Run tests

yarn run test

🤝 Contributing

Contributions, issues and feature requests are welcome!
Feel free to check issues page.

Show your support

Give a ⭐️ if this project helped you!

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Praneet Rohida 🚇 ⚠️ 💻

Kitze 🚇 ⚠️ 💻

This project follows the all-contributors specification. Contributions of any kind welcome!