Temzasse/react-modal-sheet

Health v2 · maintenance only

Adoption not part of the score

1181 stars · 100 forks observed · 2026-08-28

What it is AI-extracted, prompt v1, taxonomy v1, 2026-08-30, confidence not recorded

A flexible React bottom sheet component library built on the Motion animation library, offering smooth gesture-driven sheets with snap points, detents, and scrollable content. It uses a compound component pattern (Container, Header, Content, Backdrop) to give full control over rendering while keeping accessibility in mind.

Use cases

• add a bottom sheet modal to a react app
• build an apple maps style draggable sheet
• create accessible modal sheets with keyboard support
• implement snap point bottom sheets on mobile web
• show scrollable content in a draggable overlay
• customize backdrop and header of a modal sheet

When to choose

• you need a polished, animated bottom sheet in React with minimal effort
• accessibility (focus management, ARIA) is a requirement
• you want full control over sheet markup via compound components
• you need detents/snap points and scrollable sheet content

When to avoid

• your project does not use React
• you cannot add the Motion peer dependency
• you need a full-screen modal dialog rather than a bottom sheet
• you are not on a modern React version compatible with the library

Facets

library · maturity active

ui-components animation accessibility frontend-framework frontend web-development accessibility browser react bottom-sheet modal framer-motion motion typescript mobile-ui web-server nodejs

Member repositories

For agents

markdown · JSON · MCP: product_card(name="Temzasse/react-modal-sheet")