shadcn.io is not affiliated with official shadcn/ui
Under Construction Notify Error Block for Radix UI
A full-height holding page for a marketplace that is not open yet: an email form that checks itself and notes the address in place, beside the four phases of the build as a vertical Steps with a bar for the schedule.
Installation
Overview
Hold the door open for visitors who arrive early, with this under construction block for React with Radix UI. It's the holding page of Plankby, a second-hand furniture marketplace: the page's rails run its full height and one band crosses the screen, topped by a strip of diagonal hatching that is the page's only decoration. At the start come the product's mark, the heading, one sentence with the month it opens and the one email form, with a Shine Button, the only colored control, that says "Tell me when it launches". At the end, after a divider with plus marks, a Progress bar says how much of the schedule has passed and a read-only vertical Steps lists the four phases (design, build, test, launch) with their months, the finished one ticked and the current one outlined. On a phone the phases sit under the form. It's built from Steps, Progress, Shine Button, Field, Input and Guides, with a CSS entrance only. For launches, closed betas and any product that opens later.
FAQ
What does the form check, and where does the address go?
It checks on press, never before: an empty field says "Enter your email address.", an address without an at sign or a dot says "Enter a full email address.", and focus goes to the field. A good address waits 700 ms behind a busy button, then the form is replaced in its own space by "Noted, in this demo", which shows the address and says no email is sent. "Use a different address" returns to the form with focus on the field. To go live, send the address to your list provider where the code says so.
Where do the months and the percent come from?
Each phase has a typed start and end date, and AS_OF is a fixed "today", so a phase is done once its end has passed and the first unfinished phase is the current one. The bar is the share of the whole schedule's days that have passed, and the launch month in the sentence is the last phase's end. Nothing reads the clock, so the page looks the same on the server and in every time zone. Say "of the schedule", not "complete": time passed isn't work done.
Is the phase list interactive?
No. It's a read-only list of Steps: there are no triggers, so nothing can be pressed or jump ahead; it is a drawing of where the build stands, and each phase carries its state in words ("Done", "In progress", "Planned") as well as in its marker. The marker numbers and rail are decorative.
What is the hatched strip?
A purely decorative band, aria-hidden, drawn with a repeating CSS gradient in the foreground color at 10%, so it follows every theme and both color modes. It's the only decoration on the page; delete the one div to remove it.