Koala UI

Status

The pages a visitor lands on when something is missing, broken or not ready: three not-found pages, a server error, a maintenance window, a coming-soon page, a waitlist confirmation and the status page itself.

Variant 1

Variant 2

Pro

Variant 3

Pro

Variant 4

Pro

Variant 5

Pro

Variant 6

Pro

Variant 7

Pro

Variant 8

Pro

Installation#

# One-time setup (tokens + lib helpers)npx koalaui-cli@latest init# Add this component (its dependencies come along)npx koalaui-cli@latest add section-header

Built from#

Each status page opens on a SectionHeader with its heading set as the page's H1. The not-found pages add a search field or the most visited pages; the server error lays its details out in a DescriptionList; the maintenance page draws its steps with the ChecklistMark under a Progress bar; the status page is one Heatmap row per service over an ActivityFeed of incidents; and the coming-soon page drops in NewsletterForm, which brings its own loading and success states.

Responsive#

The single-column pages hold a screen's worth of height and keep their content in the middle of it at every width. The split pages stack below lg, photo or numeral first, so the way out is never pushed off a phone's first screen. On the status page the bars narrow to a few pixels each on a phone, so the whole 90 days still fits the width.

FAQ#

Render a not-found section from app/not-found.tsx and the server error from app/error.tsx, between your navbar and footer. Next.js serves them with the right status, and error.tsx hands you the error to fill the reference from.