> ## Documentation Index
> Fetch the complete documentation index at: https://subframe-59800133-apg-edit-updates.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Subcomponents

> Child components scoped to a parent component.

Subcomponents are child components scoped to a parent (also known as compound components). Use them to group related components together. In code, they are represented as properties of the parent component.

```tsx theme={null}
<Card>
  <Card.Header>Title</Card.Header>
  <Card.Body>Content goes here</Card.Body>
  <Card.Footer>Actions</Card.Footer>
</Card>
```

In this example, `Card` is the parent component. `Header`, `Body`, and `Footer` are subcomponents.

## Creating subcomponents

<Frame>
  <img src="https://mintcdn.com/subframe-59800133-apg-edit-updates/h3QkDAiIDKnbbMvD/images/components/subcomponent-menu.png?fit=max&auto=format&n=h3QkDAiIDKnbbMvD&q=85&s=b74ac3dba24622ce81724d89cc5b64e2" alt="Subcomponent panel when editing a component" width="299" height="198" data-path="images/components/subcomponent-menu.png" />
</Frame>

1. Open your parent component
2. In the left panel, click on **Subcomponents** > <Icon icon="plus" size={16} /> to create a new subcomponent