Group

A group visually groups related UI elements together.

<Group>
  <Button>Button</Button>
  <Button>Another Button</Button>
</Group>

Installation

npm

pnpm

yarn

bun

npx shadcn@latest add @dotui/group

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

<Group>
	<Button>One</Button>
	<Button>Two</Button>
</Group>

A group represents a set of related UI controls, and supports interactive states for styling.

Prop	Type	Default
	`"horizontal" \| "vertical"`	`'horizontal'`
	`ReactNode \| function`	`—`
	`union`	`—`
	`string`	`—`
	`boolean`	`—`
	`boolean`	`—`
	`DOMRenderFunction<"div", GroupRenderProps>`	`—`

Last updated on 6/4/2026