# Group

```ts
import { Group, Rectangle } from "@pibbl/core";
```

`Group` uses [`GroupProps`](/reference/types/elements-components/#groupprops) and [`GStyle`](/reference/types/styles/#gstyle) to transform recursive [`PibblNode`](/reference/types/elements-components/#pibblnode)
children. Interaction regions, clips, layers, and paint share the transformed
[`Canvas`](/reference/types/canvas-runtime/#canvas) geometry. A receiving filter captures the group's recursive output before its
own transform is presented.

```tsx
<Group style={{ translateX: 48, rotationDegrees: 15 }}>
  <Rectangle style={{ width: 100, height: 60, fill: "#2563eb" }} />
</Group>
```

See the [Group live example](/playground/#/examples/composition/group).

## API details from source

<span id="api-Group"></span>

Describes a transformation group for JSX or createElement authoring.

```ts
Group: PibblPrimitiveComponent<GroupProps, PrimitiveInput<GroupProps, GStyle>>
```

Related API: [Group](/reference/components/group/), [PibblPrimitiveComponent](/reference/types/elements-components/#pibblprimitivecomponent), [GroupProps](/reference/types/elements-components/#groupprops), [PrimitiveInput](/reference/types/styles/#primitiveinput), [GStyle](/reference/types/styles/#gstyle).

### Parameters

- **`props`** — Authored component inputs, supplied through JSX or createElement. See the linked
props and style types.

### Throws

When called directly; Pibbl mounts this component through JSX or createElement.

### See also

[GroupProps](/reference/types/elements-components/#groupprops)

[GStyle](/reference/types/styles/#gstyle)

[View source — packages/core/src/lib/components/g.ts:81](/source/packages/core/src/lib/components/g-ts/#L81)

## Implementation guidance for agents

Read the [Drawing, layout, and effects companion](/agents/topics/layout/) for ownership, adaptation, failure modes, and verification. [Agent start](/agents/) provides the version-selection workflow.

## Complete minimal examples

- [Drawing composition](/minimal-examples/drawing/composition/): Group, cache, and clip a drawing, then add text and an embedded thumbnail. [Plain source](/minimal/drawing/composition.tsx)
## Interactive examples

- [Filters](/examples/filters/) · [Full page](/experience/filters/)
- [Reusable physics panels](/examples/physics-panels/) · [Full page](/experience/physics-panels/)
- [Living Ink](/examples/living-ink/) · [Full page](/experience/living-ink/)
- [Material Lab](/examples/material-lab/) · [Full page](/experience/material-lab/)
- [Growing Reveal](/examples/growing-reveal/) · [Full page](/experience/growing-reveal/)
- [Underwater scene](/examples/underwater/) · [Full page](/experience/underwater/)
- [Optional filters](/examples/optional-filters/) · [Full page](/experience/optional-filters/)
- [Visibility Transitions](/examples/visibility-transitions/) · [Full page](/experience/visibility-transitions/)
## Documentation version

Documentation built with @pibbl/core 0.0.2, revision 272a94a. ALPHA — NOT FOR PRODUCTION USE.