Prompt Input · Aloe UI

A reusable prompt shell on a plain div. Put shadcn InputGroup inside and control size / variant from the root.

Prompt Input

import { PlusIcon, SendHorizontalIcon } from "lucide-react"import {  DropdownMenu,  DropdownMenuContent,  DropdownMenuGroup,  DropdownMenuItem,  DropdownMenuTrigger,} from "@/components/ui/dropdown-menu"import {  InputGroup,  InputGroupAddon,  InputGroupButton,  InputGroupTextarea,} from "@/components/ui/input-group"import { PromptInput } from "@/components/prompt-input"export function PromptInputDemo() {  return (    <div className="w-full max-w-xl">      <PromptInput>        <InputGroup>          <InputGroupTextarea placeholder="Ask anything…" aria-label="Prompt" />          <InputGroupAddon align="block-end">            <DropdownMenu>              <DropdownMenuTrigger                render={<InputGroupButton size="icon-xs" aria-label="Add" />}              >                <PlusIcon />              </DropdownMenuTrigger>              <DropdownMenuContent align="start">                <DropdownMenuGroup>                  <DropdownMenuItem>Upload files</DropdownMenuItem>                  <DropdownMenuItem>Add context</DropdownMenuItem>                </DropdownMenuGroup>              </DropdownMenuContent>            </DropdownMenu>            <InputGroupButton              className="ml-auto"              size="icon-xs"              aria-label="Send"            >              <SendHorizontalIcon />            </InputGroupButton>          </InputGroupAddon>        </InputGroup>      </PromptInput>    </div>  )}

Installation

pnpm dlx shadcn@latest add @aloe-ui/prompt-input

Or install from the public GitHub registry:

pnpm dlx shadcn@latest add gochitashvili/aloe-ui/prompt-input

Usage

import { PlusIcon, SendHorizontalIcon } from "lucide-react"

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupTextarea,
} from "@/components/ui/input-group"
import { PromptInput } from "@/components/prompt-input"

export function Example() {
  return (
    <PromptInput size="sm" variant="outline">
      <InputGroup>
        <InputGroupTextarea placeholder="Ask anything…" />
        <InputGroupAddon align="block-end">
          <DropdownMenu>
            <DropdownMenuTrigger
              render={<InputGroupButton size="icon-xs" aria-label="Add" />}
            >
              <PlusIcon />
            </DropdownMenuTrigger>
            <DropdownMenuContent align="start">
              <DropdownMenuGroup>
                <DropdownMenuItem>Upload files</DropdownMenuItem>
                <DropdownMenuItem>Add context</DropdownMenuItem>
              </DropdownMenuGroup>
            </DropdownMenuContent>
          </DropdownMenu>
          <InputGroupButton className="ml-auto" size="icon-xs" aria-label="Send">
            <SendHorizontalIcon />
          </InputGroupButton>
        </InputGroupAddon>
      </InputGroup>
    </PromptInput>
  )
}

Composition

PromptInput                 ← div + size/variant
└── InputGroup              ← composed outside
    ├── InputGroupTextarea
    └── InputGroupAddon

Size

Small

Size sm

import { PlusIcon, SendHorizontalIcon } from "lucide-react"import {  DropdownMenu,  DropdownMenuContent,  DropdownMenuGroup,  DropdownMenuItem,  DropdownMenuTrigger,} from "@/components/ui/dropdown-menu"import {  InputGroup,  InputGroupAddon,  InputGroupButton,  InputGroupTextarea,} from "@/components/ui/input-group"import { PromptInput } from "@/components/prompt-input"export function PromptInputSizeSm() {  return (    <div className="w-full max-w-xl">      <PromptInput size="sm">        <InputGroup>          <InputGroupTextarea placeholder="Ask anything…" aria-label="Prompt" />          <InputGroupAddon align="block-end">            <DropdownMenu>              <DropdownMenuTrigger                render={<InputGroupButton size="icon-xs" aria-label="Add" />}              >                <PlusIcon />              </DropdownMenuTrigger>              <DropdownMenuContent align="start">                <DropdownMenuGroup>                  <DropdownMenuItem>Upload files</DropdownMenuItem>                  <DropdownMenuItem>Add context</DropdownMenuItem>                </DropdownMenuGroup>              </DropdownMenuContent>            </DropdownMenu>            <InputGroupButton              className="ml-auto"              size="icon-xs"              aria-label="Send"            >              <SendHorizontalIcon />            </InputGroupButton>          </InputGroupAddon>        </InputGroup>      </PromptInput>    </div>  )}

Large

Size lg

import { PlusIcon, SendHorizontalIcon } from "lucide-react"import {  DropdownMenu,  DropdownMenuContent,  DropdownMenuGroup,  DropdownMenuItem,  DropdownMenuTrigger,} from "@/components/ui/dropdown-menu"import {  InputGroup,  InputGroupAddon,  InputGroupButton,  InputGroupTextarea,} from "@/components/ui/input-group"import { PromptInput } from "@/components/prompt-input"export function PromptInputSizeLg() {  return (    <div className="w-full max-w-xl">      <PromptInput size="lg">        <InputGroup>          <InputGroupTextarea placeholder="Ask anything…" aria-label="Prompt" />          <InputGroupAddon align="block-end">            <DropdownMenu>              <DropdownMenuTrigger                render={<InputGroupButton size="icon-xs" aria-label="Add" />}              >                <PlusIcon />              </DropdownMenuTrigger>              <DropdownMenuContent align="start">                <DropdownMenuGroup>                  <DropdownMenuItem>Upload files</DropdownMenuItem>                  <DropdownMenuItem>Add context</DropdownMenuItem>                </DropdownMenuGroup>              </DropdownMenuContent>            </DropdownMenu>            <InputGroupButton              className="ml-auto"              size="icon-xs"              aria-label="Send"            >              <SendHorizontalIcon />            </InputGroupButton>          </InputGroupAddon>        </InputGroup>      </PromptInput>    </div>  )}

Variant

Outline

import { PlusIcon, SendHorizontalIcon } from "lucide-react"import {  DropdownMenu,  DropdownMenuContent,  DropdownMenuGroup,  DropdownMenuItem,  DropdownMenuTrigger,} from "@/components/ui/dropdown-menu"import {  InputGroup,  InputGroupAddon,  InputGroupButton,  InputGroupTextarea,} from "@/components/ui/input-group"import { PromptInput } from "@/components/prompt-input"export function PromptInputOutline() {  return (    <div className="w-full max-w-xl">      <PromptInput variant="outline">        <InputGroup>          <InputGroupTextarea placeholder="Ask anything…" aria-label="Prompt" />          <InputGroupAddon align="block-end">            <DropdownMenu>              <DropdownMenuTrigger                render={<InputGroupButton size="icon-xs" aria-label="Add" />}              >                <PlusIcon />              </DropdownMenuTrigger>              <DropdownMenuContent align="start">                <DropdownMenuGroup>                  <DropdownMenuItem>Upload files</DropdownMenuItem>                  <DropdownMenuItem>Add context</DropdownMenuItem>                </DropdownMenuGroup>              </DropdownMenuContent>            </DropdownMenu>            <InputGroupButton              className="ml-auto"              size="icon-xs"              aria-label="Send"            >              <SendHorizontalIcon />            </InputGroupButton>          </InputGroupAddon>        </InputGroup>      </PromptInput>    </div>  )}

Ghost

import { PlusIcon, SendHorizontalIcon } from "lucide-react"import {  DropdownMenu,  DropdownMenuContent,  DropdownMenuGroup,  DropdownMenuItem,  DropdownMenuTrigger,} from "@/components/ui/dropdown-menu"import {  InputGroup,  InputGroupAddon,  InputGroupButton,  InputGroupTextarea,} from "@/components/ui/input-group"import { PromptInput } from "@/components/prompt-input"export function PromptInputGhost() {  return (    <div className="w-full max-w-xl">      <PromptInput variant="ghost">        <InputGroup>          <InputGroupTextarea placeholder="Ask anything…" aria-label="Prompt" />          <InputGroupAddon align="block-end">            <DropdownMenu>              <DropdownMenuTrigger                render={<InputGroupButton size="icon-xs" aria-label="Add" />}              >                <PlusIcon />              </DropdownMenuTrigger>              <DropdownMenuContent align="start">                <DropdownMenuGroup>                  <DropdownMenuItem>Upload files</DropdownMenuItem>                  <DropdownMenuItem>Add context</DropdownMenuItem>                </DropdownMenuGroup>              </DropdownMenuContent>            </DropdownMenu>            <InputGroupButton              className="ml-auto"              size="icon-xs"              aria-label="Send"            >              <SendHorizontalIcon />            </InputGroupButton>          </InputGroupAddon>        </InputGroup>      </PromptInput>    </div>  )}