@zedtech/zedkit-ui

Checkmark

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

Stable@zedtech/zedkit-ui

Wraps: (none)

View props table

Who is it for?: Developers confirming a completed action (saved, sent, done).
When should I use it?: For success confirmations right after the action completes.
When should I pick something else?: As a persistent status icon — use StatusDot or Badge instead.

Use it

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

Simple

import { Checkmark } from "@zedtech/zedkit-ui";
<Checkmark label="Saved" /> // draws once, static under reduced motion; omit label when decorative

Decorative

Order #4821 confirmed

A receipt is on its way to camille@example.com.

import { Checkmark } from "@zedtech/zedkit-ui";
<Checkmark /> // decorative, pair with visible 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 { Checkmark } from "@zedtech/zedkit-ui";

export default function Page() {
  return (
    <main className="px-page-gutter py-section-sm">
      <Checkmark label="Saved" /> // draws once, static under reduced motion; omit label when decorative
    </main>
  );
}

Package version 2.0.1.

Props

Prop

Type

Accessibility

Draws once under motion-safe (static full check under reduced motion); omit label when decorative.

Troubleshooting

No draw animation — the path animates only under `motion-safe`; reduced motion shows the static check by design. Announced twice — pass `label` once (it names the `role="img"`); nearby text should not repeat it. Registry copies without the theme show the static check (the `zk-check-draw` keyframes live in `styles.css`).

ProgressBar

An accessible progressbar with clamped value and label.

Skeletons

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