The text input is still the most-used element in any chat UI. Since the first post about Prompt Area, one piece of feedback kept coming back in two flavors: "I want to see it looking like a real product, not a demo" and "I don't want the registry, just let me npm install it."
Both shipped. This post is the tour.
The Styles page: the composers you already know
The new /styles page recreates seven agent inputs you use every day, each as a real, copy-paste composition of Prompt Area and its companion components. Every example is live (type in it, open the menus) and has a Code tab next to the Preview.
ChatGPT: the single-line rounded pill, model selector opening upward, dictation, and the voice affordance that swaps to a send arrow once there's text.
Claude: the rounded card with a stacked input, a model menu with per-model descriptions, the coral send button, a dismissible notice above and suggested-prompt chips below.
Claude Code: environment and repository context above the input, inline return-to-send, and a control bar with permission mode, model and reasoning-effort selectors, and a usage meter.
Codex: the cloud-agent composer with a permissions menu, reasoning-effort selector, and the layered repository/environment/branch context tray peeking from under the card.
Gemini: the pill with the "+" menu that flips to a close button, nested fly-outs, a model pill with a Thinking-level menu, and the persistent mic.
Perplexity: turquoise focus glow, Search/Computer mode toggle, a gated model picker that switches with the mode, and a shuffling rail of starter cards.
Juma: the marketing-agent composer we run in production, with attached-context chips, integration fly-outs, a brand-profile button, and @ / triggers for context and saved prompts.
None of these are screenshots or mockups. Each one is the same PromptArea component composed with ActionBar, StatusBar, and friends, restyled. That was the point of the exercise: if the component cannot reproduce the composers people already consider best-in-class, it is not done.
npm install prompt-area
Prompt Area started as a shadcn registry component: one command drops the full source into your repo and you own every line. That model is still here and still the recommendation for teams that want no black boxes:
npx shadcn@latest add https://prompt-area.com/r/prompt-area.json
But plenty of you asked for a plain dependency. As of v0.5.0 it is on npm:
pnpm add prompt-area
Same code, two distribution models. Rent it as a package and pull updates, or own it as source and patch anything. There is also a third path for the agent era: point Claude Code or Cursor at the docs prompt and let the agent do the install.
Still zero editor-framework dependencies
Nothing changed underneath. No Tiptap, no Lexical, no Plate: a contentEditable component with a typed Segment[] value model (structured data out, not HTML soup), trigger-based chips for @mentions, /commands and #tags that survive copy/paste and undo, inline markdown, IME/CJK composition handling, and a pure engine (prompt-area-engine) you can test without a DOM.
React + Tailwind. MIT.
Links
- Styles: https://prompt-area.com/styles
- Docs: https://prompt-area.com
- npm: https://www.npmjs.com/package/prompt-area
- GitHub: https://github.com/just-marketing/prompt-area
If you build a style we did not cover (Cursor? Copilot?), open a PR: the styles page is designed to grow.
Top comments (0)