Show what broke and a next step

Install

pnpm add @zedtech/zedkit-ui

Package version: 0.6.4 (changesets).

Import

import { ErrorState, ErrorStateProps } from "@zedtech/zedkit-ui";

Registry source

Copy into your app after npx shadcn add (imports are rewritten for consumers).

error-state.tsx

import type * as React from "react";

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { cn } from "@/lib/utils";

export interface ErrorStateProps {
  title?: React.ReactNode;
  description: React.ReactNode;
  actions?: React.ReactNode;
  className?: string;
}

/** Error zone: what broke, plus retry/back in `actions`. */
export function ErrorState({ title, description, actions, className }: ErrorStateProps) {
  return (
    <Alert data-slot="error-state" variant="destructive" className={cn(className)}>
      {title ? <AlertTitle>{title}</AlertTitle> : null}
      <AlertDescription>{description}</AlertDescription>
      {actions ? <div className="mt-2 flex flex-wrap gap-2">{actions}</div> : null}
    </Alert>
  );
}

Exports

2 symbols from this import. Wraps: `(none)`

Preview

@zedtech/zedkit-ui — ErrorState, ErrorStateProps

Preview

Could not load invoices

Check your connection and try again.

View props table

Examples

Load error

import { ErrorState } from "@zedtech/zedkit-ui";
<ErrorState
  title="Could not load invoices"
  description="Check your connection and try again."
/>

Live preview: With retry

Preview

Could not load invoices

Check your connection and try again.

With retry

import { Button, ErrorState } from "@zedtech/zedkit-ui";
<ErrorState
  title="Could not load invoices"
  description="Check your connection and try again."
  actions={<Button variant="outline">Try again</Button>}
/>

Props

Prop

Type

Accessibility

Root is an alert (`role="alert"`). Render it when the failure appears, not on every page load. Title plus description carry the meaning; `actions` is the next step.

Call out a notice or an error state Show an empty zone with a next step

Troubleshooting

The alert is announced twice — do not wrap it in another live region. The retry control is only in the text — pass it as `actions`. A single field failed — use `FieldError` on that field.

Show what broke and a next step

Install

Import

Registry source

Exports

Preview

Could not load invoices

Examples

Could not load invoices

Props

Accessibility

Related

Troubleshooting