Multimodal

VisionInput

Vision-input dropzone — drag-and-drop, file picker, paste, optional camera capture.

Preview

Drop, paste, or click to add an imageCmd/Ctrl+V to paste

Use camera

Installation

pnpm add nyxis-ui

Usage

import { VisionInput } from 'nyxis-ui';

const [file, setFile] = useState<File | null>(null);

<VisionInput value={file} onChange={setFile} maxBytes={5 * 1024 * 1024} />;

Input methods

Method	Behaviour
Drag-and-drop	Highlights the dropzone in primary tone.
File picker	Click anywhere on the empty dropzone.
Paste (`Cmd/Ctrl+V`)	Document-level handler; ignored when an `<input>` has focus.
Camera capture	Tap the “Use camera” button. Mobile devices launch the rear camera (`capture="environment"`).

Validation

Pass maxBytes to enforce a size cap. Oversize files surface a destructive inline error.
Non-image MIME types are rejected.
Already-selected files can be removed via the X button on the preview.