Componentnavigation0.53 KB gzipZero dependencies

Sticky Footer

Sticky bottom bar that stays visible during scroll.

Preview

Live Preview

Sticky

$90

Installation

Tokens guide →

Add to your project via CLI (zero dependencies, code you own):

npx bigbullui add sticky-footer

Or install the full npm package:

npm install bigbullui

Usage

Open in StackBlitz

import { StickyFooter } from "@/components/ui/sticky-footer";

<StickyFooter />

Usage guidance

Use Sticky Footer when a ticket stub surface needs Sticky bottom bar that stays visible during scroll. Keep props minimal and prefer composition with sibling stubs.

Avoid Sticky Footer for long form flows or dense data grids where a dedicated layout block fits better.

Source code

sticky-footer.tsx

Zero dependencies (only React + utils). Copy and paste directly into your project:

"use client";

import * as React from "react";
import { cn } from "./lib/utils";

export interface StickyFooterProps extends React.HTMLAttributes<HTMLDivElement> {
  left?: React.ReactNode;
  right?: React.ReactNode;
}

/** Sticky footer toolbar anchored during scroll. */
export function StickyFooter({ left, right, className, children, ...props }: StickyFooterProps) {
  return (
    <div
      className={cn(
        "sticky bottom-0 z-30 flex items-center justify-between gap-4 border-t-2 border-dashed border-border bg-background/95 px-4 py-3 backdrop-blur-sm",
        className
      )}
      {...props}
    >
      <style>{`@keyframes sfUp { from { transform: translateY(100%); } to { transform: translateY(0); } }`}</style>
      <style>{`@keyframes sfUp2 { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }`}</style>
      <div className="animate-[sfUp2_0.3s_ease-out_both] motion-reduce:animate-none">{left ?? children}</div>
      <div className="shrink-0 animate-[sfUp2_0.3s_ease-out_0.1s_both] motion-reduce:animate-none">{right}</div>
    </div>
  );
}

Props

Prop	Type	Description
left	React.ReactNode
right	React.ReactNode