React Spring Bottom Sheet | NIPE Open Source

Overview

Accessible React 19 bottom sheets with a compound Sheet API, named snap points, and separately exported styles.

Why it exists

It exists for React interfaces that need a bottom-anchored modal surface to coordinate snap points, gestures, nested scrolling, and accessible dialog behavior.

Evidence for purpose

Verified claims

Compound sheet API
Provides controlled or uncontrolled state and named snap points through the compound Sheet API.
Evidence for Compound sheet API
Accessible modal behavior
Provides focus containment, background isolation, title and description registration, Escape handling, and focus restoration.
Evidence for Accessible modal behavior
Interaction and motion support
Documents interruption-safe gestures, nested-scroll handling, reduced-motion behavior, and current evergreen browser verification.
Evidence for Interaction and motion support

Scope and limitations

Independent continuation

The NIPE package is an independently maintained continuation in the original fork network.

Evidence for Independent continuation

Example

Example source

import { Sheet } from '@nipe-solutions/react-spring-bottom-sheet'

;<Sheet.Root snapPoints={[{ id: 'content', value: 'content' }]}>
  <Sheet.Trigger>Open account actions</Sheet.Trigger>
  <Sheet.Portal>
    <Sheet.Backdrop />
    <Sheet.Viewport>
      <Sheet.Content>
        <Sheet.Title>Account actions</Sheet.Title>
      </Sheet.Content>
    </Sheet.Viewport>
  </Sheet.Portal>
</Sheet.Root>

Install

npm install @nipe-solutions/react-spring-bottom-sheet