Home / Snippets / UI Components /
Coming soon page
A hype-safe teaser: gradient frame, waitlist controls shown disabled in the static demo, and a clear launch note.
Nimbus Sheets is almost here
Realtime co-editing with offline queueing — we are polishing sync conflict UI before public beta. Join the waitlist; no spam, launch email only.
Demo fields are inert — wire your form action separately.
Widely Supported
Quick implementation
.coming-soon-card {
border-radius: var(--radius-lg);
padding: 1px;
background: linear-gradient(135deg, oklch(0.7 0.18 280), oklch(0.65 0.14 200));
}
.coming-soon-card__inner {
border-radius: calc(var(--radius-lg) - 1px);
background: var(--card);
padding: 1.5rem;
}
Prompt this to your LLM
Gradient border trick and disabled form for static export.
Implement a coming soon block.
Required classes: .coming-soon-demo, .coming-soon-card (use an inner div for padding if needed).
Include logo mark, heading, paragraph, email input + button (disabled for static demo), small disclaimer.
Gradient hairline border via padding + gradient background.
Return HTML + CSS.
Why this matters in 2026
Pre-launch pages double as SEO landing; structure them so marketing can swap copy without touching layout math.
The logic
One-pixel gradient wrapper fakes a border on any radius; inner clips to the same curve.
Accessibility & performance
Disabled inputs are not submitted; when you go live, remove disabled and add server validation. Label the email field for screen readers.