Skip to content

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

Free

Simple AI Prompt Input Group for Solid

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

UI library: Ark UI

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 Solid, Ark UI does not rewrite the prompt or count the characters.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

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

Usage

<div class="flex w-full max-w-2xl flex-col gap-4">
    <InputGroup class="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 class="ms-auto">0/4000</InputGroupText>
        <Separator class="h-4!" orientation="vertical" />
        <InputGroupButton aria-label="Send" pill size="icon-xs" variant="default">
          <ArrowUpIcon aria-hidden="true" />
        </InputGroupButton>
      </InputGroupAddon>
    </InputGroup>
    <small class="text-center text-muted-foreground">
      For better AI components, check out{" "}
      <a class="underline" href="https://ai-sdk.dev/elements/overview">
        AI Elements
      </a>
    </small>
  </div>

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