Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Input Group examples · AI

Simple AI Prompt Input Group for React

An AI prompt box with an enhance button, a character limit and a send button under the textarea.

Framework
UI library

The smallest useful AI composer: a textarea, then a row with a sparkles button to improve the prompt, a 0/4000 character limit, a short divider and a round send button. Start here and add menus only when the product needs them.

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

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.

All 39 input group examples