feat: animation speed control, sticky tabs example, and professional UI refactor

- Add 'speed' prop to Header and Footer (fast, normal, slow).
- Implement 'Sticky Tabs' example with secondary navigation hitching.
- Refactor examples homepage to a serious, shadcn-like registry design.
- Update component themes to use standard CSS variables (bg-background, border-border).
- Fix 'Static Header' example and ensure compatibility with safeArea.
- Clean up Vitest configuration.

Author: fyalavuz

apps/examples/app/page.tsx

@@ -0,0 +1,146 @@
+"use client";
+
+import { useState } from "react";
+import { AppShell, Header, Content, HeaderNav, HeaderNavItem, MotionProvider, cn } from "@appshell/react";
+import { framerMotionAdapter } from "@appshell/react/motion-framer";
+import { Search, Bell, User, Clock, ArrowRight, TrendingUp, Bookmark, LayoutGrid, List, Info } from "lucide-react";
+
+export default function StickyTabsPage() {
+  const [activeTab, setActiveTab] = useState("overview");
+
+  return (
+    <MotionProvider adapter={framerMotionAdapter}>
+      <AppShell safeArea>
+        <Header
+          behavior="fixed"
+          theme="light"
+          logo={
+            <div className="flex items-center gap-2">
+              <div className="size-8 rounded-lg bg-primary flex items-center justify-center">
+                <LayoutGrid className="size-5 text-primary-foreground" />
+              </div>
+              <span className="text-lg font-bold tracking-tight">Console</span>
+            </div>
+          }
+          nav={
+            <HeaderNav>
+              <HeaderNavItem label="Dashboard" active />
+              <HeaderNavItem label="Resources" />
+              <HeaderNavItem label="Activity" />
+            </HeaderNav>
+          }
+          actions={
+            <div className="flex items-center gap-1">
+              <button
+                type="button"
+                className="rounded-lg p-2 text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
+              >
+                <Search className="size-5" />
+              </button>
+              <button
+                type="button"
+                className="rounded-lg p-2 text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
+              >
+                <Bell className="size-5" />
+              </button>
+              <div className="size-8 rounded-full bg-accent ml-2 flex items-center justify-center">
+                <User className="size-5 text-muted-foreground" />
+              </div>
+            </div>
+          }
+          title="Project Infrastructure"
+          subtitle="Manage your cloud resources and deployment pipelines"
+        />
+
+        <Content className="pb-20">
+          {/* Hero Section */}
+          <div className="w-full h-48 bg-gradient-to-r from-blue-600 to-indigo-700 relative overflow-hidden">
+            <div className="absolute inset-0 opacity-10">
+              <div className="absolute top-0 left-0 w-full h-full bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-white via-transparent to-transparent scale-150" />
+            </div>
+            <div className="absolute inset-0 flex items-center justify-center text-white/20">
+              <LayoutGrid className="size-32" />
+            </div>
+          </div>
+
+          {/* Sticky Tabs Bar */}
+          <div className="sticky top-[112px] z-40 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 px-4 sm:px-6">
+            <div className="mx-auto max-w-7xl">
+              <div className="flex h-12 items-center gap-6 overflow-x-auto no-scrollbar">
+                {[
+                  { id: "overview", label: "Overview", icon: Info },
+                  { id: "resources", label: "Resources", icon: LayoutGrid },
+                  { id: "logs", label: "Logs", icon: List },
+                  { id: "settings", label: "Settings", icon: Bell },
+                ].map((tab) => (
+                  <button
+                    key={tab.id}
+                    onClick={() => setActiveTab(tab.id)}
+                    className={cn(
+                      "inline-flex items-center gap-2 border-b-2 px-1 pb-3 pt-4 text-sm font-medium transition-all hover:text-foreground",
+                      activeTab === tab.id
+                        ? "border-primary text-foreground"
+                        : "border-transparent text-muted-foreground hover:border-border"
+                    )}
+                  >
+                    <tab.icon className="size-4" />
+                    {tab.label}
+                  </button>
+                ))}
+              </div>
+            </div>
+          </div>
+
+          {/* Page Content */}
+          <div className="mx-auto max-w-7xl px-4 sm:px-6 py-8">
+            <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+              {Array.from({ length: 12 }).map((_, i) => (
+                <div
+                  key={i}
+                  className="group rounded-xl border bg-card p-6 text-card-foreground shadow-sm transition-all hover:shadow-md"
+                >
+                  <div className="mb-4 flex items-center justify-between">
+                    <div className="size-10 rounded-lg bg-blue-500/10 flex items-center justify-center text-blue-600">
+                      <LayoutGrid className="size-6" />
+                    </div>
+                    <div className="flex items-center gap-1.5 rounded-full bg-emerald-500/10 px-2.5 py-0.5 text-xs font-medium text-emerald-600">
+                      <span className="size-1.5 rounded-full bg-emerald-500" />
+                      Running
+                    </div>
+                  </div>
+                  <h3 className="text-lg font-semibold leading-none tracking-tight">
+                    Resource Instance {i + 1}
+                  </h3>
+                  <p className="mt-2 text-sm text-muted-foreground leading-relaxed">
+                    Standard high-performance instance deployed in Region us-east-1.
+                    Optimized for compute-intensive workloads.
+                  </p>
+                  <div className="mt-6 flex items-center justify-between pt-4 border-t">
+                    <div className="text-xs text-muted-foreground font-mono">
+                      i-0a8f92b{i}
+                    </div>
+                    <button className="text-xs font-medium text-primary hover:underline flex items-center gap-1">
+                      Manage <ArrowRight className="size-3" />
+                    </button>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </Content>
+
+        {/* Behavior indicator */}
+        <div className="fixed bottom-4 left-4 z-50 flex flex-col gap-2 rounded-2xl bg-zinc-950/90 p-3 text-white/90 shadow-2xl backdrop-blur-md border border-white/10 sm:flex-row sm:items-center sm:rounded-full sm:px-4 sm:py-2">
+          <div className="flex items-center gap-2 text-[11px] font-mono whitespace-nowrap border-b border-white/10 pb-2 sm:border-b-0 sm:pb-0 sm:pr-3 sm:border-r sm:mr-1">
+            <span className="size-2 rounded-full bg-blue-500 animate-pulse" />
+            HEADER: behavior=&quot;fixed&quot;
+          </div>
+          <div className="flex items-center gap-2 text-[11px] font-mono whitespace-nowrap">
+            <span className="size-2 rounded-full bg-emerald-500" />
+            TABS: sticky top-[112px]
+          </div>
+        </div>
+      </AppShell>
+    </MotionProvider>
+  );
+}

apps/examples/app/sticky-tabs/page.tsx

@@ -42,13 +42,13 @@ describe("Header", () => {
   it("applies light theme by default", () => {
     const { container } = renderHeader();
     const header = container.querySelector("header");
-    expect(header?.className).toContain("bg-white");
+    expect(header?.className).toContain("bg-background");
   });
 
   it("applies dark theme", () => {
     const { container } = renderHeader({ theme: "dark" });
     const header = container.querySelector("header");
-    expect(header?.className).toContain("bg-gray-900");
+    expect(header?.className).toContain("bg-zinc-950");
   });
 
   it("renders mobile menu toggle", () => {

packages/react/__tests__/Header.test.tsx

@@ -4,7 +4,13 @@ import { memo } from "react";
 import { cn } from "./cn";
 import { useMotion } from "./motion";
 import { useScrollDirection } from "./hooks/use-scroll-direction";
-import type { FooterProps, FooterItemProps } from "./types";
+import type { FooterProps, FooterItemProps, AnimationSpeed } from "./types";
+
+const speedMap: Record<AnimationSpeed, number> = {
+  fast: 0.15,
+  normal: 0.3,
+  slow: 0.6,
+};
 
 export const FooterItem = memo(function FooterItem({
   icon,
@@ -51,12 +57,14 @@ export const Footer = memo(function Footer({
   variant = "tab-bar",
   behavior = "static",
   position = "center",
+  speed = "normal",
   className,
   children,
 }: FooterProps) {
   const { motion, AnimatePresence } = useMotion();
   const scrollDirection = useScrollDirection();
   const shouldHide = behavior === "auto-hide" && scrollDirection === "down";
+  const duration = speedMap[speed];
 
   if (variant === "floating") {
     const positionClass = {
@@ -81,7 +89,7 @@ export const Footer = memo(function Footer({
               initial={{ y: 20, opacity: 0 }}
               animate={{ y: 0, opacity: 1 }}
               exit={{ y: 20, opacity: 0 }}
-              transition={{ duration: 0.2, ease: [0.16, 1, 0.3, 1] }}
+              transition={{ duration: duration, ease: [0.16, 1, 0.3, 1] }}
               className="pointer-events-auto"
             >
               {children}
@@ -100,7 +108,7 @@ export const Footer = memo(function Footer({
             initial={{ y: 48 }}
             animate={{ y: 0 }}
             exit={{ y: 48 }}
-            transition={{ duration: 0.2, ease: [0.16, 1, 0.3, 1] }}
+            transition={{ duration: duration, ease: [0.16, 1, 0.3, 1] }}
             className={cn(
               "fixed bottom-0 left-0 right-0 z-50 h-12 border-t bg-background/95 backdrop-blur-xl",
               className
@@ -124,7 +132,7 @@ export const Footer = memo(function Footer({
           initial={{ y: 80 }}
           animate={{ y: 0 }}
           exit={{ y: 80 }}
-          transition={{ duration: 0.25, ease: [0.16, 1, 0.3, 1] }}
+          transition={{ duration: duration, ease: [0.16, 1, 0.3, 1] }}
           className={cn(
             "fixed bottom-0 left-0 right-0 z-50 border-t bg-background/95 backdrop-blur-xl",
             className

packages/react/src/Footer.tsx

@@ -10,16 +10,16 @@ import {
 import { cn } from "./cn";
 import { useMotion } from "./motion";
 import { useScrollDirection } from "./hooks/use-scroll-direction";
-import type { HeaderProps } from "./types";
+import type { HeaderProps, AnimationSpeed } from "./types";
 import { HeaderProvider } from "./HeaderContext";
 
 const themeStyles = {
   light: {
-    wrapper: "bg-white text-gray-900",
-    nav: "bg-white/95 border-gray-200",
-    context: "bg-white/95 border-gray-200",
-    search: "bg-white/95 border-gray-200",
-    mobile: "bg-white text-gray-900 border-gray-200",
+    wrapper: "bg-background text-foreground",
+    nav: "bg-background/95 border-border",
+    context: "bg-background/95 border-border",
+    search: "bg-background/95 border-border",
+    mobile: "bg-background text-foreground border-border",
   },
   primary: {
     wrapper: "bg-primary text-primary-foreground",
@@ -29,14 +29,27 @@ const themeStyles = {
     mobile: "bg-primary text-primary-foreground border-primary/80",
   },
   dark: {
-    wrapper: "bg-gray-900 text-white",
-    nav: "bg-gray-900 border-gray-800",
-    context: "bg-gray-900 border-gray-800",
-    search: "bg-gray-900 border-gray-800",
-    mobile: "bg-gray-900 text-white border-gray-800",
+    wrapper: "bg-zinc-950 text-slate-50",
+    nav: "bg-zinc-950 border-zinc-800",
+    context: "bg-zinc-950 border-zinc-800",
+    search: "bg-zinc-950 border-zinc-800",
+    mobile: "bg-zinc-950 text-slate-50 border-zinc-800",
+  },
+  none: {
+    wrapper: "",
+    nav: "",
+    context: "",
+    search: "",
+    mobile: "",
   },
 } as const;
 
+const speedMap: Record<AnimationSpeed, number> = {
+  fast: 0.15,
+  normal: 0.3,
+  slow: 0.6,
+};
+
 export const Header = memo(function Header({
   logo,
   actions,
@@ -46,6 +59,7 @@ export const Header = memo(function Header({
   searchContent,
   theme = "light",
   behavior = "fixed",
+  speed = "normal",
   mobileMenu,
   onVisibilityChange,
   className,
@@ -54,6 +68,7 @@ export const Header = memo(function Header({
   const scrollDirection = useScrollDirection();
   const t = themeStyles[theme];
   const [mobileOpen, setMobileOpen] = useState(false);
+  const duration = speedMap[speed];
 
   const ghostRef = useRef<HTMLElement>(null);
   const [threshold, setThreshold] = useState(0);
@@ -149,7 +164,7 @@ export const Header = memo(function Header({
             {mobileMenu && (
               <button
                 type="button"
-                className="p-1 rounded-md hover:bg-black/5 md:hidden transition-colors"
+                className="p-1 rounded-md hover:bg-accent/50 md:hidden transition-colors"
                 onClick={toggleMobile}
                 aria-label={mobileOpen ? "Close menu" : "Open menu"}
               >
@@ -207,7 +222,7 @@ export const Header = memo(function Header({
           initial={{ height: 0, opacity: 0 }}
           animate={{ height: "auto", opacity: 1 }}
           exit={{ height: 0, opacity: 0 }}
-          transition={{ duration: 0.2, ease: [0.16, 1, 0.3, 1] }}
+          transition={{ duration: duration, ease: [0.16, 1, 0.3, 1] }}
           className={cn(
             "md:hidden overflow-hidden border-t w-full",
             t.mobile
@@ -269,7 +284,7 @@ export const Header = memo(function Header({
               initial={{ y: -8, opacity: 0 }}
               animate={{ y: 0, opacity: 1 }}
               exit={{ y: -8, opacity: 0 }}
-              transition={{ duration: 0.25, ease: [0.16, 1, 0.3, 1] }}
+              transition={{ duration: duration, ease: [0.16, 1, 0.3, 1] }}
               aria-hidden
               className={cn(
                 "fixed top-0 left-0 right-0 z-[60] shadow-lg",

packages/react/src/Header.tsx

@@ -4,6 +4,7 @@ export { Footer, FooterItem } from "./Footer";
 export { SafeArea } from "./SafeArea";
 export { Content } from "./Content";
 export { AppShellProvider, useAppShell } from "./context";
+export { HeaderProvider, useHeaderTheme } from "./HeaderContext";
 export { useScrollDirection } from "./hooks/use-scroll-direction";
 export { useSafeArea } from "./hooks/use-safe-area";
 export { MotionProvider } from "./motion";
@@ -17,6 +18,7 @@ export type {
   HeaderBehavior,
   HeaderTheme,
   HeaderProps,
+  AnimationSpeed,
   FooterVariant,
   FooterBehavior,
   FooterPosition,

packages/react/src/index.ts

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { fn } from 'storybook/test';
+
+import { Button } from './Button';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: 'Example/Button',
+  component: Button,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered',
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#story-args
+  args: { onClick: fn() },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary: Story = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    label: 'Button',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
+};