Page sections

Error / not found

An error state for failed loads or 404s, with retry and recovery actions.

Something went wrong

We couldn't load this page. The link may be broken or the resource may have been moved. Try again, or head back to your dashboard.

Installation

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

CLI

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

bash

npx cooud-ui add empty-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 / not found. Every class is a semantic token, so it re-themes with your app.

tsx

import {
  Button,
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyIcon,
  EmptyTitle,
} from "@cooud-ui/ui";
import { FileQuestion, RefreshCw } from "lucide-react";

export function EmptyStateErrorBlock() {
  return (
    <Empty className="border-error/30 bg-surface-raised">
      <EmptyIcon className="bg-error/15 text-error">
        <FileQuestion aria-hidden="true" />
      </EmptyIcon>
      <EmptyTitle>Something went wrong</EmptyTitle>
      <EmptyDescription>
        We couldn&apos;t load this page. The link may be broken or the resource may have been
        moved. Try again, or head back to your dashboard.
      </EmptyDescription>
      <EmptyContent>
        <Button variant="outline" size="sm">
          Back to dashboard
        </Button>
        <Button variant="gradient" size="sm">
          <RefreshCw className="size-4" aria-hidden="true" />
          Try again
        </Button>
      </EmptyContent>
    </Empty>
  );
}

Something went wrong

We couldn't load this page. The link may be broken or the resource may have been moved. Try again, or head back to your dashboard.