# ChromeMessage

> The surface for 404 and error screens: a $ command, an output line, a serif title, a note and an action. No hooks, so a server component can render it.

Section: Feedback. Docs: https://entrepta.vercel.app/docs/components/chrome-message

## Install

```bash
npx @entrepta/cli@latest add chrome-message
```

Files: `feedback/chrome-message.tsx`.
npm packages: `class-variance-authority`.

## Usage

```tsx
import { ChromeMessage } from "@/components/entrepta/chrome-message"

// app/not-found.tsx
export default function NotFound() {
  return (
    <ChromeMessage
      command="cat ./this-page"
      output="cat: ./this-page: No such file or directory"
      title="Page not found."
      note="it moved, or it never existed"
      action={<Link href="/">go home</Link>}
    />
  )
}

// app/error.tsx: an error boundary is a client component
"use client"

export default function Error({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
  return (
    <ChromeMessage
      accent="error"
      command="npm run page"
      title="Something broke."
      note="the error was logged"
      action={<Button onClick={reset}>try again</Button>}
    >
      {error.digest && <p className="font-mono text-mono-sm">digest: {error.digest}</p>}
    </ChromeMessage>
  )
}
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `command` | `string` | - | The command after the $ |
| `accent` | `"brand" \| "error"` | "brand" | Color of the $ |
| `output` | `string` | - | A terminal output line |
| `title` | `ReactNode` | - | Serif h1 |
| `note` | `ReactNode` | - | Mono line under the title |
| `action` | `ReactNode` | - | A way back |