Group

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

Installation

npx shadcn@latest add @dotui/group

Usage

import { Group } from '@/components/ui/group'

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

Anatomy

Group is the container; GroupText renders an inline text segment between controls (prefixes, suffixes, labels).

import { Group, GroupText } from '@/components/ui/group'
;<Group>
  <GroupText>Label</GroupText>
  <Button>Action</Button>
</Group>

Set orientation to "vertical" to stack children instead of the default "horizontal" row.

Examples

API Reference