Group.mdx

group	package	title	order	slug	category	description	props	import	source	docs
mantine-core	@mantine/core	Group	1	/core/group/	layout	Compose elements and components in a horizontal flex container	Group	import { Group } from '@mantine/core';	mantine-core/src/Group/Group.tsx	core/Group.mdx

import { GroupDemos } from '@mantine/demos';

Usage

Group children

!important Group will work only with React elements. Strings, numbers, fragments and other parts will not have correct styles:

// Invalid Group usage, do not do this
import { Group } from '@mantine/core';

function InvalidDemo() {
  return (
    <Group>
      First string
      <>
        <div>element inside fragment</div>
      </>
      {20}
    </Group>
  );
}

Browser support

Group uses flexbox gap to add spacing between children. In older browsers Group children will not have spacing.