Skip to content
zedkit
@zedtech/zedkit-ui

EmptyState

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

beta@zedtech/zedkit-ui

Wraps: (none)

No invoices

Create an invoice to send to a client.

View props table
Who is it for?
Developers filling a list or panel when there is nothing to show.
When should I use it?
For a page or panel with zero rows.
When should I pick something else?
For an empty table body inside `DataTable` — use `DataTableEmpty`.

Use it

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

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

With a next step

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

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

export default function Page() {
  return (
    <main className="px-page-gutter py-section-sm">
      <EmptyState title="No invoices" description="Create an invoice to send to a client." />
    </main>
  );
}

Package version 2.0.1.

Props

Prop

Type

Accessibility

The title is a heading. Write the description as what is missing plus the next step; put that step in actions so keyboard users can take it. Do not rely on colour alone.

Troubleshooting

The heading is missing — pass `title`. The next step is only in the description — pass it as `actions` so it is a control. A table cell is empty — use `DataTableEmpty` inside the table, not this host.

Card

Cards with header/title/description/content/footer slots.

ErrorState

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

On this page

PreviewGuidanceUse itKit not installed yet?PropsAccessibilityRelatedTroubleshooting