@zedtech/zedkit-ui

ProgressBar

An accessible progressbar with clamped value and label.

Stable@zedtech/zedkit-ui

Wraps: (none)

View props table

Who is it for?: Developers reporting measurable progress (uploads, jobs, wizards).
When should I use it?: When you can report a percentage or fraction done.
When should I pick something else?: For unknown-shape loading — use Skeleton instead.

Use it

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

Simple

import { ProgressBar } from "@zedtech/zedkit-ui";
<ProgressBar value={40} label="Uploading report" /> // role=progressbar, value clamped to 0..max

Complete

october-orders.csv, 2.4 MB

import { ProgressBar } from "@zedtech/zedkit-ui";
<ProgressBar value={100} label="Upload complete" />

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

export default function Page() {
  return (
    <main className="px-page-gutter py-section-sm">
      <ProgressBar value={40} label="Uploading report" /> // role=progressbar, value clamped to 0..max
    </main>
  );
}

Package version 2.0.1.

Props

Prop

Type

Accessibility

Root carries role="progressbar" with clamped value; keep the label screen-only and pair with visible text.

Troubleshooting

Bar looks empty — `NaN` and out-of-range values clamp (negative to 0, over max to full). Screen reader silent — the bar is a plain progressbar; announce milestones with a `StatusLabel` beside it.

StatusDot

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

Checkmark

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