Getting Started
App Providerglobal.d.tsThemesTypes
cn(...args)Text ParserUnits Converters
AnchorAvatarBreadcrumbBurgerButtonCardCarouselCheckerCodeColor PickerCommandConfettiCopyButtonDouble Helix WordsFloating IndicatorGroupHighlight TextIndicatorInputKbdLabelLoaderPaginationPassword RequirementPolymorphic SlotProgressProseRatingRunning AreaScroll AreaSheetsSkeletonSliderStackSvgTableTabsTextareaTimelineTimesToasterTooltipTyping WordsTypography
useClickOutsideuseClipboarduseDeviceInfouseDialoguseDidUpdateuseDirectionuseDisclosureuseDocumentTitleuseDocumentVisibilityuseElementInfouseEyeDropperuseFetchuseFullscreenuseGeoLocationuseHotkeysuseHoveruseIduseImagePopupuseInputStateuseIntersectionuseIntervaluseIsomorphicEffectuseListStateuseLocalStorageuseMeasureScrollbaruseMediaQueryuseMergedRefuseMouseuseMoveuseMutationObserveruseNetworkuseOpenStateuseOrientationuseOSusePaginationusePWAInstalleruseRandomColorsuseReducedMotionuseReloaduseResizeObserveruseScrollIntoViewuseStateHistoryuseTimeoutuseTouchuseTriggeruseUncontrolleduseValidatedStateuseViewportSizeuseWindowEventuseWindowScroll
Docs
Web
Components
Group
Floating Indicator

A floating visual cue that indicates or highlights elements in the UI.

Highlight Text

A text enhancement component that highlights matching words or important content.

Edit this page on GitHub
  • Started
  • Utilities
  • Configuration
  • Components
  • Hooks
  • Examples
  • Github
  • Contributing
⌘+J

© 2025 oeri rights MIT

Designed in Earth-616

Built by oeri

Group

A layout component that groups multiple elements together with consistent spacing, alignment, or styling.

Usage

Basic usage example to quickly see how the Group works.

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

export function GroupDemo() {
  const groups = [
    ["1", "2", "3"],
    ["4", "5", "6"],
    ["7", "8", "9"]
  ];

  return (
    <div className="grid grid-rows-1 gap-3">
      {groups.map((buttons, index) => (
        <Group grow key={index}>
          {buttons.map(label => (
            <Button key={label} variant="outline" size="sm">
              {label}
            </Button>
          ))}
        </Group>
      ))}
    </div>
  );
}

Properties

Interactive configurator to explore customization options for the Group component.

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

export function GroupDemo() {
  return (
    <Group>
      <Button variant="outline" size="sm">1</Button>
      <Button variant="outline" size="sm">2</Button>
      <Button variant="outline" size="sm">3</Button>
    </Group>
  );
}

API References

Styles API

Styles APITypeDefaultAnnotation
unstyled?booleanfalseif true, all default styles will be removed
gap?string | number12Key of CSS gap values, numbers are converted to rem
wrap?CSSProperties["flexWrap"]wrapControls flex-wrap CSS property
align?CSSProperties["alignItems"]stretchControls align-items CSS property
justify?CSSProperties["justifyContent"]centerControls justify-content CSS property

Props API

Props APITypeDefaultAnnotation
grow?booleanfalseDetermines whether each child element should have flex-grow: 1 style
preventGrowOverflow?booleantrueDetermines whether children should take only dedicated amount of space (max-width style is set based on the number of children)

Source Codes

Full working code example, including necessary markup and styles. You can copy and paste this code directly to start using the component immediately.

group.tsx