Installation

Prompt Area installs two ways from the same source: as an npm package, or through the shadcn registry. Use npm for a versioned dependency; use shadcn to copy the source into your project and own it.

Install as an npm package

Import the component and the prebuilt stylesheet. The stylesheet is self-contained, so no Tailwind setup is required:

'use client'
import { PromptArea } from 'prompt-area'
import 'prompt-area/styles.css'

Everything is exported from the package — components, the usePromptAreaState hook, trigger presets, segment helpers, and types. If you run Tailwind yourself, import prompt-area/tailwind.css instead for token-level theming.

Prerequisites for the shadcn registry

The shadcn route expects a React project using Tailwind CSS and shadcn/ui. If you do not have shadcn set up yet, run npx shadcn@latest init first.

Install from the shadcn registry

This adds the PromptArea component along with its types, the usePromptAreaState hook, trigger presets, and segment helpers.

Companion components

Each companion is independently installable from the same registry:

# Action Bar — toolbar with attach, mic, send
npx shadcn@latest add https://prompt-area.com/r/action-bar.json

# Status Bar — contextual info bar (model, branch, ...)
npx shadcn@latest add https://prompt-area.com/r/status-bar.json

# Compact Prompt Area — pill-shaped expanding input
npx shadcn@latest add https://prompt-area.com/r/compact-prompt-area.json

# Chat Prompt Layout — full-height chat layout
npx shadcn@latest add https://prompt-area.com/r/chat-prompt-layout.json

Install with an AI agent

Prompt Area ships machine-readable docs at /llms-full.txt. Give your coding agent (Claude Code, Cursor, Codex) this prompt:

Fetch https://prompt-area.com/llms-full.txt and read the full
documentation. Install the prompt-area component by running:
npx shadcn@latest add https://prompt-area.com/r/prompt-area.json
then add the required CSS classes to globals.css and help me
build a prompt input.