Mantine Layout Components

Mantine Layout Components is a collection of React components for creating horizontal and vertical layouts easily.

Built on top of Mantine's Group and Stack.

Installation

You can install mantine-layout-components via npm or yarn:

npm:

npm install mantine-layout-components

yarn:

yarn add mantine-layout-components

Usage

For a complete list of props and behaviors, please refer to the stories components.

Horizontal Layout Component

The Horizontal component allows you to create a horizontal flows for your elements.

import React from 'react';
import { Horizontal } from 'mantine-layout-components';

const MyComponent = () => {
  return (
    <Horizontal>
      <div>Element 1</div>
      <div>Element 2</div>
      {/* Add more elements here */}
    </Horizontal>
  );
};

Vertical Layout Component

The Vertical component allows you to create a vertical flows for your elements.

import React from 'react';
import { Vertical } from 'mantine-layout-components';

const MyComponent = () => {
  return (
    <Vertical>
      <div>Element 1</div>
      <div>Element 2</div>
      {/* Add more elements here */}
    </Vertical>
  );
};

Debugging

For debugging purposes, you can add debug prop to any component to see its boundaries.

import React from 'react';

const MyComponent = () => {
    <Vertical debug>
      <div>Element 1</div>
      <div>Element 2</div>
      {/* Add more elements here */}
    </Vertical>
  );
};

Full width and height

You can make any component full width or full height by adding fullW or fullH props.

import React from 'react';

const MyComponentFullW = () => {
    <Vertical fullW>
      <div>Element 1</div>
      <div>Element 2</div>
      {/* Add more elements here */}
    </Vertical>
  );
};

const MyComponentFullH = () => {
    <Vertical fullH>
      <div>Element 1</div>
      <div>Element 2</div>
      {/* Add more elements here */}
    </Vertical>
  );
};