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
uino-js

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.