Accessible, composable bottom sheets for React 19. An independently maintained continuation of the original react-spring-bottom-sheet, rebuilt with compound components, explicit styling contracts, and current-browser verification.
Live docs · Live demo · Migration from the original · API reference · npm
npm install @nipe-solutions/react-spring-bottom-sheetImport the complete default styling once from your application entry point:
import '@nipe-solutions/react-spring-bottom-sheet/styles.css'- Built for React 19 with accessible dialog and focus behavior backed by explicit accessibility tests.
- Interruption-safe gestures and motion keep the sheet responsive through rapid input and state changes.
- Replaceable styling contracts let applications own the visual design without fighting library mechanics.
- Verified against current evergreen Chromium, Firefox, and WebKit browsers.
Move from react-spring-bottom-sheet to
@nipe-solutions/react-spring-bottom-sheet with the dedicated migration
page
and the detailed repository guide.
import { Sheet } from '@nipe-solutions/react-spring-bottom-sheet'
export function AccountActions() {
return (
<Sheet.Root snapPoints={[{ id: 'content', value: 'content' }]}>
<Sheet.Trigger>Open account actions</Sheet.Trigger>
<Sheet.Portal>
<Sheet.Backdrop />
<Sheet.Viewport>
<Sheet.Content>
<Sheet.Handle />
<Sheet.Title>Account actions</Sheet.Title>
<Sheet.Description>
Choose what you want to do next.
</Sheet.Description>
<Sheet.Close>Done</Sheet.Close>
</Sheet.Content>
</Sheet.Viewport>
</Sheet.Portal>
</Sheet.Root>
)
}BottomSheet is available as a convenience component for the common structure.
/styles.cssincludes required mechanics and the default theme./core.cssincludes mechanics only and is required for every sheet./theme.cssincludes the optional visual theme and token defaults./tokens.cssexposes the default token declarations separately.
All library-owned classes and custom properties use the rsbs namespace.
Mechanical selectors use low specificity so an application can replace the
visual design with ordinary CSS and without !important.
- React 19
- Node.js 24 LTS for development, CI, and releases
- Current evergreen Chromium, Firefox, and WebKit browsers
- TypeScript declarations, ESM, and CommonJS package entry points
Read the documentation, the migration guide, and the contribution guide.
The project was created by Cody Olsen in stipsan/react-spring-bottom-sheet and later maintained by Jasmine GH in JasGH/react-spring-bottom-sheet. This fork remains in that GitHub fork network and is independently maintained by NIPE Solutions. The original authorship and MIT license notices are preserved.
MIT