@zedtech/zedkit-ui

Toaster

A root toaster plus toast() calls for transient notifications.

Stable@zedtech/zedkit-ui

Wraps: sonner

View props table

Who is it for?: Developers confirming background outcomes (saved, failed, copied).
When should I use it?: For outcomes that do not need the user's reply.
When should I pick something else?: For errors needing action — use Alert or Dialog instead.

Use it

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

Simple

import { Toaster, toast } from "@zedtech/zedkit-ui";
<Toaster /> // once near the root, then toast("Saved") anywhere

Error toast

import { toast } from "@zedtech/zedkit-ui";
toast.error("Upload failed"); // typed variants: success | error | info | warning

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

export default function Page() {
  return (
    <main className="px-page-gutter py-section-sm">
      <Toaster /> // once near the root, then toast("Saved") anywhere
    </main>
  );
}

Package version 2.0.1.

Props

Prop

Type

Accessibility

The viewport announces via an aria-live polite region — keep toasts short, one outcome each. Styling maps toast slots to theme tokens only.

Troubleshooting

No toast appears — render `<Toaster />` once near the app root, then call `toast()`. Wrong colors — toast slots map to semantic theme tokens, so the theme stylesheet must be loaded.

Badge

Small status/count pills with semantic variants.

IconLabel

Fixed-size muted icon + label row; icon is `aria-hidden`, label stays readable.