Search documentation v1.0.0

Maintenance

Inform users about downtimes, updates, or scheduled maintenance

Source Report Issue

Use the Maintenance component to keep your users informed about service availability. The component helps you display a scheduled maintenance notice to your users:

Preview

Under Maintenance

We are performing scheduled maintenance.
How to use the Maintenance component
---
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:

No animation

Under Maintenance

We are performing scheduled maintenance.
How to disable animations
<Maintenance animated={false} />

Custom Properties

To customize titles and the icon, you can use the img, title and subTitle props.

Maintenance

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.
How to customize the component
<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
}
PropPurpose
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.