Skip to main content

Group

A group visually groups related UI elements together.

On this page
<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>

Examples

API Reference

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

PropType
"horizontal" | "vertical"
ReactNode | function
boolean
boolean

Last updated on 6/16/2026