Maintenance
Installation
Run the following command
npx vibes@latest add maintenanceUsage
import { Maintenance } from '@/vibes/soul/sections/maintenance';function Usage() { return ( <Maintenance contactEmail="info@outershell.com" contactPhone="+(1) 408 123 4567" logo={"Soul"} /> );}API Reference
MaintenanceProps
| Prop | Type | Default |
|---|---|---|
className | string | '' |
logo* | Streamable<string | { src: string; alt: string }> | |
logoWidth | number | 200 |
logoHeight | number | 40 |
logoHref | string | '/' |
logoLabel | string | 'Home' |
title | string | 'We are down for maintenance' |
statusMessage | string | 'Sorry for the inconvenience, we're currently working on improving our store.' |
contactText | string | 'Contact us' |
contactPhone | string | |
contactEmail | string |
CSS Variables
This component supports various CSS variables for theming. Here's a comprehensive list.
:root { --maintenance-focus: var(--primary); --maintenance-font-family: var(--font-family-body); --maintenance-title-font-family: var(--font-family-heading); --maintenance-title: var(--foreground); --maintenance-status-message: var(--contrast-500); --maintenance-contact: var(--foreground); --maintenance-contact-link: var(--contrast-400); --maintenance-contact-link-hover: var(--foreground);}