Skip to content
Pinky UI

mobile

Detent Sheet

A sheet exposes peek, half and full heights as stable destinations with drag, buttons and keyboard controls.

  • mobile
  • sheet
  • detent
  • drag
Related pattern

Three named detents make drag handoff predictable; this is a stable height system, not another generic bottom sheet.

Live preview

Quick usage

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

<DetentSheet open={open} onOpenChange={setOpen} title="Filters" />

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

Detent Sheet exposes three named heights—peek, half and full—as stable reading destinations. The drag handoff is predictable because the user can also choose each detent with buttons or arrow keys.

Use when

  • A task benefits from preview, working and full-reading heights.
  • Users need to move between sheet sizes without losing the underlying context.

Interaction

Drag the handle upward or downward, choose Peek/Half/Full, press Escape or close explicitly. A downward drag from Peek dismisses the sheet.

Accessibility

Treat the handle as a labelled slider with a small, finite range. Provide named detent buttons so the gesture is never the only route.

Reduced motion

Switch heights immediately and keep the current detent text visible.

Tune

  • Choose heights based on content, not device fashion.
  • Keep the full state below the safe readable viewport.
Open this skill on its own page