Skip to main content

Group

The Group is a layout component that arranges its children in a stack (horizontally or vertically) and intelligently handles the styling of the first, middle, and last elements to create a cohesive group.

Installation​

npm install @kousta-ui/components

Import styles​

import "@kousta-ui/components/esm/index.css";

Props​

NameTypeDefaultDescription
direction"row" | "column""row"The direction to stack the children.
gapstring0The spacing between the children (CSS gap value like "8px" or "1rem").

Usage​

Horizontal Group (Default)​

By default, Group arranges its children in a row. It automatically handles the border-radius of the first and last elements to create a unified look.

import { Group, Button } from "@kousta-ui/components";

export default function Example() {
return (
  <Group>
    <Button variant="primary-outline">Button 1</Button>
    <Button variant="primary-outline">Button 2</Button>
    <Button variant="primary-outline">Button 3</Button>
  </Group>
);
}

Vertical Group​

Set direction="column" to stack the children vertically.

import { Group, Button } from "@kousta-ui/components";

export default function Example() {
return (
  <div style={{ width: "100%", maxWidth: 200 }}>
    <Group direction="column">
      <Button variant="neutral-outline">Button 1</Button>
      <Button variant="neutral-outline">Button 2</Button>
      <Button variant="neutral-outline">Button 3</Button>
    </Group>
  </div>
);
}

With Custom Gap​

You can specify a gap between the elements.

import { Group, Button } from "@kousta-ui/components";

export default function Example() {
return (
  <Group gap="2rem">
    <Button>Button 1</Button>
    <Button>Button 2</Button>
  </Group>
);
}

Input Group​

Group is also useful for creating input groups with buttons or other elements.

import { Group, Button, Input } from "@kousta-ui/components";

export default function Example() {
return (
  <div style={{ width: "100%", maxWidth: 420 }}>
    <Group>
      <Input placeholder="Search..." />
      <Button>Search</Button>
    </Group>
  </div>
);
}

Styles & customization​

Group is a layout component that applies flexbox properties to a container.

Runtime classes​

  • kui-group: The base class applied to the div container.

CSS Properties​

  • The component applies flex-direction and gap styles directly to the container based on the direction and gap props.

Types (reference)​

import { ComponentPropsWithoutRef } from "react";

export type GroupProps = ComponentPropsWithoutRef<"div"> & {
  direction?: "row" | "column";
  gap?: string;
};