Prefer composition over prop tunnels

Use children and small slots instead of pushing many props through unrelated layers.

Code example

Copy, adapt, and ship.

Read the numbered lines, copy the complete snippet, then adjust the values for your project.

React snippet

01function SettingsLayout({ sidebar, children }) {02  return (03    <div className="settings-grid">04      <aside>{sidebar}</aside>05      <main>{children}</main>06    </div>07  );08}

Production-ready starting point8 lines · copy with one click

Why this matters

The production reason.

01
Long prop tunnels make parent components know too much about deeply nested UI.
02
Composition lets the parent provide structure while children own their own details.
03
This is cleaner for dashboards, modals, cards, and reusable page sections.

Platform notes03

How it holds up outside a demo.

ReactUse children and named slots before reaching for context.
Design systemsSlots keep components flexible without dozens of boolean props.
Next.js layoutsCompose route sections with layout.jsx instead of forwarding page props everywhere.