Fullscreen widgetPro

A full screen widget frame that keeps the composer docked, grows out of its inline card, clears notches through safe areas so close never clips, traps focus and closes on Escape.

Markdown

On this page

ProA flat shortlist that grows out of its inline card into full screen with the composer docked.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/fullscreen-widget

Usage

tsx

import { FullscreenWidget } from "@/components/ui/chatcn/pro/fullscreen-widget"

<FullscreenWidget
  open={open}
  onOpenChange={setOpen}
  origin={cardRef}
  title="Saved flats"
  composer={<PromptInput />}
>
  <FlatsTable />
</FullscreenWidget>

Pass the inline card as origin and the frame grows out of it. The header and the docked composer pad themselves with env(safe-area-inset-*) plus any safeArea you pass, so the close button stays clear of notches, status bars and rounded corners, and the composer clears the home indicator. Hairlines under the header and above the composer only show while content scrolls beneath them.

Page scroll is locked while a fixed frame is open. useFullscreenWidget exposes the focus, Escape and scroll lock behavior for your own frames.

Examples

Phone safe areas

ProA phone screen with a status bar and home indicator: the long title truncates, close never clips.

Props

Prop	Type	Notes
`open`, `onOpenChange`	`boolean`	Controlled
`title`, `subtitle`, `icon`	`ReactNode`	The title truncates first; close never shrinks
`actions`	`ReactNode`	Buttons before close
`composer`	`ReactNode`	Docked under the content
`origin`	`RefObject<HTMLElement>`	The element the frame grows out of
`contentWidth`	`number \| "full"`	Default 768, centered
`safeArea`	`Partial<WidgetSafeArea>`	Added to the device safe area
`strategy`	`"fixed" \| "absolute"`	Default `fixed`
`lockScroll`	`boolean`	Default true for `fixed`
`initialFocus`	`RefObject<HTMLElement>`	Defaults to the frame, so the title is read first
`closeLabel`	`string`	Default Close

Keyboard

Key	Action
`Tab`, `Shift+Tab`	Cycle through the frame, the composer included
`Escape`	Close, never while an IME is composing. Focus returns to the opener

Accessibility

A modal dialog labelled by its title. Focus moves to the frame on open and back to the element that opened it on close.
Close has a tooltip with its shortcut and a 44 px target on touch.

Motion

With an origin: translate and clip-path from the card to the full frame in 280 ms ease-out. Without: a 220 ms fade from 0.98, like a dialog.
Close fades out in 160 ms. Keyboard opens and closes are instant. Reduced motion: a 150 ms fade.