vibecodng.com

Free MCP betaIndex and tools live

Measured entry

ruixen-smart-paste-input

chatunclassified

A React client-side chat composer that converts long pasted text into attachment cards, then opens each card in an editable dialog. It ships as a shadcn registry component and relies on Tailwind theme classes, the shadcn Button, Dialog, and Textarea primitives, a cn utility, lucide-react, and Radix-backed UI behavior.

Specimen
Harness screenshot of ruixen-smart-paste-input at 375 pixels wide
Harness screenshot at 375 pixels wide. No horizontal overflow recorded.
Harness screenshot of ruixen-smart-paste-input at 768 pixels wide
Harness screenshot at 768 pixels wide. No horizontal overflow recorded.
Harness screenshot of ruixen-smart-paste-input at 1440 pixels wide
Harness screenshot at 1440 pixels wide. No horizontal overflow recorded.

Measured

Every value below was written by the harness on the run that produced the frames above. None of it is derived from the prose.

Harness measurements recorded for ruixen-smart-paste-input
BuildOK
MountOK
Console errors0
Uncaught page errors0
Horizontal overflowclean at 375, 768, 1440
Axe critical0
Axe serious0
Axe moderate0
Axe minor0
Gzip marginal44.4 KB (109.8 KB build, 65.4 KB baseline)
Bare modeFAIL
Provider requiredNO
Demo usedwritten from the component source API

What the harness recorded

BARE BUILD

✗ Build failed in 33.05s
error during build:
[vite:load-fallback] Could not load <sandbox>/src/lib/utils (imported by src/cut/smart-paste-input.tsx): ENOENT: no such file or directory, open '<sandbox>/src/lib/utils'

Verdict

A thoughtful fit for chat products where large pastes are common, with useful state hooks and an editable review flow. It builds and mounts in the prepared environment, but the bare project fails on the expected cn utility import, so it needs a shadcn-style setup before it is drop-in ready.

Use it if

  • Your chat or support composer needs to keep large pasted logs and documents out of the visible message field.
  • You want controlled or uncontrolled text and attachment state with a structured submit payload.
  • Users should be able to inspect, edit, or remove captured paste attachments before sending.

Skip it if

  • Your product must upload pasted content as real files or persist it independently, since this component only models text attachments in client state.
  • Your composer already has its own attachment editor and keyboard submission rules that would conflict with this opinionated flow.
  • You need a dependency-light input without shadcn primitives, Tailwind theme tokens, Lucide icons, or Radix-backed dialogs.

Install

Installation record for ruixen-smart-paste-input
Declared dependencieslucide-react, radix-ui
Missing on installnone
Bare installfails once the shadcn-style helpers are removed, so it needs that setup
Providerno provider required in the harness

In a non-shadcn project, add compatible Button, Dialog, and Textarea components, the cn class-merging utility at the expected alias, Tailwind utilities and theme tokens, plus lucide-react and the Radix-backed dialog dependency. Configure the alias or rewrite those imports to local paths.

Source and credit

This page is a review, not a copy. The component source lives with its author and this site does not republish it. Read the license before you use anything.

Author repository

github.com/ruixenui/ruixen.com
License
MIT
Record published
2026-08-14

Alternatives

Other published entries for the chat pattern, ordered by what they measured: mounts first, then clean axe scans, then bare-mode passes, then the smaller bundle.