Skip to content
Pinky UI

mobile

Bottom Sheet

A snap-point sheet with drag, backdrop, Escape and focus restoration.

  • mobile
  • sheet
  • touch

Quick usage

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

<BottomSheet open={open} onOpenChange={setOpen}>Filters</BottomSheet>

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 for mobile-focused filters, actions, or detail that can rise from the bottom without losing context.

Use when

The task is short and spatially related to the current screen.

Avoid

Nested scroll traps, giant forms, or replacing desktop dialogs without checking viewport behavior.

Accessibility

Use dialog semantics, labelled title, close button, Escape, backdrop behavior, and focus restoration.

Keyboard and touch

Snap points and drag are optional acceleration; close remains an explicit button.

Reduced motion and performance

Animate the sheet transform only and clean drag/listener state on unmount.

Composition and anti-patterns

Keep scroll ownership inside the sheet and do not stack sheets without a strong reason.

Open this skill on its own page