# StatusPageV3Component Construct - Checkly Docs

> Learn how to configure status page components with the Checkly CLI.

Source: https://www.checklyhq.com/docs/constructs/status-page-v3-component/

---

- Configuration StatusPageV3Component Options

- Referencing an existing component

Status Pages

# StatusPageV3Component Construct

Learn how to configure status page components with the Checkly CLI.

Components are the building blocks of a [`StatusPageV3`](https://www.checklyhq.com/docs/constructs/status-page-v3) page. A component is either a `SERVICE` (a monitored thing with its own status) or a `GROUP` (a container for other components).

```
import { StatusPageV3, StatusPageV3Component } from "checkly/constructs"

const statusPage = new StatusPageV3("company-status", {
name: "Company Status",
url: "company-status",
})

const backend = new StatusPageV3Component("backend-group", {
statusPage,
type: "GROUP",
name: "Backend",
displayOrder: 0,
})

new StatusPageV3Component("api-component", {
statusPage,
name: "API",
description: "Public REST API",
parent: backend,
displayOrder: 1,
})
```

## ​ Configuration

### ​ `StatusPageV3Component` Options

​

StatusPageV3 | StatusPageV3Ref

required

The page this component belongs to. A component belongs to exactly one page and cannot move to another one later. **Usage:**

```
new StatusPageV3Component("api-component", {
statusPage,
name: "API",
displayOrder: 0,
})
```

​

string

required

The name shown on the status page.

​

number

required

Position among its siblings; lower comes first.

​

string

default: "SERVICE"

`'SERVICE'` (a monitored thing with its own status) or `'GROUP'` (a container for other components). **Usage:**

```
new StatusPageV3Component("backend-group", {
statusPage,
type: "GROUP",
name: "Backend",
displayOrder: 0,
})
```

​

string

Shown next to the name on the status page.

​

boolean

default: "false"

Hide the component from the public page while keeping it available for incidents and automation.

​

StatusPageV3Component | StatusPageV3ComponentRef

The `GROUP` component to nest this component under. Must be on the same status page. **Usage:**

```
new StatusPageV3Component("api-component", {
statusPage,
name: "API",
parent: backendGroup,
displayOrder: 1,
})
```

Unlike v2 services, a component belongs to one status page. It cannot be shared between pages.

## ​ Referencing an existing component

Use `StatusPageV3Component.fromId()` to point an [automation rule](https://www.checklyhq.com/docs/constructs/status-page-v3-automation-rule) or a `parent` at a component created in the UI:

```
const cdn = StatusPageV3Component.fromId("790f145a-6ce9-4d94-b7b2-a92e0e2c6a1a")
```

Was this page helpful?

[Suggest edits](https://github.com/checkly/docs/edit/main/constructs/status-page-v3-component.mdx)[Raise issue](https://github.com/checkly/docs/issues/new?title=Issue%20on%20docs&body=Path:%20/constructs/status-page-v3-component)

[StatusPageV3 Construct Previous](https://www.checklyhq.com/docs/constructs/status-page-v3)[StatusPageV3AutomationRule Construct Next](https://www.checklyhq.com/docs/constructs/status-page-v3-automation-rule)

[x](https://x.com/checklyhq)[github](https://github.com/checkly)[linkedin](https://linkedin.com/company/checkly)

[Powered by This documentation is built and hosted on Mintlify, a developer documentation platform](https://www.mintlify.com/?utm_campaign=poweredBy&utm_medium=referral&utm_source=checkly-422f444a)