@zedtech/zedkit-ui

Skeletons

One faithful loading skeleton per kit component shape, each a named live zone.

Stable@zedtech/zedkit-ui

Wraps: (none)

View props table

Who is it for?: Developers loading async zones without layout shift (pages, cards, tables, panels).
When should I use it?: As a `Suspense` fallback matching the component that will land.
When should I pick something else?: For freeform blocks — use a plain `Skeleton`; for named operations — use `StatusLabel`.

Use it

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

In Suspense

import { Suspense } from "react";
import { Card, CardContent, CardSkeleton } from "@zedtech/zedkit-ui";
<Suspense fallback={<CardSkeleton label="Loading report" />}>
  <Card><CardContent>Annual report.</CardContent></Card>
</Suspense>

Standalone

import { CardSkeleton } from "@zedtech/zedkit-ui";
{loading ? <CardSkeleton label="Loading report" /> : <ReportCard />}

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.

Install

Terminal

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

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.*";

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";
```

Import and render

src/app/page.tsxReplace the contents

import { Suspense } from "react";
import { Card, CardContent, CardSkeleton } from "@zedtech/zedkit-ui";

export default function Page() {
  return (
    <main className="px-page-gutter py-section-sm">
      <Suspense fallback={<CardSkeleton label="Loading report" />}>
        <Card><CardContent>Annual report.</CardContent></Card>
      </Suspense>
    </main>
  );
}

Package version 2.0.1.

Props

Prop

Type

Show inherited HTML attributes

Standard attributes from the underlying element. See MDN.

Prop

Type

Accessibility

role="status" with aria-label from the label prop (default "Loading") — screen readers announce the zone; the label is never shown visually.

Troubleshooting

Generic announcement — pass a specific `label` per zone (default is "Loading"). Layout shifts when content lands — the skeleton mirrors card padding/stack tokens, but a mismatched container width still shifts. DetailPanelSkeleton is the boxed-list shape only — it does not follow `variant="grid"`.

Checkmark

An animated checkmark that draws once (static under reduced motion).

StatusLabel

A named live-region label for the current operation state (loading, saved, error…).