Learn more about Dashboards in the Dashboards overview.
Use Dashboard to create public or private dashboards that display checks and their related metrics on a single page. Dashboards provide a centralized view of your monitoring data. 
import { Dashboard } from "checkly/constructs"

new Dashboard("basic-dashboard", {
  header: "Service Status",
  description: "Real-time monitoring dashboard",
  tags: ["production", "api"],
  customUrl: "service-status",
})

​
Configuration

ParameterTypeRequiredDefaultDescription
checksPerPagenumber❌15Number of checks per page (1-20)
customCSSobject❌-Custom CSS styling (Team/Enterprise plans only)
customDomainstring❌-Custom domain (e.g., “status.example.com”)
customUrlstring❌-Subdomain under “checklyhq.com” (required if customDomain not specified)
descriptionstring❌-Text displayed below the header
enableIncidentsboolean❌falseEnable incidents
expandChecksboolean❌falseExpand checks by default
faviconstring❌-URL to favicon image
headerstring❌-Text displayed at the top of your dashboard
hideTagsboolean❌falseHide tags on the dashboard
isPrivateboolean❌falseMake dashboard private (Team/Enterprise plans only)
linkstring❌-URL to redirect when dashboard logo is clicked
logostring❌-URL to logo image for the dashboard header
paginateboolean❌trueEnable pagination for checks
paginationRatenumber❌60Pagination interval: 30 | 60 | 300 seconds
refreshRatenumber❌60Auto-refresh interval: 60 | 300 | 600 seconds
showHeaderboolean❌trueShow header and description
showP95boolean❌trueShow P95 statistics
showP99boolean❌trueShow P99 statistics
tagsstring[]❌[]Tags that filter which checks appear on the dashboard
useTagsAndOperatorboolean❌falseUse AND instead of OR for tag filtering
widthstring❌'FULL'Dashboard width: 'FULL' | '960PX'

​
Essential Dashboard Options

​
header
string
Text displayed at the top of your dashboard as the main title.Usage:
new Dashboard('my-dashboard', {
  header: 'Production Services Status'
})
Use cases: Brand identity, service identification, user clarity.
​
description
string
Text displayed below the header providing additional context about the dashboard.Usage:
new Dashboard('my-dashboard', {
  header: 'Production Services',
  description: 'Real-time monitoring of all production services'
})
Use cases: Context provision, scope clarification, user guidance.
​
tags
string[]
default:"[]"
Tags that filter which checks appear on the dashboard. Empty array shows all checks.Usage:
new Dashboard('my-dashboard', {
  tags: ['production', 'api']
})
Examples:
// Service-specific tags
new Dashboard('api-dashboard', {
  header: 'API Services',
  tags: ['api-dashboard'],
})

// Environment and service tags
new Dashboard('prod-web-dashboard', {
  header: 'Production Web Services',
  tags: ['production', 'web'],
  useTagsAndOperator: true // Must have BOTH tags
})

// All checks (empty array)
new Dashboard('all-services', {
  header: 'All Services',
  tags: [] // Shows all checks
})
Use cases: Service filtering, environment separation, team organization.
​
customUrl
string
Subdomain under “checklyhq.com” for your dashboard (e.g., “my-status” becomes “my-status.checklyhq.com”).Usage:
new Dashboard('my-dashboard', {
  customUrl: 'service-status'
})
// Creates: service-status.checklyhq.com
Required if customDomain is not specified. Use lowercase letters, numbers, and hyphens only.
Use cases: Public access, branded URLs, easy sharing.
​
customDomain
string
Custom domain for your dashboard (e.g., “status.example.com”). Must be verified through the Checkly UI.Usage:
new Dashboard('my-dashboard', {
  customDomain: 'status.example.com'
})
Use cases: Brand consistency, professional appearance, domain control.
​
customCSS
object
Custom CSS styling for your dashboard. Only available on Team and Enterprise plans.Usage:
// Using file reference
new Dashboard("styled-dashboard", {
  customCSS: {
    entrypoint: path.join(__dirname, "dashboard.css"),
  },
})

// Using inline content
new Dashboard("styled-dashboard", {
  customCSS: {
    content: `
      .header {
        background: #080808;
        border-bottom-color: #313035;
      }
      .header .logo a {
        color: #f7f8f8;
      }
    `,
  },
})
Properties:
ParameterTypeRequiredDescription
entrypointstring❌Path to a CSS file containing custom styles
contentstring❌Inline CSS content as a string
You must provide either entrypoint or content, but not both.
Use cases: Brand consistency, custom themes, visual identity, enhanced UX.

​
Examples

new Dashboard("production-monitoring", {
  header: "Production Services",
  description: "Real-time monitoring of all production services",
  tags: ["production", "critical"],
  customUrl: "production-monitoring",
  logo: "https://company.com/logo.png",
  refreshRate: 60,
  width: "FULL",
  showP95: true,
  showP99: true,
  enableIncidents: true,
})