Result

Component 2

About

A whole-page status display for outcomes like 404, 403, server error or success, with an icon, title, description and action buttons so the user always has a way forward.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Result to your project and fits it to your theme.

Code

How Result is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { Button } from "@/components/ui/button";
import { Result } from "@/components/ui/result";

export default function ResultDemo() {
  return (
    <Result
      className="w-full"
      status="404"
      compact
      title="We could not find that page"
      description="The link may be out of date, or the page may have moved."
      actions={<Button size="sm">Go home</Button>}
    />
  );
}