Orvain UI

Text Area blocks

A text area is the multi-line field people write into (a comment, a chat message, a prompt, an issue description) together with the controls that sit around it.

Get Pro to installPro8 blocksReact, Vue and Figma
MCPConnect the MCP server
ToMichael Scott
Enter sends, Shift and Enter adds a line, @ tags someone. Backspace at the start marks, then removes, the last tagged person.
83 / 280

Every block in the set#

Tagging composer

Chat and comment fields that mention people: the tagged names sit above, the pill takes the message

Tagging composer, audience

A message box that says who will be notified, and lets you mute or drop them

Tagging composer, thread

A team channel: grouped messages over a tray composer that tags people

Prompt field

An AI composer with a hint in the strip: connect Figma, files above the text, web, model and depth, voice, send

Prompt field, ink

A prompt field whose tools ride in one ink pill, and voice morphs it into the recorder

Prompt field, context

A prompt where you can see everything the model will read, and how full its window is

Tabbed editor

Issue and task editors: one field per section, each keeping its draft, with formatting underneath

Tabbed editor, template

An issue editor where every section starts as a sentence with blanks

When to use#

  • Input that might be one line or twenty: comments, replies, messages
  • Composers that carry attachment, model or mode controls beneath the field
  • Issue and task editors that need light formatting and nothing more
  • Anywhere people paste several paragraphs at once

The whole set, with its codePro

Pro opens the Code tab on every block here, in React and Vue, plus the Figma file and the MCP server for your editor.

Open in BlocksSee plans