Core

Slot

Slot marks where screens render inside your layout, so the header, sidebar or tab bar around it stays mounted and still while only that region transitions.

1 min read

A Router transitions the whole viewport by default. To keep a header, sidebar, or tab bar still, wrap just the routes in a Slot.

App.tsx
<Router>  <Header />  <Slot className="h-full w-full">    <Route path="/" element={<Home />} />    <Route path="/about" element={<About />} />  </Slot></Router>

Give it a size

Screens are absolutely positioned inside the Slot, so an unsized Slot can collapse to zero height. Size it with className or style, usually className="h-full w-full".

Slot, shared bar, or nested Router

UseWhen
SlotUI that is identical on every route and never moves
Shared bar on A bar on each screen that should look like one continuous bar
Nested A region with its own stack, history mode, or name

If a Router has any child that is not a Route, wrap the routes in a Slot so flemo can tell screens from layout. Development warns otherwise.

How it worksDetails
  • Everything outside the Slot never slides or re-renders with a navigation. It is still one Router, one history, and one useNavigate, so a header or sidebar navigates the region directly.
  • The Slot renders a position: relative; overflow: hidden box, and screens inside it are position: absolute. Ordinary screen content is clipped to the box.
  • When no transition is running, a position: fixed overlay intentionally escapes the region, so a sheet or dialog can cover the surrounding shared bars. Use absolute positioning when an overlay should stay clipped to the Slot.
  • The Router finds the Slot by walking the JSX you pass it, so the Slot may sit inside plain layout elements. A Slot rendered by another component's own output is not found.
  • UI that is exactly the same on every route belongs outside the Slot rather than in a .
  • UI outside the Slot is outside any Screen. Read the active route there with usePathname. useScreen returns empty fields there rather than failing.
Edit on GitHub