Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Simple AI Prompt Input Group for Ark UI

A prompt box with an enhance button, a fixed 0/4000 count, and a round send button under the textarea.

The small prompt layout. Under the textarea: a sparkles button named Enhance prompt, the text 0/4000, a short divider, and a round send button. The sparkles button does nothing, and the count does not change.

Start here, and add menus only when you need them. If you only need the writing area, use a Textarea. In React, Ark UI does not rewrite the prompt or count the characters.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Input Group anatomy: root, addon, input, text, button

Usage

<div className="flex w-full max-w-2xl flex-col gap-4">
  <InputGroup className="bg-background">
    <InputGroupTextarea
      aria-label="Prompt"
      placeholder="Ask me anything..."
    />
    <InputGroupAddon align="block-end">
      <InputGroupButton
        aria-label="Enhance prompt"
        size="icon-xs"
        variant="ghost"
      >
        <SparklesIcon aria-hidden="true" />
      </InputGroupButton>
      <InputGroupText className="ms-auto">0/4000</InputGroupText>
      <Separator className="h-4!" orientation="vertical" />
      <InputGroupButton
        aria-label="Send"
        pill
        size="icon-xs"
        variant="default"
      >
        <ArrowUpIcon aria-hidden="true" />
      </InputGroupButton>
    </InputGroupAddon>
  </InputGroup>
  <small className="text-center text-muted-foreground">
    For better AI components, check out{" "}
    <a className="underline" href="https://ai-sdk.dev/elements/overview">
      AI Elements
    </a>
{/* The rest of the file is under Installation. */}

FAQ

What sits under the prompt?

An InputGroupAddon with align="block-end", written after InputGroupTextarea, holding the sparkles button, an InputGroupText with 0/4000, a vertical Separator and the send button.

What does the sparkles button do?

It's a ghost, icon-only InputGroupButton named Enhance prompt, with no action in the demo. Use it to rewrite or expand the prompt before sending.

Does 0/4000 track the prompt?

No, it's fixed text. Keep the textarea's value in state, render its length there, and set maxLength on InputGroupTextarea to enforce the limit.

What is the short line before send?

A Separator with orientation="vertical" and h-4!, between the count and the send button.

How is the send button styled?

variant="default", size="icon-xs" and pill make a small filled circle with an arrow; aria-label="Send" names it. It's enabled here; disable it while the prompt is empty.

Does clicking the bottom row focus the textarea?

A click on the addon's empty space focuses the first input in the group, and this group has a textarea, not an input, so nothing is focused. Clicks on its buttons stay on the buttons.

API Reference

Input Group

Sets aria-label="Prompt", placeholder="Ask me anything...", align="block-end", aria-label="Enhance prompt", size="icon-xs" and variant="ghost". The rest is on the Input Group page.

Separator

Sets orientation="vertical". The rest is on the Separator page.

All 39 input group examples