Playground

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

export default function App() {
  return (
    <MotionProvider adapter={framerMotionAdapter}>
      <AppShell safeArea>
        <Header
          behavior="reveal-all"
          logo={<span className="font-bold">Fieldnotes</span>}
          title="Today"
          subtitle="Six new notes from your circle"
          searchContent={<SearchField placeholder="Search notes" />}
        />

        {/* Center the app column so desktop doesn't stretch like a phone */}
        <Content className="mx-auto w-full max-w-2xl sm:border-x">
          {/* … */}
        </Content>

        <Footer variant="tab-bar" behavior="auto-hide">
          <FooterItem icon={<Home />} label="Home" active />
          <FooterItem icon={<Compass />} label="Explore" />
          <FooterItem icon={<Bookmark />} label="Saved" badge={2} />
          <FooterItem icon={<User />} label="Profile" />
        </Footer>
      </AppShell>
    </MotionProvider>
  );
}