Group

A flexbox layout component for grouping items horizontally or vertically.

Want to skip the docs? Try our MCP Server

#
Documentation

#
Usage

The Group component uses CSS-standard defaults: flexDirection="row" (horizontal layout) with no default gap. You must explicitly set the gap value.


import type { ComponentPropsWithoutRef } from "react";
 
import { Box, Group } from "@optiaxiom/react";
 
export function App() {
  return (
    <Group gap="16">
      <DemoBox>01</DemoBox>
      <DemoBox>02</DemoBox>
      <DemoBox>03</DemoBox>
    </Group>
  );
}
 
function DemoBox({ children, ...props }: ComponentPropsWithoutRef<typeof Box>) {
  return (
    <Box
      bg="bg.avatar.purple"
      display="grid"
      fontFamily="mono"
      fontSize="md"
      fontWeight="600"
      p="16"
      placeItems="center"
      rounded="sm"
      {...props}
    >
      {children}
    </Box>
  );
}

#
Direction

Use flexDirection prop to control whether children are grouped vertically or horizontally. By default flexDirection is set to row (CSS standard).

Use flexDirection="row" or flexDirection="row-reverse" to group items horizontally:


import type { ComponentPropsWithoutRef } from "react";
 
import { Box, Group } from "@optiaxiom/react";
 
export function App() {
  return (
    <Group flexDirection="row-reverse" gap="16">
      <DemoBox p="12">01</DemoBox>
      <DemoBox p="16">02</DemoBox>
      <DemoBox p="12">03</DemoBox>
    </Group>
  );
}
 
function DemoBox({ children, ...props }: ComponentPropsWithoutRef<typeof Box>) {
  return (
    <Box
      bg="bg.avatar.purple"
      display="grid"
      fontFamily="mono"
      fontSize="md"
      fontWeight="600"
      p="16"
      placeItems="center"
      rounded="sm"
      {...props}
    >
      {children}
    </Box>
  );
}

Use flexDirection="column" or flexDirection="column-reverse" to group items vertically:


import type { ComponentPropsWithoutRef } from "react";
 
import { Box, Group } from "@optiaxiom/react";
 
export function App() {
  return (
    <Group flexDirection="column" gap="16">
      <DemoBox>01</DemoBox>
      <DemoBox>02</DemoBox>
      <DemoBox>03</DemoBox>
    </Group>
  );
}
 
function DemoBox({ children, ...props }: ComponentPropsWithoutRef<typeof Box>) {
  return (
    <Box
      bg="bg.avatar.purple"
      display="grid"
      fontFamily="mono"
      fontSize="md"
      fontWeight="600"
      p="16"
      placeItems="center"
      rounded="sm"
      {...props}
    >
      {children}
    </Box>
  );
}

#
Gap

Use gap prop to control the gap between group items. Unlike the deprecated Flex component, Group has no default gap value - you must specify it explicitly.

Gap


"use client";
 
import type { ComponentPropsWithoutRef } from "react";
 
import { Box, Group } from "@optiaxiom/react";
 
export function App({
  gap = "16",
}: Pick<ComponentPropsWithoutRef<typeof Group>, "gap">) {
  return (
    <Group gap={gap}>
      <DemoBox p="12">01</DemoBox>
      <DemoBox p="16">02</DemoBox>
      <DemoBox p="12">03</DemoBox>
    </Group>
  );
}
 
function DemoBox({ children, ...props }: ComponentPropsWithoutRef<typeof Box>) {
  return (
    <Box
      bg="bg.avatar.purple"
      display="grid"
      fontFamily="mono"
      fontSize="md"
      fontWeight="600"
      p="16"
      placeItems="center"
      rounded="sm"
      {...props}
    >
      {children}
    </Box>
  );
}

#
Alignment

Use alignItems and justifyContent prop to control the layout and alignment of group items.

The Group component provides smart alignItems defaults:

When flexDirection="row": defaults to alignItems="center"
When flexDirection="column": defaults to alignItems="stretch"

Align items

Flex direction

Justify content


"use client";
 
import type { ComponentPropsWithoutRef } from "react";
 
import { Box, Group, theme } from "@optiaxiom/react";
 
export function App({
  alignItems = "center",
  flexDirection = "row",
  justifyContent = "center",
}: Pick<
  ComponentPropsWithoutRef<typeof Group>,
  "alignItems" | "flexDirection" | "justifyContent"
>) {
  return (
    <Group
      alignItems={alignItems}
      flexDirection={flexDirection}
      gap="16"
      h="224"
      justifyContent={justifyContent}
      rounded="md"
      style={stripes}
      w="full"
    >
      <DemoBox p="12">01</DemoBox>
      <DemoBox p="16">02</DemoBox>
      <DemoBox p="12">03</DemoBox>
    </Group>
  );
}
 
function DemoBox({ children, ...props }: ComponentPropsWithoutRef<typeof Box>) {
  return (
    <Box
      bg="bg.avatar.purple"
      display="grid"
      fontFamily="mono"
      fontSize="md"
      fontWeight="600"
      placeItems="center"
      rounded="sm"
      {...props}
    >
      {children}
    </Box>
  );
}
 
const stripes = {
  backgroundColor: theme.colors["bg.secondary"],
  backgroundImage: `
    linear-gradient(
      135deg,
      ${theme.colors["bg.avatar.neutral"]} 10%,
      transparent 0,
      transparent 50%,
      ${theme.colors["bg.avatar.neutral"]} 0,
      ${theme.colors["bg.avatar.neutral"]} 60%,
      transparent 0,
      transparent
    )
  `,
  backgroundSize: "7px 7px",
};

#
Migrating from Flex

Group is the replacement for the deprecated Flex component. Key differences:

Property	Flex (deprecated)	Group (new)
flexDirection	”column"	"row” (CSS standard)
gap	”16”	no default

See the migration guide for more details.

#
Related

Box

Box is the base component for all our other components and provides a convenient way to use our design tokens and set element styles without having to write any custom CSS.

Flex

Use Flex component to stack items vertically or horizontally.

Grid

Use Grid component to place items in a grid using equal width columns.

#
Props

#
Group

Supports all Box props in addition to its own. Renders a <div> element.

Prop
`alignItems` Set the element’s `align-items` CSS property. Defaults to `center` when `flexDirection='row'`, and `stretch` when `flexDirection='column'`. `ResponsiveValue<"normal" \| "stretch" \| "center" \| "end" \| "start">`
`asChild` Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. `false \| true`
`className` `string`
`display` Set the element’s `display` CSS property `ResponsiveValue<typeof styling.display>` Default: `flex`
`flexDirection` Set the element’s `flex-direction` CSS property. Default: ‘row’ (CSS standard) `ResponsiveValue<"column" \| "column-reverse" \| "row" \| "row-reverse">` Default: `row`

#
Changelog

#
1.8.0

Added component