@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.

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`.

Install or copy

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.

1
Install
Terminal
```
pnpm add @zedtech/zedkit-ui
```
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}";
```

Import and render

src/app/page.tsxReplace the contents

"use client";

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

export default function Page() {
  return (
    <main className="p-8">
      <PromptInput sendLabel="Send" value={text} onChange={(e) => setText(e.target.value)} onSubmit={send} placeholder="Ask anything" aria-label="Message" />
    </main>
  );
}

Package version 1.6.2.

Usage and states

Simple

Enter sends, Shift+Enter adds a line.

import { PromptInput } from "@zedtech/zedkit-ui";
<PromptInput sendLabel="Send" value={text} onChange={(e) => setText(e.target.value)} onSubmit={send} 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"
/>

Wraps: <form>, <textarea>, IconButton

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.

Troubleshooting

Send stays disabled — value is trimmed; whitespace-only counts as empty. Field does not grow — use `field-sizing-content` (Tailwind v4) on the consumer stylesheet.

StatusDot

A small status dot with semantic tones (active, idle, success, warning, danger).

ProgressBar

An accessible progressbar with clamped value and label.

PromptInput

Install or copy

Install

Load the styles