Group

Horizontal grouping of related controls.

stable

Preview

Code

tsx

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

export function Example() {
  return (
    <Group gap="2">
      <Button size="sm" variant="outline">Cancel</Button>
      <Button size="sm">Save changes</Button>
    </Group>
  );
}

Props

Prop	Type	Default	Description
gap	`"0" \| "1" \| "2" \| "3" \| "4" \| "6" \| "8"`	"2"	Horizontal spacing between children.
align	`"start" \| "center" \| "end" \| "stretch" \| "baseline"`	"center"	Cross-axis alignment.
justify	`"start" \| "center" \| "end" \| "between" \| "around"`	"start"	Main-axis alignment.
wrap	`boolean`	false	Allow children to wrap to multiple rows.
className	`string`	—	Additional Tailwind classes, merged with the component's defaults via `cn()`.

Layout primitive: equal-gap horizontal row. Forwards `ref`.

All components also accept standard HTML attributes for their root element (e.g. `id`, `aria-*`, `data-*`, event handlers) and forward `ref` where applicable.

Source

The full implementation of components/ui/group.tsx is below — copy it into your project and own it. Some components import the cn helper from lib/utils or other primitives; copy those too.

tsx

import { cn } from "@/lib/utils";
import { type VariantProps, cva } from "class-variance-authority";
import { type HTMLAttributes, forwardRef } from "react";

const groupVariants = cva("flex flex-row", {
  variants: {
    gap: {
      "0": "gap-0",
      "1": "gap-1",
      "2": "gap-2",
      "3": "gap-3",
      "4": "gap-4",
      "6": "gap-6",
      "8": "gap-8",
    },
    align: {
      start: "items-start",
      center: "items-center",
      end: "items-end",
      stretch: "items-stretch",
      baseline: "items-baseline",
    },
    justify: {
      start: "justify-start",
      center: "justify-center",
      end: "justify-end",
      between: "justify-between",
      around: "justify-around",
    },
    wrap: {
      true: "flex-wrap",
      false: "flex-nowrap",
    },
  },
  defaultVariants: { gap: "2", align: "center", justify: "start", wrap: false },
});

export interface GroupProps
  extends HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof groupVariants> {}

export const Group = forwardRef<HTMLDivElement, GroupProps>(
  ({ className, gap, align, justify, wrap, ...props }, ref) => (
    <div
      ref={ref}
      className={cn(groupVariants({ gap, align, justify, wrap }), className)}
      {...props}
    />
  ),
);
Group.displayName = "Group";

JavaFX

Ships in the PRIZM JavaFX library for thick-client C3 apps as PrizmGroup (extends HBox). Run the gallery to see it natively.

java

import design.prizm.fx.controls.PrizmGroup;

PrizmGroup()
PrizmGroup(PrizmGap gap)
PrizmGroup(PrizmGap gap, Node... children)

Prop	Type	Default	Description
PrizmGap	`enum { NONE, XXS, XS, SM, MD, LG, XL, XXL }`	XS	Gap between children, in px (shared with PrizmStack).
setGap	`(PrizmGap) → void`	—	Set the gap from the PRIZM spacing scale (wraps HBox.setSpacing).

Thin subclass of HBox — related controls laid out horizontally with a PRIZM-scale gap, vertically centred. Defaults to gap XS (8px). Use the inherited setAlignment for other alignment / justification; wrapping (the web `wrap` option) has no HBox equivalent — use a FlowPane. Pure layout, no paint. Mirrors components/ui/group.tsx.