Error Card

Centered card for an error state with a status icon, label, and description for every HttpStatus, translation support, and manual overrides.

Multiple Choices

The request has multiple possible responses for the client to choose from.

Installation

bash

pnpm dlx shadcn@latest add @cs/error-card

tsx

import { ErrorCard } from "@/components/cs/error-card"
import { HttpStatus } from "@/lib/cs/http-status"

tsx

<ErrorCard httpStatus={HttpStatus.NotFound} />

Centered card for an error state, with built-in icon, label, and description for every HttpStatus.

Name	Type	Default	Description
children	ReactNode	-	Content rendered below the description.
className	string	-	Additional CSS classes applied to the card.
description	ReactNode	-	Card description. Takes precedence over `translationsRootKey` and `httpStatus`.
httpStatus	HttpStatus	-	HTTP status used to look up a default label, description, and icon.
icon	ReactNode	-	Icon displayed above the title. Defaults to an icon matching `httpStatus`.
label	ReactNode	-	Card title. Takes precedence over `translationsRootKey` and `httpStatus`.
translationsRootKey	string	-	Namespace used to resolve `{httpStatus}label` and `{httpStatus}description` keys, such as `404label` and `404description`. Takes precedence over the built-in `httpStatus` messages; missing keys are ignored.