Introduction

A layout component for grouping related elements visually.

Usage

import { Group } from "../components/ui";
import { Button } from "../components/ui/button";

export default function MyPage() {
  return (
    <Group attached>
      <Button>First</Button>
      <Button>Second</Button>
      <Button>Third</Button>
    </Group>
  );
}

CMS Page Builder

This component is available as a group block in the Page Builder (content/pages/*.json):

{
  "type": "group",
  "attached": true,
  "children": [
    { "type": "button", "text": "First" },
    { "type": "button", "text": "Second" }
  ]
}

Props

| orientation | `"horizontal" \ | "vertical"` | The orientation of the group. |

| attached | boolean | Whether to attach the children together. | | grow | boolean | Whether the children should grow to fill the available space. |