# Prompt Composer

> A prompt bar with ghost plus, ink send, and rounded, pill, ghost, and compact variants.

- Category: Forms
- Kind: component
- Page: https://uaiblocks.dev/components/prompt-composer
- Registry item: https://uaiblocks.dev/r/prompt-composer.json
- Source: https://github.com/victor-teles/uai/blob/main/src/registry/uai/components/prompt-composer.tsx

## Install

```bash
bunx shadcn@latest add https://uaiblocks.dev/r/prompt-composer.json
```

## Usage

```tsx
"use client";

import { FileText, Globe } from "lucide-react";
import {
  PromptComposer,
  PromptComposerActions,
  PromptComposerAdd,
  PromptComposerAddItem,
  PromptComposerFileItem,
  PromptComposerInput,
  PromptComposerModelSelect,
  PromptComposerSubmit,
  type PromptComposerVariant,
} from "@/components/ui/uai/prompt-composer";

const composerModels = [
  { id: "your-model", label: "Your model" },
  { id: "fast", label: "Fast" },
  { id: "precise", label: "Precise" },
] as const;

export function PromptComposerPreview({
  variant = "rounded",
}: {
  variant?: PromptComposerVariant;
}) {
  return (
    <PromptComposer variant={variant}>
      <PromptComposerAdd>
        <PromptComposerFileItem />
        <PromptComposerAddItem
          icon={<FileText className="size-4" strokeWidth={1.8} aria-hidden="true" />}
          description="Attach saved context"
        >
          Workspace notes
        </PromptComposerAddItem>
        <PromptComposerAddItem
          icon={<Globe className="size-4" strokeWidth={1.8} aria-hidden="true" />}
          description="Live results"
        >
          Web search
        </PromptComposerAddItem>
        <div className="mt-1 border-t border-[var(--uai-border)] px-2 pt-[7px] pb-[5px] text-[11px] text-[var(--uai-muted)]">
          Attach files or mention a source
        </div>
      </PromptComposerAdd>
      <PromptComposerInput placeholder="Write a message…" />
      <PromptComposerActions>
        <PromptComposerModelSelect models={composerModels} />
        <PromptComposerSubmit />
      </PromptComposerActions>
    </PromptComposer>
  );
}
```

## Anatomy

- `PromptComposer`
  - `PromptComposerAdd`
    - `PromptComposerFileItem`
    - `PromptComposerAddItem`
  - `PromptComposerInput`
  - `PromptComposerActions`
    - `PromptComposerModelSelect`
    - `PromptComposerSubmit`

## Accessibility

- The textarea has a persistent accessible label.
- Enter submits while Shift+Enter inserts a line break.
- Busy, disabled, and empty states disable submission.
- Source and model menus expose expanded state.
- Every icon-only action has an accessible name.
- Rounded, pill, ghost, and compact keep the same keyboard contract.