---
title: Group
description: "Joined Astro buttons and controls with shared border and radius styles."
seo:
    title: "Group for Astro — examples and usage"
---

```astro
---
import { Group, GroupSeparator, GroupText } from "@/components/ui/group"
import { Button } from "@/components/ui/button"
---

<div class="flex flex-wrap items-start gap-8">
  <Group aria-label="Document actions">
    <Button variant="outline">Save draft</Button>
    <GroupSeparator />
    <Button variant="outline">Preview</Button>
    <GroupSeparator />
    <Button variant="outline" disabled>
      Publish
    </Button>
  </Group>
  <Group orientation="vertical" aria-label="View scale">
    <Button variant="outline" aria-label="Zoom in">
      +
    </Button>
    <GroupText>100%</GroupText>
    <Button variant="outline" aria-label="Zoom out">
      −
    </Button>
  </Group>
</div>
```

## Installation

```sh
bunx --bun shadcn@latest add @gnosticai/group
```

## Usage

```ts
import { Group } from "@/components/ui/group"
```

Use the Code tab above for the complete Astro composition.

## API reference

Read the [registry source](/r/group.json) for the exported parts and prop types.

## When to use Group

Place related buttons directly inside Group. Set `orientation="vertical"` for a column. GroupText can add a label, and GroupSeparator creates an internal divider. A group should contain controls that operate on the same content.

## Keyboard and behavior

Group uses `role="group"` and needs an accessible name when its purpose is not clear from nearby text. Each child keeps its own native keyboard behavior. This layout does not add arrow-key navigation or single-selection state.

## Theme and layout

The outer children retain rounded corners while the inner edges join. Keep child sizes consistent. Check visible focus around the shared borders, especially when a child is disabled.

## Related choices

Use [Input Group](/components/input-group) for input addons and [Tabs](/components/tabs) when the controls switch visible panels.