# stipsan/react-spring-bottom-sheet

Accessible ♿️, Delightful ✨, & Fast 🚀

Repository: https://github.com/stipsan/react-spring-bottom-sheet
Canonical: https://ross.abutalabs.com/products/react-spring-bottom-sheet
Homepage: https://react-spring.bottom-sheet.dev/
Language: TypeScript
License: MIT
License Family: permissive
Topics: react, animation, ux, bottom-sheet, bottomsheet, sheet, modal, overlay, popup, dialog, drag-drop, gesture-control, draggableview, drawer, bottom-drawer, react-spring, tailwind-css
Last push: 2026-08-26T17:14:12+00:00

## Health v2 (maintenance only)
Score: 67/100 (v2, computed 2026-09-02T17:46:02.011165+00:00)
- activity 99, release rhythm 8, longevity 100
- inputs: {"age_days": 2107, "days_push": 7, "days_rel": null, "gap_med": null, "n_releases_24m": 0}
- flags: none
- formula: round(0.45*activity + 0.35*rhythm + 0.20*longevity); archived -> min(score, 10)

## Adoption (not part of the score)
Stars 1068, forks 157 (observed 2026-08-28T04:03:27.572346+00:00)

## What it is
A React bottom sheet component library built on react-spring and react-use-gesture, providing accessible, animated draggable bottom panels with snap points. It emphasizes keyboard navigation and screen reader support while remaining highly performant and customizable via CSS custom properties.

## Use cases
- add a draggable bottom sheet modal to a react app
- implement an accessible bottom drawer with keyboard and screen reader support
- create a mobile-style bottom panel with snap points
- build a blocking dialog that requires user interaction before closing
- customize sheet animations purely with css variables
- add sticky header and footer to a bottom sheet

## When to choose
- you need an accessible bottom sheet in a React project
- you want spring-based animations with full CSS customization
- you need snap points, rubber banding, and touch gesture support
- you want a small, performant component with TypeScript support

## When to avoid
- you are not using React
- you need a full-featured modal/dialog system beyond bottom sheets
- you need a bottom sheet for React Native rather than the web

## Facets
- artifact type: library
- maturity: active
- function: ui-components, animation, state-management
- domain: frontend, web-development, accessibility
- platform: cross-platform
- tags: bottom-sheet, react-spring, modal, drawer, gesture-control, typescript, css-custom-properties, web-server

## Member repositories
- stipsan/react-spring-bottom-sheet (main) score 67

## Provenance
- Observed fields: from GitHub, fetched 2026-08-28T04:03:27.572346+00:00.
- Health v2: computed from the inputs above; adoption is never an input.
- Inferred fields (summary, facets, guidance): AI-extracted, prompt v1, taxonomy v1, on 2026-08-30T06:55:07.904226+00:00, confidence not recorded.
  - readme: https://github.com/stipsan/react-spring-bottom-sheet (fetched 2026-08-28T04:03:27.572346+00:00, sha 98f3d1487ea7)
  - homepage: https://react-spring.bottom-sheet.dev/ (fetched 2026-08-29T12:56:57.037774+00:00, sha 662f37323be5)
  - registry_npm: https://registry.npmjs.org/react-spring-bottom-sheet (fetched 2026-08-29T12:56:57.046948+00:00, sha 617a0f1e68a6)
- Data as of 2026-08-30T08:39:29.467469+00:00.