# Under Construction 1

> Under Construction 1 variant for block.

A shadcn/ui block from the [@uiable](https://uiable.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/uiable/block-under-construction-1).

- Page, with a live preview: https://shadcn.exchange/r/uiable/block-under-construction-1
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/uiable/block-under-construction-1-light-b25503abb12572ab.png
- Registry item: https://uiable.com/r/block-under-construction-1.json
- Categories: under-construction
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://uiable.com/r/block-under-construction-1.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `@uiable/button`

## Files

### `src/components/uiable/blocks/under-construction/under-construction-1/under-construction-1.tsx`

```tsx
// shadcn
import { Button } from "@/components/ui/button"

//  ------------------------------ | UNDER CONSTRUCTION 1 | ------------------------------  //

export default function UnderConstruction1() {
  return (
    <section className="relative flex h-[100vh] min-h-[800px] items-center justify-center overflow-hidden bg-[url('https://cdn.uiable.com/block/img-cunstruct-1-bg.png')] [background-size:100%_auto] bg-top bg-no-repeat px-4 py-16 sm:px-6 lg:px-8">
      <div className="container mx-auto flex min-h-[calc(100vh-8rem)] max-w-6xl items-center justify-center bg-bottom bg-no-repeat py-12 pt-24 sm:pt-28 md:pt-12 md:pr-24 lg:pr-40 xl:pr-60 2xl:pr-72">
        <div className="grid grid-cols-1 items-center justify-center gap-8 md:grid-cols-2 md:gap-8 lg:gap-12">
          <div className="flex flex-col items-center gap-4 text-center">
            <h1>Under Construction</h1>
            <p className="max-w-md text-base text-muted-foreground">
              Hey! Please check out this site later. We are doing some
              maintenance on it right now.
            </p>
            <div>
              <Button>Back To Home</Button>
            </div>
          </div>

          <div className="flex items-center justify-center">
            <img
              src="https://cdn.uiable.com/block/img-cunstruct-1.svg"
              alt="Under Construction Illustration"
              className="h-auto max-h-[260px] w-full max-w-[260px] object-contain select-none sm:max-h-[300px] sm:max-w-[300px] md:max-h-[340px] md:max-w-[340px] lg:max-h-[380px] lg:max-w-[374px]"
            />
          </div>
        </div>
      </div>
    </section>
  )
}
```