Animation origin communicates spatial relationship. Bottom feels like a new layer. Right (in RTL) travels against reading direction. Left follows reading direction.

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

Source

The exact file npx verticallyworks add sheet copies into your project · yours to edit. Styling comes entirely from the design tokens.

tsx
1"use client";
2
3/**
4 * VerticalSheet · an edge sheet aware of the reading axis.
5 *
6 * Screen geometry says a sheet slides up from the bottom; a vertical RTL
7 * reading flow often disagrees. The `edge` prop makes the choice explicit:
8 * `bottom` follows screen geometry, `left` enters from where reading is

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

1	"use client";
2
3	/**
4	* VerticalSheet · an edge sheet aware of the reading axis.
5	*
6	* Screen geometry says a sheet slides up from the bottom; a vertical RTL
7	* reading flow often disagrees. The `edge` prop makes the choice explicit:
8	* `bottom` follows screen geometry, `left` enters from where reading is