@zedtech/zedkit-ui

PromptInput

One rounded surface with an auto-growing field and an in-field send control; Enter sends, Shift+Enter adds a line.

Stable@zedtech/zedkit-ui

Wraps: <form>, <textarea>, IconButton

Enter sends, Shift+Enter adds a line.

View props table

Who is it for?: Developers building assistant or messaging UIs.
When should I use it?: Chat-style briefs where the send affordance sits inside the composer.
When should I pick something else?: Plain forms with a separate submit row — use `Field` + `Textarea` + `Button`.

Use it

Simple

Enter sends, Shift+Enter adds a line.

import { PromptInput } from "@zedtech/zedkit-ui";
<PromptInput sendLabel="Send" defaultValue="Summarize this page" onSubmit={() => {}} placeholder="Ask anything" aria-label="Message" />

Complete

Send to see the busy state.

import { PromptInput } from "@zedtech/zedkit-ui";
<PromptInput
  id="chat"
  sendLabel="Send"
  value={text}
  onChange={(e) => setText(e.target.value)}
  onSubmit={send}
  busy={pending}
  onCancel={stop}
  cancelLabel="Stop"
  rows={1}
  maxLength={2000}
  aria-label="Message"
/>

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

"use client";

import { PromptInput } from "@zedtech/zedkit-ui";

export default function Page() {
  return (
    <main className="px-page-gutter py-section-sm">
      <PromptInput sendLabel="Send" defaultValue="Summarize this page" onSubmit={() => {}} placeholder="Ask anything" aria-label="Message" />
    </main>
  );
}

Package version 2.0.1.

Props

Prop

Type

Show inherited HTML attributes

Standard attributes from the underlying element. See MDN.

Prop

Type

Accessibility

Pass sendLabel (and cancelLabel when using cancel); the field keeps a visible label via aria-label or associated FieldLabel. Send and cancel use size="icon" tap targets aligned with --spacing-control-height.

Troubleshooting

Send stays disabled — live text is trimmed (controlled `value`, or uncontrolled `defaultValue` with no `value`); whitespace-only counts as empty. Field does not grow past `maxRows` (default 8) — it scrolls inside the composer. Consumers need `field-sizing-content` (Tailwind v4) on the stylesheet.

Label

Accessible labels that pair with any control via `htmlFor`.

Calendar

Token-styled month grid. Locale and prev/next names follow the kit messages.