Floating Action

An elevated pill for the primary action, with left, center, and right positioning.

variant="floating" position="center"footerfloatingfabposition

Open fullscreen

9:41

In this demo

Crate — record shop

What to try

Add records — the cart pill updates live
Move the pill left, center, or right

Code

app.tsx

import { AppShell, Header, Content, Footer } from "appshell-react";
import { ShoppingBag } from "lucide-react";

export default function App() {
  const [items, setItems] = useState<string[]>([]);
  // "left" | "center" | "right" — wire this up to your own position switch
  const [position, setPosition] = useState<"left" | "center" | "right">("center");

  return (
    <AppShell safeArea>
      <Header behavior="fixed" logo={<span className="font-bold">Crate</span>} />

      <Content className="pb-8">{/* Product grid */}</Content>

      <Footer variant="floating" position={position}>
        <button className="flex items-center gap-2.5 rounded-full bg-primary py-3.5 pl-5 pr-6 text-sm font-semibold text-primary-foreground shadow-lg">
          <ShoppingBag className="size-4" />
          {items.length} records
        </button>
      </Footer>
    </AppShell>
  );
}

Tab Bar Liquid Glass Dock