Browse components
Prompt Bar
AI prompt input that grows with your text, holds springy attachment chips, and morphs its send arrow into a stop button ringed by a spinner while generating.
Installation
npx shadcn@latest add @glint-ui/prompt-barFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/prompt-bar.json
Usage
import { PromptBar } from "@/components/ui/prompt-bar";
<PromptBar
onSubmit={(text, files) => streamAnswer(text, files)}
onStop={() => controller.abort()}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| placeholder | string | "Ask anything…" | Placeholder text. |
| maxRows | number | 6 | Lines the field grows to before it scrolls. |
| generating | boolean | false | Force the generating state. |
| onSubmit | ReactNode | — | (text, files) => void | Promise. A returned promise shows the generating state until it settles. |
| onStop | ReactNode | — | Called when stop is pressed while generating. |
| defaultFiles | ReactNode | — | Files attached on mount. |
| className | string | — | Extra classes for the root element. |