Reveal All Rows

Title and search rows tuck away on scroll down — the full header glides back the moment you scroll up.

behavior="reveal-all"headerrevealanimation

Open fullscreen

9:41

In this demo

Pulse — social feed

What to try

Scroll down — title and search tuck away
Nudge upward — the full header returns

Code

app.tsx

import { AppShell, Header, Content, SearchField, MotionProvider } from "appshell-react";
import { framerMotionAdapter } from "appshell-react/motion-framer";
import { Bell } from "lucide-react";

export default function App() {
  return (
    <MotionProvider adapter={framerMotionAdapter}>
      <AppShell safeArea>
        <Header
          behavior="reveal-all"
          logo={<span className="font-bold">Pulse</span>}
          actions={<button aria-label="Notifications"><Bell /></button>}
          title="Home"
          subtitle="Catch up on today"
          searchContent={<SearchField placeholder="Search Pulse" />}
        />
        <Content>
          {/* Scroll down: title + search rows hide. Scroll up: all rows reveal. */}
        </Content>
      </AppShell>
    </MotionProvider>
  );
}

Sticky Header Reveal Nav Row