PWA UIv0.1
Documentation
Docs / Components / KeyboardAvoidingView

Component

KeyboardAvoidingView

KeyboardAvoidingView handles application layouts outside Base UI drawers by exposing stable viewport and keyboard CSS variables.

Preview

Are the mobile components ready?The first pass is. I’m checking keyboard behavior now.

Installation

bash
pnpm dlx shadcn@latest add https://pwaui.com/r/keyboard-avoiding-view.json

Usage

tsx
import { KeyboardAvoidingView } from "@/components/ui/keyboard-avoiding-view"
export function Composer() {  return (    <KeyboardAvoidingView behavior="padding" keyboardOffset={8}>      <textarea aria-label="Message" />      <button>Send</button>    </KeyboardAvoidingView>  )}

Anatomy

KeyboardAvoidingViewuseVisualViewport

Behavior notes

  • Behaviors: padding, height, and position.
  • Exposes --pwa-keyboard-height and --pwa-visual-viewport-height.
  • Inside BottomSheet, prefer Base UI's dedicated keyboard provider.

Accessibility

The component is layout-only. Preserve normal focus order and label all form controls inside it.