@zedtech/zedkit-ui

DropdownMenu

Action menu (trigger + items) with keyboard and axe coverage. Not a form select.

beta@zedtech/zedkit-ui

Who is it for?: Developers grouping a few actions behind one button.
When should I use it?: For Duplicate, Archive, and similar verbs on one row or page.
When should I pick something else?: For choosing one form value — use Select. For a destructive confirm — use ConfirmDialog after the item is chosen.

Use it

Simple

import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "@zedtech/zedkit-ui";
<DropdownMenu>
  <DropdownMenuTrigger asChild><Button variant="outline">Actions</Button></DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem>Duplicate invoice</DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem>Archive invoice</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Kit not installed yet?

This ships on npm only; there is no copy-source brick for it.

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 { Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "@zedtech/zedkit-ui";

export default function Page() {
  return (
    <main className="px-page-gutter py-section-sm">
      <DropdownMenu>
        <DropdownMenuTrigger asChild><Button variant="outline">Actions</Button></DropdownMenuTrigger>
        <DropdownMenuContent>
          <DropdownMenuItem>Duplicate invoice</DropdownMenuItem>
          <DropdownMenuSeparator />
          <DropdownMenuItem>Archive invoice</DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </main>
  );
}

Package version 2.0.1.

Props

Accessibility

Content is role="menu"; items are role="menuitem". Arrow keys move, Enter chooses, Escape closes. The trigger name should say what the menu is (Actions), not a verb that sounds like it already ran.

Popover

Anchored panel (trigger + content) that stays while the reader looks, then closes on Escape or outside click.

Tooltip

Instant hover/focus hint. Each Tooltip ships its own provider (`delayDuration` 0).