Maintenance Mode

Full-page maintenance screen with animated gear and status

Feedback & Statusmaintenancedowntimestatusoffline

Dependencies

shadcn/ui components needed:

npx shadcn@latest add buttonnpx shadcn@latest add card

How to use this component

Copy the code below into your project. Make sure you have the required shadcn/ui dependencies installed. Then import and use the component in your pages or layouts.

Code

1"use client";
2
3import { Settings } from 'lucide-react';
4import { Button } from '@/components/ui/button';
5import { Card, CardContent } from '@/components/ui/card';
6
7export default function MaintenanceMode() {
8  return (
9    <>
10      <style>{`
11        @keyframes spin {
12          from { transform: rotate(0deg); }
13          to { transform: rotate(360deg); }
14        }
15        @keyframes gradient {
16          0% { background-position: 0% 50%; }
17          50% { background-position: 100% 50%; }
18          100% { background-position: 0% 50%; }
19        }
20        .spin-slow { animation: spin 8s linear infinite; }
21        .animated-gradient {
22          background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
23          background-size: 400% 400%;
24          animation: gradient 15s ease infinite;
25        }
26      `}</style>
27      <div className="flex min-h-[500px] items-center justify-center animated-gradient p-6">
28        <Card className="w-full max-w-md">
29          <CardContent className="flex flex-col items-center py-12 text-center">
30            <div className="mb-6 relative">
31              <div className="absolute inset-0 flex items-center justify-center">
32                <div className="h-20 w-20 rounded-full bg-primary/10" />
33              </div>
34              <Settings className="relative h-20 w-20 text-primary spin-slow" />
35            </div>
36            <h2 className="mb-2 text-2xl font-bold text-foreground">We'll be back soon!</h2>
37            <p className="mb-4 text-sm text-muted-foreground">
38              We're performing scheduled maintenance to improve your experience.
39            </p>
40            <div className="mb-6 rounded-lg bg-muted p-4">
41              <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Expected Return</p>
42              <p className="text-sm font-semibold text-foreground">March 19, 2026 at 3:00 PM UTC</p>
43            </div>
44            <p className="mb-6 max-w-sm text-xs text-muted-foreground">
45              We apologize for any inconvenience. Thank you for your patience and understanding.
46            </p>
47            <Button variant="outline">Check Status</Button>
48          </CardContent>
49        </Card>
50      </div>
51    </>
52  );
53}