https://github.com/kitze/mantine-layout-components
Horizontal, Vertical, and Grid components for Mantine
https://github.com/kitze/mantine-layout-components
Last synced: 11 months ago
JSON representation
Horizontal, Vertical, and Grid components for Mantine
- Host: GitHub
- URL: https://github.com/kitze/mantine-layout-components
- Owner: kitze
- License: mit
- Created: 2023-06-14T10:04:02.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2024-06-06T05:47:38.000Z (about 2 years ago)
- Last Synced: 2025-06-17T23:16:13.230Z (12 months ago)
- Language: TypeScript
- Size: 205 KB
- Stars: 16
- Watchers: 2
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](https://mantine.dev/core/group/) and [Stack](https://mantine.dev/core/stack/).
## Installation
You can install `mantine-layout-components` via `npm` or `yarn`:
npm:
```bash
npm install mantine-layout-components
```
yarn:
```bash
yarn add mantine-layout-components
```
## Usage
For a complete list of props and behaviors, please refer to the [stories components](./stories/).
### Horizontal Layout Component
The Horizontal component allows you to create a horizontal flows for your elements.
```tsx
import React from 'react';
import { Horizontal } from 'mantine-layout-components';
const MyComponent = () => {
return (
Element 1
Element 2
{/* Add more elements here */}
);
};
```
### Vertical Layout Component
The Vertical component allows you to create a vertical flows for your elements.
```tsx
import React from 'react';
import { Vertical } from 'mantine-layout-components';
const MyComponent = () => {
return (
Element 1
Element 2
{/* Add more elements here */}
);
};
```
### Debugging
For debugging purposes, you can add `debug` prop to any component to see its boundaries.
```tsx
import React from 'react';
const MyComponent = () => {
Element 1
Element 2
{/* Add more elements here */}
);
};
```
### Full width and height
You can make any component full width or full height by adding `fullW` or `fullH` props.
```tsx
import React from 'react';
const MyComponentFullW = () => {
Element 1
Element 2
{/* Add more elements here */}
);
};
const MyComponentFullH = () => {
Element 1
Element 2
{/* Add more elements here */}
);
};
```