@zedtech/zedkit-ui

Spinner

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

beta@zedtech/zedkit-ui

Wraps: lucide-react

View props table

Who is it for?: Developers naming a short wait next to a label.
When should I use it?: Next to visible copy that names what is loading.
When should I pick something else?: For a zone with a known shape — use Skeleton. For a known percent — use ProgressBar.

Use it

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

Default name

import { Spinner } from "@zedtech/zedkit-ui";
<Spinner />

Named wait

Saving invoices

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

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

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

Package version 2.0.1.

Props

Prop

Type

Accessibility

role="status" plus aria-label. The icon is aria-hidden. Keep visible text next to it that names the wait; a label prop overrides the kit loading string. The spin uses motion-safe:animate-spin.

Troubleshooting

Screen readers say only "Loading" — pass `label` that names the operation, or keep visible text beside the spinner. The icon does not spin — `motion-safe:animate-spin` is static under reduced motion. Used as a full-page placeholder — prefer Skeleton so layout does not jump.

OfflineNote

A hook reporting browser online state plus an alert-style note with overridable wording.

FourStates

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