Group

Joined Astro buttons and controls with shared border and radius styles.

---
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

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

Usage

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

Use the Code tab above for the complete Astro composition.

API reference

Read the registry source 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 for input addons and Tabs when the controls switch visible panels.