# Group

An ancestor whose state its descendants follow.

Source: https://www.zazz.sh/api/primitives/group/

## Installation

```bash
pnpm dlx zazz-ui add group
```

Run `zazz-ui init` first if the project has no `zazz/` folder yet.

## Examples

### Default

```html
<ui-group
  style="
    --display: block;
    --p: 4;
    --border: 1;
    --radius: 2;
  "
>
  <p
    style="
      --font-weight: strong;
      --text: var(--color-foreground);
      --group-text--hover: var(--color-primary);
    "
  >
    Hover anywhere on this card
  </p>
  <p
    style="
      --opacity: 0.7;
      --group-opacity--hover: 1;
    "
  >
    The text follows the group's state, not its own.
  </p>
</ui-group>
```

## Tag or attribute

`<ui-group>` is a block. `data-ui="group"` keeps its host's display, so use it on a link, a button, or a list item, and stack it on a primitive (`data-ui="card group"`). Descendants read the group's state with the [group modifier](/api/modifiers/group/).

A custom element never matches `:disabled`, so `<ui-group>` takes `aria-disabled="true"` instead, with a role that allows it.

## Attributes

| Attribute | Kind | Values |
| --- | --- | --- |
| `data-ui="group"` | identity | free value |
| `<ui-group>` | tag | free value |