@micka_design: New component drop: Chat-style message composer with an auto-resizing textarea, flexible left/right action slots. Clean…
Summary
Fluid Functionalism released an open-source chat-style message composer component with an auto-resizing textarea and flexible left/right action slots.
View Cached Full Text
Cached at: 06/06/26, 01:23 AM
New component drop: Chat-style message composer with an auto-resizing textarea, flexible left/right action slots. Clean, simple and efficient. Open source on https://fluidfunctionalism.com/docs/input-message…
Fluid Functionalism
Source: https://www.fluidfunctionalism.com/docs/input-message PropTypeDefaultDescriptionvaluestring—Controlled textarea value.onValueChange(value: string) => void—Called with the new value on every textarea change.onSend(value: string, files: File[]) => void—Fires on Enter (without Shift) or send-button click. Receives the trimmed value and the currently-attached files. Skipped when the value is empty and no files are attached.placeholderstring“Ask me anything…“Placeholder shown when the value is empty. While a file is being dragged over the component (and attachments are enabled), the placeholder swaps to “Drop files here to add to chat”.leftSlotReactNode | (ctx) => ReactNode—Content rendered in the bottom-left action area. May be a render-fn that receives `{ openFilePicker, files }` — `openFilePicker(acceptOverride?)` opens the native file picker (optionally scoped to a subset of accept types, e.g. `“image/*”`).rightSlotReactNode | (ctx) => ReactNode—Content rendered in the bottom-right action area, before the built-in send button. Same render-fn shape as `leftSlot`.disabledbooleanfalseDisables the textarea, send button, and drag-and-drop.minRowsnumber1Minimum visible rows before the textarea grows.maxRowsnumber8Maximum visible rows before the textarea starts to scroll.clickToFocusbooleantrueWhen true, clicking anywhere on the surrounding container (outside of buttons / links / inputs) focuses the textarea.sendLabelstring“Send“Accessible label for the send button.filesFile[]—Controlled list of attached files. Pair with `onFilesChange` to enable drag-and-drop and the file-picker slot helper. When omitted, attachment behavior is disabled.onFilesChange(files: File[]) => void—Called when files are added (drag-drop or picker) or removed via the preview tile’s × button. Duplicate drops of the same file (same name + size + lastModified) are silently de-duplicated.acceptstring“image/png,image/jpeg,application/pdf“Accepted MIME types as a comma-separated string. Used by both the file picker and the drag-and-drop filter.maxFilesnumber—Maximum number of attached files. Extra files beyond this limit are dropped.filePreviewSizenumber80Side length (in pixels) of each preview tile. Images use object-cover; PDFs render the first page via pdfjs; other types fall back to a centered icon.textareaPropsTextareaHTMLAttributes—Extra props forwarded to the underlying textarea (value, onChange, onKeyDown, disabled and placeholder are controlled by the component).
Similar Articles
@shadcn: Today we're releasing a new set of components for building chat interfaces. We've taken the patterns we build every day…
Shadcn released a new set of composable components for building chat interfaces, including streaming, scrolling, messages, bubbles, attachments, and markers.
@micka_design: Passed a few quality of life improvements on two most-requested tweaks for the AskUserQuestions component: - Freeform “…
Quality-of-life improvements for the AskUserQuestions component: freeform 'other' textarea and left-aligned chip layout, driven by community feedback.
@ajambrosino: what’s a little funny about the “GPT weak on frontend” discourse is that everything we ship in the codex app gets adopt…
A tweet from @ajambrosino observes that features in the Codex app are quickly adopted by the industry, highlighted by @shadcn's new MessageScroller component for chat apps.
@Replit: The best design work doesn't happen in a chat box. You need space to explore ideas, create variants, and iterate Meet t…
Replit introduces Canvas, an agentic design tool for building websites, apps, and marketing assets, emphasizing spatial exploration over chat-based design.
@TheTechDiggest: [OpenSource - Web UI Elements & Design] Designing custom buttons, loaders, and cards from scratch eats up valuable deve…
UIverse is an open-source collection of community-made web UI elements, helping developers speed up frontend workflows with thousands of custom components.