Sheets, toasts, and motion for React

Swipeable sheets that feel native

Spring physics, real momentum, and native scroll-snap gestures, driven by the Web Animations API and composed like building blocks.

Spring physics
Fixed-timestep integrator, six presets
Native scroll-snap
OS-true momentum on every swipe
Compound API
Compose parts like building blocks
Zero dependencies
WAAPI + CSS, nothing else
The gallery

Explore every sheet pattern

Hover a card to preview its motion. Open it to drag, scroll, stack, and dismiss the real component.

16 interactive examples

Bottom Sheet

A bottom-aligned sheet with swipe dismissal.

Modal Dialog

A centered modal surface for focused tasks.

Navigation Drawer

A sheet presented from the left edge.

Detent Sheet

A bottom sheet with multiple snap points.

Top Sheet

A sheet presented from the top edge.

Scrollable Sheet

Long content with coordinated scroll and drag.

Stacked Sheets

A sheet that presents a second sheet.

Detached Sheet

A floating sheet detached from viewport edges.

Full-Screen Sheet

A bottom-presented sheet that fills the viewport.

Depth Sheet

A full-width sheet that scales the page behind it.

Lightbox

A full-screen modal surface for media.

Parallax Sheet

A full-screen sheet with a parallax cover.

Side Sheet

A full-height sheet presented from the right edge.

Keyboard-Aware Sheet

A sheet that follows the virtual keyboard.

Card Expansion

A modal card with bidirectional swipe dismissal.

Persistent Sheet

A non-modal sheet with a persistent collapsed state.

Velvet UI — a clean-room reimplementation built for the craft. Photos by Pexels.