States

Error State

A full-page error state with an error code, a retry action, and a support link.

Something went wrong

An unexpected error occurred while processing your request. Please try again.

ERR_500 · request 8f2c

Installation

Install with the CLI, or add the packages and paste the source below.

CLI

Add Error State to your app with its source-owned dependencies.

bash

npx cooud-ui add error-state

Manual

Install the Cooud UI packages, then paste the block below.

pnpm add @cooud-ui/ui @cooud-ui/tokens @cooud-ui/theme

Usage

Copy the source for Error State. Every class is a semantic token, so it re-themes with your app.

tsx

import { Button, Reveal } from "@cooud-ui/ui";
import { AlertTriangle, RotateCw } from "lucide-react";

export function ErrorStateBlock() {
  return (
    <div className="flex min-h-[28rem] flex-col items-center justify-center px-6 py-16 text-center">
      <Reveal className="flex w-full max-w-md flex-col items-center gap-5">
        <span className="inline-flex size-14 items-center justify-center rounded-2xl bg-error/10 text-error">
          <AlertTriangle className="size-7" aria-hidden="true" />
        </span>
        <div className="flex flex-col gap-2">
          <h1 className="font-display text-2xl font-semibold text-fg">Something went wrong</h1>
          <p className="text-sm text-fg-secondary">
            An unexpected error occurred while processing your request. Please try again.
          </p>
        </div>
        <span className="rounded bg-surface-inset px-2 py-1 font-mono text-xs text-fg-tertiary">
          ERR_500 · request 8f2c
        </span>
        <div className="flex flex-wrap items-center justify-center gap-3">
          <Button variant="gradient">
            <RotateCw className="size-4" aria-hidden="true" />
            Try again
          </Button>
          <Button variant="outline">Contact support</Button>
        </div>
      </Reveal>
    </div>
  );
}