Skip to content
zedkit
@zedtech/zedkit-ui

ErrorState

Say what broke and put retry or back in `actions`.

beta@zedtech/zedkit-ui

Wraps: (none)

View props table
Who is it for?
Developers showing a failed load or save on the page.
When should I use it?
When a page or panel failed to load or save.
When should I pick something else?
For a field error — use `FieldError`. For a brief confirmation — use Toaster.

Use it

Examples import from the package. With copied source, import from @/components/ui/error-state instead.

Load error
import { ErrorState } from "@zedtech/zedkit-ui";
<ErrorState
  title="Could not load invoices"
  description="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>}
/>

Kit not installed yet?

You get
Every component from one import, with the theme tokens included. Updates arrive with your package manager.
You need
  • React 19 and Tailwind CSS 4, for example a Next.js app created with the Tailwind option.

  1. Install

    Terminal
    pnpm add @zedtech/zedkit-ui @fontsource-variable/inter @fontsource-variable/space-grotesk

  2. Load the styles

    Tailwind does not scan node_modules, so the @source line points it at the kit's class names. The path is relative to this file.

    src/app/globals.cssReplace the contents
    @import "tailwindcss";
@import "@zedtech/zedkit-ui/styles.css";
@source "../../node_modules/@zedtech/zedkit-ui/src/**/*.{ts,tsx}";
@source not "../../node_modules/@zedtech/zedkit-ui/src/**/*.test.*";

  3. Pick a look

    Set data-identity="glass" on <html> so the finished app matches the site. Fresh app: replace src/app/layout.tsx. Existing app: merge, and keep ThemeProvider and other providers.

    src/app/layout.tsxReplace the contents
    import "./globals.css";
import "./fonts";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" data-identity="glass">
      <body>{children}</body>
    </html>
  );
}

  4. Load the fonts

    The Glass look uses Inter and Space Grotesk; these imports self-host them.

    src/app/fonts.tsCreate the file
    import "@fontsource-variable/inter";
import "@fontsource-variable/space-grotesk";

  5. Import and render

    src/app/page.tsxReplace the contents
    import { ErrorState } from "@zedtech/zedkit-ui";

export default function Page() {
  return (
    <main className="px-page-gutter py-section-sm">
      <ErrorState
        title="Could not load invoices"
        description="Check your connection and try again."
      />
    </main>
  );
}

Package version 2.0.1.

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.

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.

EmptyState

Name what is missing and put the next step in `actions`.

Skeleton

Animated placeholder blocks that hold layout while data loads.

On this page

PreviewGuidanceUse itKit not installed yet?PropsAccessibilityRelatedTroubleshooting