Overlays

Sheet

A secondary surface that animates over primary content from a specific edge.

Design question

Should a sheet animate from screen geometry (edges) or reading direction (where the reader came from)?

Edge comparison

Screen geometry. Feels like a new layer — natural on horizontal phones, ambiguous in vertical context.

tsx
1function Sheet({ children, open, onClose, edge = "bottom" }) {
2  const [closing, setClosing] = useState(false)
3
4  const close = () => {
5    setClosing(true)
6    setTimeout(() => { onClose(); setClosing(false) }, 260)
7  }
8

Guidance

✓Choose animation direction based on semantic relationship to content
✓Use spring easing with slightly higher stiffness than horizontal equivalents
✓Always provide a visible dismiss handle and Escape key support

Don't

✗Animate from the right in an RTL interface — it travels against reading flow
✗Open sheets with fade only — directional entry communicates spatial relationship
✗Use sheets for content that needs to be compared with what's behind it

Accessibility

role='dialog', aria-modal='true'. Focus trapped. Dismiss via Escape. Focus returns to trigger on close.

Open Question

Should chapter-level navigation sheets enter from the right (where the next chapter is) or the bottom (new layer)? Both are defensible.

← PreviousTooltip Next →Dialog

1	function Sheet({ children, open, onClose, edge = "bottom" }) {
2	const [closing, setClosing] = useState(false)
3
4	const close = () => {
5	setClosing(true)
6	setTimeout(() => { onClose(); setClosing(false) }, 260)
7	}
8