Skip to content
Pinky UI

mobile

Content-Aware Sheet

A local sheet grows with the content it reveals and stops at a bounded viewport height instead of forcing a fixed 80vh shell.

  • mobile
  • sheet
  • content
  • resize
  • disclosure
Related pattern

Height follows content density while the surface remains bounded and scrollable when needed.

Live preview

Quick usage

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

<ContentAwareSheet title="Details" expandedContent={more}>{summary}</ContentAwareSheet>

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

  • Every gesture has a labelled button or keyboard path, and primary controls meet a 44px touch target.
  • State remains readable without relying on colour or motion.

Performance

  • Interaction state is local and bounded; gesture updates do not require a page-wide render loop.
  • Timers and listeners are cleaned up on unmount.

Reduced motion

The same state change resolves immediately; travel, scale and spring motion are removed without removing the interaction.

When to use

  • Touch-first product surfaces where the next action should stay close to the hand.

When not to use

  • Desktop-only workflows or interactions whose gesture would hide the only available action.

Skill

Purpose

Content-Aware Sheet lets a lower surface grow when the task reveals more content and shrink when that content is dismissed. It uses natural flow with a bounded maximum rather than a fixed viewport percentage.

Use when

  • A short summary sometimes needs a longer explanation.
  • A sheet's height should reflect the amount of content currently requested.

Interaction

Open the summary, choose Show more detail and collapse it again. The surface reflows around the actual content while remaining scrollable at its maximum.

Accessibility

Use a labelled dialog and an aria-expanded disclosure control. The added content must be in the same reading order as the button that reveals it.

Reduced motion

Add and remove the detail region without height animation; keep the disclosure state explicit.

Tune

  • Set a max height and preserve internal scroll.
  • Do not use fixed empty space to simulate content-aware sizing.
Open this skill on its own page