Polish examples UI and update react package

Refine example apps' UI and add supporting config/code changes. Updates include: change floating footer CTA to "Show Cart" with a cart count badge and cursor styling; enhance reveal-header with a stateful tab switcher to toggle header reveal behaviors, add HeaderNav items, update title/subtitle, add icons, sticky variant selector, and several cursor/class tweaks on interactive buttons. Remove redundant "lint" scripts from apps/docs and apps/examples package.json files. Add new packages/react/eslint.config.js and apply multiple updates to packages/react source files (Header, context, motion, motion-css) and package.json. Update e2e test, TypeScript build info and pnpm lockfile.

Author: fyalavuz

apps/docs/package.json

@@ -5,8 +5,7 @@
   "scripts": {
     "dev": "next dev --port 3002",
     "build": "next build",
-    "start": "next start --port 3002",
-    "lint": "eslint ."
+    "start": "next start --port 3002"
   },
   "dependencies": {
     "@appshell/react": "workspace:*",

apps/examples/app/floating-footer/page.tsx

@@ -258,11 +258,12 @@ export default function FloatingFooterPage() {
 
         <Footer variant="floating" position="center">
           <button
-            aria-label="Add to cart"
-            className="flex items-center gap-2.5 rounded-full bg-primary px-7 py-3.5 text-sm font-semibold text-primary-foreground shadow-xl shadow-primary/30 transition-all hover:bg-primary/90 hover:shadow-2xl hover:shadow-primary/40 active:scale-[0.97]"
+            aria-label="Show cart"
+            className="flex items-center gap-2.5 rounded-full bg-primary px-7 py-3.5 text-sm font-semibold text-primary-foreground shadow-xl shadow-primary/30 transition-all hover:bg-primary/90 hover:shadow-2xl hover:shadow-primary/40 active:scale-[0.97] cursor-pointer"
           >
             <ShoppingCart className="size-5" />
-            <span>Add to Cart</span>
+            <span>Show Cart</span>
+            <span className="flex items-center justify-center size-5 rounded-full bg-white/20 text-[11px] font-bold">3</span>
           </button>
         </Footer>
       </AppShell>

apps/examples/app/reveal-header/page.tsx

@@ -1,8 +1,10 @@
 "use client";
 
-import { AppShell, Header, Content, MotionProvider } from "@appshell/react";
+import { useState } from "react";
+import { AppShell, Header, Content, HeaderNav, HeaderNavItem, MotionProvider } from "@appshell/react";
 import { framerMotionAdapter } from "@appshell/react/motion-framer";
-import { Search, SlidersHorizontal, Heart, Download, MapPin, Eye } from "lucide-react";
+import type { HeaderBehavior } from "@appshell/react";
+import { Search, SlidersHorizontal, Heart, Download, MapPin, Eye, Navigation, Type, SearchCheck, Layers } from "lucide-react";
 
 const photos = [
   {
@@ -123,18 +125,56 @@ function formatLikes(n: number) {
   return n >= 1000 ? `${(n / 1000).toFixed(1)}k` : String(n);
 }
 
+const tabs: { label: string; behavior: HeaderBehavior; icon: React.ReactNode; description: string }[] = [
+  {
+    label: "Nav",
+    behavior: "reveal-nav",
+    icon: <Navigation className="size-3.5" />,
+    description: "Reveals the nav bar on scroll up",
+  },
+  {
+    label: "Context",
+    behavior: "reveal-context",
+    icon: <Type className="size-3.5" />,
+    description: "Reveals the title & subtitle on scroll up",
+  },
+  {
+    label: "Search",
+    behavior: "reveal-search",
+    icon: <SearchCheck className="size-3.5" />,
+    description: "Reveals the search row on scroll up",
+  },
+  {
+    label: "All",
+    behavior: "reveal-all",
+    icon: <Layers className="size-3.5" />,
+    description: "Reveals all rows on scroll up",
+  },
+];
+
 export default function RevealHeaderPage() {
+  const [activeIndex, setActiveIndex] = useState(0);
+  const activeBehavior = tabs[activeIndex].behavior;
+
   return (
     <MotionProvider adapter={framerMotionAdapter}>
       <AppShell safeArea>
         <Header
-          behavior="reveal-nav"
+          behavior={activeBehavior}
           theme="light"
           logo={
             <span className="text-lg font-bold tracking-tight">Discover</span>
           }
-          title="Explore"
-          subtitle="Scroll down to see the header hide, scroll up to reveal it"
+          nav={
+            <HeaderNav>
+              <HeaderNavItem label="Explore" active />
+              <HeaderNavItem label="Collections" />
+              <HeaderNavItem label="Photographers" />
+              <HeaderNavItem label="Trending" />
+            </HeaderNav>
+          }
+          title="Explore Photography"
+          subtitle="Scroll down to hide the header, then scroll up to see which rows reveal"
           searchContent={
             <div className="flex items-center gap-2">
               <div className="relative flex-1">
@@ -147,7 +187,7 @@ export default function RevealHeaderPage() {
               </div>
               <button
                 type="button"
-                className="flex items-center gap-1.5 rounded-xl border border-gray-200/80 bg-white px-3.5 py-2.5 text-sm font-medium text-gray-600 hover:bg-gray-50 hover:border-gray-300 transition-all"
+                className="flex items-center gap-1.5 rounded-xl border border-gray-200/80 bg-white px-3.5 py-2.5 text-sm font-medium text-gray-600 hover:bg-gray-50 hover:border-gray-300 transition-all cursor-pointer"
               >
                 <SlidersHorizontal className="size-4" />
                 <span className="hidden sm:inline">Filters</span>
@@ -157,12 +197,46 @@ export default function RevealHeaderPage() {
           actions={
             <button
               type="button"
-              className="rounded-xl bg-gray-900 px-4 py-2 text-sm font-medium text-white hover:bg-gray-800 transition-colors"
+              className="rounded-xl bg-gray-900 px-4 py-2 text-sm font-medium text-white hover:bg-gray-800 transition-colors cursor-pointer"
             >
               Upload
             </button>
           }
         />
+
+        {/* Sticky tab switcher below header */}
+        <div className="sticky top-14 z-40 w-full border-b border-gray-100 bg-white/90 backdrop-blur-xl">
+          <div className="mx-auto max-w-5xl px-4 sm:px-6 py-3">
+            <div className="flex items-center gap-2 overflow-x-auto no-scrollbar">
+              <span className="shrink-0 text-xs font-medium text-gray-400 uppercase tracking-wider mr-1">
+                Reveal variant
+              </span>
+              {tabs.map((tab, i) => (
+                <button
+                  key={tab.behavior}
+                  type="button"
+                  onClick={() => setActiveIndex(i)}
+                  className={`
+                    shrink-0 flex items-center gap-1.5 rounded-full px-3.5 py-1.5 text-sm font-medium
+                    transition-all duration-200 cursor-pointer
+                    ${
+                      i === activeIndex
+                        ? "bg-gray-900 text-white shadow-sm"
+                        : "bg-gray-100 text-gray-600 hover:bg-gray-200 hover:text-gray-800"
+                    }
+                  `}
+                >
+                  {tab.icon}
+                  {tab.label}
+                </button>
+              ))}
+            </div>
+            <p className="mt-1.5 text-xs text-gray-400">
+              {tabs[activeIndex].description}
+            </p>
+          </div>
+        </div>
+
         <Content className="pb-8">
           <div className="mx-auto max-w-5xl px-4 sm:px-6 pt-6">
             <div className="columns-1 sm:columns-2 lg:columns-3 gap-4 space-y-4">
@@ -202,14 +276,14 @@ export default function RevealHeaderPage() {
                   <div className="absolute top-3 right-3 flex items-center gap-1.5 opacity-0 group-hover:opacity-100 transition-all duration-500 ease-out translate-y-1 group-hover:translate-y-0">
                     <button
                       type="button"
-                      className="flex items-center justify-center size-8 rounded-xl bg-white/90 backdrop-blur-sm text-gray-700 hover:bg-white hover:text-red-500 transition-colors shadow-sm"
+                      className="flex items-center justify-center size-8 rounded-xl bg-white/90 backdrop-blur-sm text-gray-700 hover:bg-white hover:text-red-500 transition-colors shadow-sm cursor-pointer"
                       aria-label="Like"
                     >
                       <Heart className="size-4" />
                     </button>
                     <button
                       type="button"
-                      className="flex items-center justify-center size-8 rounded-xl bg-white/90 backdrop-blur-sm text-gray-700 hover:bg-white hover:text-gray-900 transition-colors shadow-sm"
+                      className="flex items-center justify-center size-8 rounded-xl bg-white/90 backdrop-blur-sm text-gray-700 hover:bg-white hover:text-gray-900 transition-colors shadow-sm cursor-pointer"
                       aria-label="Download"
                     >
                       <Download className="size-4" />
@@ -236,7 +310,7 @@ export default function RevealHeaderPage() {
         {/* Floating variant indicator */}
         <div className="fixed bottom-4 left-4 z-50 flex items-center gap-1.5 rounded-full bg-black/70 backdrop-blur-sm px-3 py-1.5 text-[11px] font-mono text-white/80 shadow-lg">
           <span className="size-1.5 rounded-full bg-emerald-400 animate-pulse" />
-          behavior=&quot;reveal-nav&quot; theme=&quot;light&quot;
+          behavior=&quot;{activeBehavior}&quot; theme=&quot;light&quot;
         </div>
       </AppShell>
     </MotionProvider>

apps/examples/package.json

@@ -5,8 +5,7 @@
   "scripts": {
     "dev": "next dev --port 3001",
     "build": "next build",
-    "start": "next start --port 3001",
-    "lint": "eslint ."
+    "start": "next start --port 3001"
   },
   "dependencies": {
     "@appshell/react": "workspace:*",

apps/examples/tsconfig.tsbuildinfo

@@ -9,8 +9,9 @@ test.describe("Footer variants", () => {
     await expect(footer).toBeVisible();
 
     // Scroll down — footer should hide
-    await page.evaluate(() => window.scrollBy(0, 1200));
-    await page.waitForTimeout(500);
+    // Use scrollTo with a large value to ensure we're past the threshold on all viewports
+    await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight / 2));
+    await page.waitForTimeout(600);
     await expect(footer).not.toBeVisible();
 
     // Scroll up — footer should reappear
@@ -43,7 +44,7 @@ test.describe("Footer variants", () => {
 
   test("floating cart button is visible", async ({ page }) => {
     await page.goto("/floating-footer");
-    const floatingButton = page.getByLabel("Add to cart");
+    const floatingButton = page.getByLabel("Show cart");
     await expect(floatingButton).toBeVisible();
   });
 

e2e/footer-variants.spec.ts

@@ -0,0 +1,24 @@
+import js from "@eslint/js";
+import tseslint from "typescript-eslint";
+import reactHooks from "eslint-plugin-react-hooks";
+
+export default tseslint.config(
+  js.configs.recommended,
+  ...tseslint.configs.recommended,
+  {
+    plugins: {
+      "react-hooks": reactHooks,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      "@typescript-eslint/no-unused-vars": [
+        "error",
+        { argsIgnorePattern: "^_", varsIgnorePattern: "^_" },
+      ],
+      "@typescript-eslint/no-explicit-any": "warn",
+    },
+  },
+  {
+    ignores: ["dist/", "__tests__/", "scripts/"],
+  }
+);

packages/react/eslint.config.js

@@ -30,7 +30,11 @@
     },
     "./styles.css": "./dist/styles.css"
   },
-  "files": ["dist", "README.md", "LICENSE"],
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
   "sideEffects": false,
   "scripts": {
     "build": "tsup",
@@ -53,18 +57,22 @@
     }
   },
   "devDependencies": {
-    "@testing-library/react": "^16.3.0",
+    "@eslint/js": "^9.0.0",
     "@testing-library/jest-dom": "^6.6.0",
+    "@testing-library/react": "^16.3.0",
     "@types/react": "^19.2.0",
     "@types/react-dom": "^19.2.0",
+    "clsx": "^2.1.0",
+    "eslint": "^9.0.0",
+    "eslint-plugin-react-hooks": "^7.0.1",
     "framer-motion": "^12.6.0",
     "jsdom": "^26.1.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "tailwind-merge": "^3.3.0",
-    "clsx": "^2.1.0",
     "tsup": "^8.4.0",
-    "vitest": "^3.2.0",
-    "typescript": "^5.7.3"
+    "typescript": "^5.7.3",
+    "typescript-eslint": "^8.56.1",
+    "vitest": "^3.2.0"
   }
 }

packages/react/package.json

@@ -2,7 +2,6 @@
 
 import {
   memo,
-  type ReactNode,
   useEffect,
   useRef,
   useState,
@@ -11,7 +10,7 @@ import {
 import { cn } from "./cn";
 import { useMotion } from "./motion";
 import { useScrollDirection } from "./hooks/use-scroll-direction";
-import type { HeaderProps, HeaderBehavior } from "./types";
+import type { HeaderProps } from "./types";
 
 const themeStyles = {
   light: {
@@ -117,19 +116,19 @@ export const Header = memo(function Header({
 
   const toggleMobile = useCallback(() => setMobileOpen((o) => !o), []);
 
-  const MenuIcon = () => (
+  const menuIcon = (
     <svg className="size-6" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
       <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
     </svg>
   );
 
-  const CloseIcon = () => (
+  const closeIcon = (
     <svg className="size-6" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
       <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
     </svg>
   );
 
-  const NavRow = ({ isSticky = false }: { isSticky?: boolean }) => (
+  const renderNavRow = (isSticky = false) => (
     <nav
       data-header-nav
       className={cn(
@@ -147,7 +146,7 @@ export const Header = memo(function Header({
               onClick={toggleMobile}
               aria-label={mobileOpen ? "Close menu" : "Open menu"}
             >
-              {mobileOpen ? <CloseIcon /> : <MenuIcon />}
+              {mobileOpen ? closeIcon : menuIcon}
             </button>
           )}
           {logo}
@@ -158,7 +157,7 @@ export const Header = memo(function Header({
     </nav>
   );
 
-  const ContextRow = () =>
+  const renderContextRow = () =>
     title || subtitle ? (
       <div
         data-header-context
@@ -178,7 +177,7 @@ export const Header = memo(function Header({
       </div>
     ) : null;
 
-  const SearchRow = () =>
+  const renderSearchRow = () =>
     searchContent ? (
       <div
         data-header-search
@@ -193,7 +192,7 @@ export const Header = memo(function Header({
       </div>
     ) : null;
 
-  const MobileMenuPanel = () => (
+  const renderMobileMenuPanel = () => (
     <AnimatePresence>
       {mobileMenu && mobileOpen && (
         <motion.div
@@ -221,10 +220,10 @@ export const Header = memo(function Header({
           className
         )}
       >
-        <NavRow />
-        <ContextRow />
-        <SearchRow />
-        <MobileMenuPanel />
+        {renderNavRow()}
+        {renderContextRow()}
+        {renderSearchRow()}
+        {renderMobileMenuPanel()}
       </header>
     );
   }
@@ -239,10 +238,10 @@ export const Header = memo(function Header({
           className
         )}
       >
-        <NavRow isSticky={behavior !== "static"} />
-        <ContextRow />
-        <SearchRow />
-        <MobileMenuPanel />
+        {renderNavRow(behavior !== "static")}
+        {renderContextRow()}
+        {renderSearchRow()}
+        {renderMobileMenuPanel()}
       </header>
 
       {hasRevealEffect && (
@@ -260,9 +259,9 @@ export const Header = memo(function Header({
                 t.wrapper
               )}
             >
-              {shouldShowInOverlay("nav") && <NavRow />}
-              {shouldShowInOverlay("context") && <ContextRow />}
-              {shouldShowInOverlay("search") && <SearchRow />}
+              {shouldShowInOverlay("nav") && renderNavRow()}
+              {shouldShowInOverlay("context") && renderContextRow()}
+              {shouldShowInOverlay("search") && renderSearchRow()}
             </motion.div>
           )}
         </AnimatePresence>