Skip to content
zedkit
@zedtech/zedkit-ui

FourStates

One host per state: Spinner, EmptyState, ErrorState, then the filled list.

beta@zedtech/zedkit-ui

Wraps: (none)

Loading invoices

View props table
Who is it for?
Developers swapping a list between wait, nothing, failure, and rows.
When should I use it?
On a list page that loads from the network.
When should I pick something else?
For an empty row inside a table body — use `DataTableEmpty`. For a field error — use `FieldError`.

Use it

Loading
import { Spinner, Text } from "@zedtech/zedkit-ui";
<Spinner label="Loading invoices" />
<Text>Loading invoices</Text>

Empty

No invoices

Create an invoice to send to a client.

import { Button, EmptyState } from "@zedtech/zedkit-ui";
<EmptyState
  title="No invoices"
  description="Create an invoice to send to a client."
  actions={<Button>New invoice</Button>}
/>

Error

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>}
/>

Success

Ada36
Bob30
import { DataTable, createDataTableColumns } from "@zedtech/zedkit-ui";
const helper = createDataTableColumns<{ name: string; age: number }>();
const columns = [helper.accessor("name", { header: "Name" })];
<DataTable columns={columns} data={[{ name: "Ada", age: 36 }]} />

Kit not installed yet?

This ships on npm only; there is no copy-source brick for it.

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 { Spinner, Text } from "@zedtech/zedkit-ui";

export default function Page() {
  return (
    <main className="px-page-gutter py-section-sm">
      <Spinner label="Loading invoices" />
      <Text>Loading invoices</Text>
    </main>
  );
}

Package version 2.0.1.

Props

Prop

Type

Accessibility

Render one state at a time. Spinner is role="status"; EmptyState uses a heading; ErrorState is role="alert". Keep the next step in actions.

Troubleshooting

Two live regions at once — do not nest ErrorState inside another alert. The spinner has no visible name — keep text beside it or pass `label`.

Spinner

A spinning icon with an accessible name from the kit messages (`loading`).

Surface

One panel surface: solid card, popover or glass, elevation `0`–`3` with token shadows, border, radius and optional padding.

On this page

PreviewGuidanceUse itKit not installed yet?PropsAccessibilityRelatedTroubleshooting