Skip to content
Pinky UI

mobile

Keyboard-Aware Composer

Keeps a composing surface above the visual viewport with a visible send path and safe-area spacing.

  • mobile
  • composer
  • keyboard
  • safe area
  • textarea
Related pattern

The composer responds to the mobile keyboard as a layout condition, not as a desktop overlay assumption.

Live preview

The surface follows the visual viewport; ⌘/Ctrl + Enter sends.

Quick usage

usage
import { KeyboardAwareComposer } from "@pinky-ui/systems";

<KeyboardAwareComposer onSubmit={sendMessage} />

Install

Add @pinky-ui/systems as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/systems

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Accessibility

  • Pointer and keyboard paths expose the same state change.
  • Status and focus remain meaningful when motion is disabled.

Performance

  • Uses local state and transforms; no per-frame React pointer loop.

Reduced motion

Resolves state changes without layout animation while preserving semantics.

When to use

  • Product workflows with a clear reversible or inspectable state.

When not to use

  • Decorative motion without a user task.

Skill

Purpose

Use a keyboard-aware composer when text entry should stay above the mobile visual viewport instead of being hidden behind the on-screen keyboard.

Interaction anatomy

  • The visual viewport reports the keyboard offset.
  • The composer grows only when focused or populated.
  • Send remains a visible native submit action.

Good for

Notes, messages, comments and small creation surfaces.

Avoid

Long-form editing that needs a dedicated screen or a composer with many unrelated controls.

Live example

Focus the composer, type a note and send with the button or Ctrl/Command + Enter.

Usage

tsx
<KeyboardAwareComposer onSubmit={sendMessage} />

Tune

Use a short placeholder, keep the input readable above the keyboard and reserve safe-area padding at the bottom.

Accessibility and reduced motion

Use a native labelled textarea and submit button. Reduced motion does not remove keyboard offset handling or the visible send path.

Open this skill on its own page