01
Composition without hidden structure
Use the complete BottomSheet for the common case or assemble focused Sheet primitives when your product needs a different hierarchy.
Explore the behaviorA bottom sheet with boundaries you can trust.
Accessible composition, predictable gestures, and a styling contract that stays out of your application’s way.
Vienna · Wednesday
Your afternoon
- Secession
- Naschmarkt
- Karlsplatz
Build facts
What the current build proves.
- Prepared version
- 5.0.2
- JavaScript module
- 10.4 kB gzip
- CI browser engines
- Chromium, Firefox, WebKit
- React peer range
- React ^19.0.0
Generated from package metadata and the production artifact during every website build.
Product behavior
Built for the difficult parts.
A bottom sheet is easy until scrolling, focus, motion, and application state meet. Version 5 gives each concern an explicit boundary.
02
Gestures that yield to content
Drag ownership follows scroll boundaries, then hands movement to the sheet without making nested content feel trapped.
Explore the behavior03
Named destinations, predictable state
Model compact, expanded, and content-sized destinations by meaning and control them with ordinary React state.
Explore the behavior04
Motion with a complete close
Opening, interruption, dismissal, unmounting, and focus restoration share one lifecycle instead of competing timers.
Explore the behaviorStyling contract
Your visual system stays yours.
Import the complete default presentation, or keep only the mechanical layout and replace every visual decision. Low-specificity rules and a dedicated namespace keep library styles away from application classes.
Read the styling contractRequired mechanics
core.cssPositioning, gestures, viewport, and transition state.
Optional presentation
theme.cssColor, radius, backdrop, handle, and surface defaults.
Your product
your-theme.cssOrdinary selectors, stable hooks, complete visual ownership.
Accessible foundations
Accessibility is runtime behavior.
Semantic roles are only the beginning. Modal sheets establish an accessible name, move and contain focus, isolate background content, handle Escape, and restore focus when the sheet closes.
Review accessibility behavior- 01Focus lifecycle
Entry, containment, dismissal, and restoration are coordinated.
- 02Modal or complementary
Choose isolation deliberately instead of faking it with z-index.
- 03Reduced motion
The same state machine settles without decorative movement.
One package, explicit anatomy
Start with the whole system.
The default stylesheet includes mechanics and theme. Every interactive part stays visible in the component tree, so behavior is easy to find and change.
npm install @nipe-solutions/react-spring-bottom-sheetimport { Sheet } from '@nipe-solutions/react-spring-bottom-sheet'
import '@nipe-solutions/react-spring-bottom-sheet/styles.css'
export function App() {
return (
<Sheet.Root>
<Sheet.Trigger>Open sheet</Sheet.Trigger>
<Sheet.Portal>
<Sheet.Backdrop />
<Sheet.Viewport>
<Sheet.Content>
<Sheet.Handle />
<Sheet.Title>Account settings</Sheet.Title>
<Sheet.Description>Update your profile.</Sheet.Description>
<Sheet.Close>Done</Sheet.Close>
</Sheet.Content>
</Sheet.Viewport>
</Sheet.Portal>
</Sheet.Root>
)
}Working patterns
Move from example to application.
Basic sheet
Start with local state and a content-sized destination.
Controlled state
Keep the open state in your application when other UI depends on it.
Named snap points
Control compact and expanded destinations with stable identifiers.
Release confidence
A deliberate path to 5.0.
Version 5.0.2 is available from the stable npm channel.