How do I customize my status page theme?
Make your status page match your brand with themes, colors, and layout options.
UpCanary status pages use a block-based layout system. You choose which blocks appear, in what order, and how they’re configured. Two built-in themes give you a starting point, with more branding controls on the way.
Themes
Two theme presets are available:
| Theme | Description |
|---|---|
| Light | White background, dark text - works well for most product brands |
| Dark | Dark background, light text - popular for developer tools and infrastructure products |
Select a theme from Status Page Settings > Appearance. The preview updates in real time so you can see how your page will look before saving.
Layout Blocks
Your status page is built from blocks. You can add, remove, and reorder blocks to create the layout that makes sense for your users. Available blocks:
Header
Displays your page name and optional tagline at the top of the page. The header is always the first block.
Status Banner
A full-width banner that shows the overall health summary - for example, “All Systems Operational”, “Partial Outage”, or “Major Outage”. The message and color update automatically based on your component statuses.
Component List
Shows each attached monitor as a named component with its current status. Two display modes:
- Detailed - shows status badge, uptime history bar, and response time for each component
- Compact - shows status badge only, useful when you have many components
Component Groups
Organizes components into labeled sections. For example, you might group “Website” and “CDN” under “Frontend”, and “API”, “Webhooks”, and “Database” under “Backend”. Groups collapse and expand on the visitor’s page.
Service List
Displays the status of third-party services you’ve subscribed to, such as AWS, Stripe, or GitHub. See Service Dependencies for how to configure this.
Incident List
Shows currently active and recently resolved incidents with their severity, status, and timeline. When there are no active incidents, this block is hidden automatically.
Text Block
A free-form markdown text area. Use it to add context, maintenance schedules, contact information, or anything else your users need to know.
Footer
Appears at the bottom of the page. Includes a “Powered by UpCanary” attribution by default, with options to add custom links.
Subscribe Block
Lets visitors enter their email address to receive notifications when incidents occur. Requires the subscriber feature to be enabled. See Subscribers.
Metrics Block
Displays charts for response time and uptime percentage over a configurable time window (24h, 7d, 30d). Useful for SLA transparency.
Reordering Blocks
Drag blocks up or down in the layout editor to change their order on the page. Most blocks can be moved freely; the Header block is always first.
Coming Soon
The following branding features are currently in development:
- Logo upload - replace the page title text with your company logo
- Custom accent color - set a primary color that matches your brand
- Custom CSS - advanced users will be able to inject custom styles for full design control
- Custom domains - serve your status page from
status.yourcompany.com- see Custom Domains
Related Documentation
- Create a Status Page - Set up your status page before customizing
- Components & Monitors - Configure the components block
- Service Dependencies - Configure the service list block
- Custom Domains - Serve your status page from your own domain
- Visibility & Access - Control who can see your page