Maintenance
Inform users about downtimes, updates, or scheduled maintenance
Use the Maintenance
component to keep your users informed about service availability. The component helps you display a scheduled maintenance notice to your users:
Under Maintenance
We are performing scheduled maintenance.---import Maintenance from '@blocks/Maintenance.astro'---
<Maintenance />
The Maintenance
component can be used as-is, without any props, in which case, the above component will be rendered. To disable animation, set the animated
prop to false
:
Under Maintenance
We are performing scheduled maintenance.<Maintenance animated={false} />
Custom Properties
To customize titles and the icon, you can use the img
, title
and subTitle
props.

Maintenance
We are currently doing scheduled maintenance. Our website will be back up and running shortly.Keep up to date about our status on our X profile.
<Maintenance img={{ url: '/logo.png', height: 200 }} title="Maintenance" subTitle="We are currently doing scheduled maintenance..."/>
The img
prop expects an object with a url
property. You can further customize the image by specifying alt
, width
, and height
properties. The subTitle
prop also supports HTML tags.
API
type MaintenanceProps = { img?: { url: string alt: string width: number height: number } animated?: boolean title?: string subTitle?: string className?: string}
Prop | Purpose |
---|---|
img | Specifies an image for the element. |
img.url | Sets the path for the image. |
img.alt | Sets an alternate text for the image. |
img.width | Sets the width of the image. |
img.height | Sets the height of the image. |
animated | If no image is provided, an animated gear icon will be rendered. Set this to false to disable animation. |
title | Sets the main title. |
subTitle | Sets a secondary title. |
className | Pass additional CSS classes for your element. |