# Group

A container component for grouping related content with consistent styling.

## Installation

Start from a Svelte 5 application, then install the component package, shared theme, and Bits UI peer:

```bash
pnpm add coss-svelte @coss-svelte/theme bits-ui
```

Import `@coss-svelte/theme/style-coss.css` after Tailwind from the application's global stylesheet.

## Usage

```svelte
<script lang="ts">
import { Archive, Ellipsis, Files, Film, Pencil, Share2, Trash2 } from "@lucide/svelte";
import { Button, Group, GroupSeparator, Menu, MenuItem, MenuPopup, MenuTrigger } from "coss-svelte";
</script>

<Group aria-label="File actions">
	<Button variant="outline">
		<Files aria-hidden="true" />
		Files
	</Button>
	<GroupSeparator />
	<Button variant="outline">
		<Film aria-hidden="true" />
		Media
	</Button>
	<GroupSeparator />
	<Menu>
		<MenuTrigger aria-label="Menu">
			<Ellipsis class="size-4" />
		</MenuTrigger>
		<MenuPopup align="end">
			<MenuItem>
				<Pencil aria-hidden="true" />
				Edit
			</MenuItem>
			<MenuItem>
				<Archive aria-hidden="true" />
				Archive
			</MenuItem>
			<MenuItem>
				<Share2 aria-hidden="true" />
				Share
			</MenuItem>
			<MenuItem variant="destructive">
				<Trash2 aria-hidden="true" />
				Delete
			</MenuItem>
		</MenuPopup>
	</Menu>
</Group>

```

## Anatomy

- `Group`
- `GroupSeparator`

## API Reference

### Group

A container component for grouping related content with consistent styling.

**Composition and refs**

- `children: Snippet<[]>`

Inherits from [Svelte component attributes](https://svelte.dev/docs/svelte/basic-markup#Attributes).

### GroupSeparator

Visually separates related content.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `orientation` | `"horizontal" \| "vertical"` | `"vertical"` | Layout direction for the component. |

**Composition and refs**

- `children: Snippet<[]>`

Inherits from [Svelte <span> attributes](https://svelte.dev/docs/svelte/basic-markup#Attributes).

## Implementation Details

| Field | Value |
| --- | --- |
| Status | Stable |
| Foundation | native |
| Category | Content & Display |
| Particles | 22 |

## Status

Stable for the current coss-svelte surface.

## Agent Notes

- Import Svelte exports directly from `coss-svelte`.
- This is Svelte 5 code: use `class`, lowercase event properties, runes, snippets, and documented `bind:*` contracts. Do not emit JSX, React hooks, `className`, `asChild`, or Base UI imports.
- Prefer this route's example and generated API table over React COSS snippets; COSS React particles are design references only.
- The copy-and-own registry is a preview. Inspect `/r/group.json` for the complete local file and dependency closure.
- Group is stable in the current source catalog.