Skip to content
zedkit
@zedtech/zedkit-ui

Alert

Notice/error callouts with title and description.

Stable@zedtech/zedkit-ui

Wraps: class-variance-authority

View props table
Who is it for?
Developers surfacing notices, warnings and errors inline.
When should I use it?
For states tied to page content (load errors, warnings).
When should I pick something else?
For transient confirmations — use Toaster instead.

Use it

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

Simple
import { Alert, AlertDescription, AlertTitle } from "@zedtech/zedkit-ui";
<Alert><AlertTitle>Heads up</AlertTitle>
<AlertDescription>Something worth knowing.</AlertDescription></Alert>
<Alert variant="destructive"><AlertTitle>Failed</AlertTitle>
<AlertDescription>Something went wrong.</AlertDescription></Alert>

As a section (asChild)

import { Alert, AlertDescription, AlertTitle } from "@zedtech/zedkit-ui";
<Alert asChild>
  <section aria-label="Maintenance notice">
    <AlertTitle>Scheduled maintenance</AlertTitle>
    <AlertDescription>Sunday 02:00–03:00 UTC.</AlertDescription>
  </section>
</Alert>

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.

  1. Install

    Terminal
    pnpm add @zedtech/zedkit-ui @fontsource-variable/inter @fontsource-variable/space-grotesk

  2. 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.*";

  3. 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";

  5. Import and render

    src/app/page.tsxReplace the contents
    import { Alert, AlertDescription, AlertTitle } from "@zedtech/zedkit-ui";

export default function Page() {
  return (
    <main className="px-page-gutter py-section-sm">
      <Alert><AlertTitle>Heads up</AlertTitle>
      <AlertDescription>Something worth knowing.</AlertDescription></Alert>
      <Alert variant="destructive"><AlertTitle>Failed</AlertTitle>
      <AlertDescription>Something went wrong.</AlertDescription></Alert>
    </main>
  );
}

Package version 2.0.1.

Props

Prop

Type

Show inherited HTML attributes

Standard attributes from the underlying element. See MDN.

Prop

Type

Accessibility

Root carries role="alert" (announced assertively). Use asChild to render another element; keep one title plus one description.

Troubleshooting

Icon misaligned — the svg slot expects one `lucide-react` icon as the first child (positioned with `top-alert-icon-offset` / `left-alert-icon-offset`). Block padding is `py-alert-block`. Double announcement — one `role="alert"` per notice; repeated renders re-announce.

ToolCallRow

Render a live assistant log from collapsed tool-call rows, thinking text, finished markdown, and grouped consecutive tool calls.

Theme

One CSS import plus a source line gives the full token set; `next-themes` (install it alongside the kit) toggles the `dark` class.

On this page

PreviewGuidanceUse itKit not installed yet?PropsAccessibilityRelatedTroubleshooting