@zedtech/zedkit-ui

Skeleton

Animated placeholder blocks that hold layout while data loads.

beta@zedtech/zedkit-ui

Wraps: (none)

View props table

Who is it for?: Developers covering loading states without layout shift.
When should I use it?: For content areas with known approximate shape.
When should I pick something else?: For progress with a known percentage — use ProgressBar instead.

Use it

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

Simple

import { Skeleton } from "@zedtech/zedkit-ui";
<Skeleton className="h-skeleton-line w-skeleton-bar" />

Text lines

import { Skeleton } from "@zedtech/zedkit-ui";
<Skeleton className="h-skeleton-line w-full" /> // stack lines for text blocks; shape is all className

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

export default function Page() {
  return (
    <main className="px-page-gutter py-section-sm">
      <Skeleton className="h-skeleton-line w-skeleton-bar" />
    </main>
  );
}

Package version 2.0.1.

Props

No props of its own. It accepts the native attributes below.

Show inherited HTML attributes

Standard attributes from the underlying element. See MDN.

Prop

Type

Accessibility

Renders a plain div with no semantics — empty blocks are ignored by assistive tech; set aria-busy on the loading container. Corners follow identity --radius-md via rounded-md.

Troubleshooting

No pulse — the pulse is `motion-safe:animate-pulse`: static under reduced-motion, and it needs Tailwind's default theme. Wrong shape — size comes only from your `className`; the brick ships no dimensions.

ErrorState

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

StatusDot

A small status dot with semantic tones (active, idle, success, warning, danger).