Sticky CTA Bar React component for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Sticky CTA Bar is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans

Usage

Import StickyCtaBar from @/components/ui/sticky-cta-bar.

import { Heart } from "lucide-react"
import { Button } from "@/components/ui/button"
import { StickyCtaBar } from "@/components/ui/sticky-cta-bar"

export function ListingBuyBar({ onBuy }: { onBuy: () => Promise<void> }) {
  return (
    <StickyCtaBar
      price={349}
      compareAtPrice={449}
      caption="Tax included · Free shipping"
      locale="en-US"
      actionLabel="Add to cart"
      tone="brand"
      onAction={onBuy}
      secondaryAction={
        <Button variant="soft" size="icon" radius="full" aria-label="Save">
          <Heart />
        </Button>
      }
      labels={{ region: "Purchase", compare: "Old price" }}
    />
  )
}

Props

• pricedefault 0
  number

  The amount, formatted with locale and currency ("$489,000", "$1,284.90"). 0 hides the price row; pass summary for "Free" or anything else.

• currencydefault "USD"
  string

  ISO 4217 code, shown with the narrow symbol ($, €, £). Empty shows the plain number.

• localedefault ""
  string

  Intl locale for the price, like en-US. Empty uses the UIProvider locale, then the page's language. The demo uses en-US.

• priceSuffixdefault ""
  string

  Smaller muted text right after the price: "/mo", "/night".

• compareAtPricedefault 0
  number

  The old price, struck through at the start of the line under the price and read as "Was …" by screen readers. Shown only when it is above price.

• badge
  ReactNode

  A small badge after the price, like <Badge tone="danger" variant="solid" size="sm">−25%</Badge>. It gives way to the price when a very narrow phone has no room for both.

• captiondefault ""
  string

  One muted line under the price, like "Tax included · Free shipping". Hidden on phones under 360px wide.

• actionLabeldefault "Continue"
  string

  The primary button's text. On a narrow phone a long label truncates before the price is ever cut.

• summary
  ReactNode

  Replaces the whole price block: "2 tickets · Madison Square Garden", a seller, a sale badge.

• actionIcon
  ReactNode

  An icon after the primary button's label, like an arrow.

• onAction
  (() => void | Promise<unknown>)

  Runs on the primary button. Return a promise and the button shows its spinner (same width, aria-busy) until it settles.

• actionProps
  Omit<ButtonProps, "children" | "onClick" | "size" | "tone" | "radius" | "color">

  Anything else for the primary Button: leftIcon, type="submit" with form, aria-*.

• action
  ReactNode

  Replaces the primary button entirely, for example a <Button asChild> link to the checkout.

• secondaryAction
  ReactNode

  An icon button before the primary: <Button variant="soft" size="icon" radius="full" aria-label="Save">. Match its size to the bar (icon-sm / icon / icon-lg).

• variantdefault "bar"
  "bar" | "floating"

  bar: an edge-to-edge glass bar with a hairline on top. floating: an inset rounded card with a floating shadow, 12px above the safe area.

• tonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  The primary button's color. Brand orange suits the one checkout action.

• colordefault ""
  string

  Any CSS color for the primary button. Replaces the tone; the text turns black or white by lightness.

• sizedefault "md"
  "sm" | "md" | "lg"

  Button size 32 / 40 / 48px (44px hit areas on touch), bar content height 56 / 64 / 72px, price 16 / 17 / 19px.

• radiusdefault "md"
  "none" | "sm" | "md" | "lg" | "full"

  The buttons' corner shape, scaled with the size like the button's.

• loadingdefault false
  boolean

  The primary button's spinner. It keeps its width and focus and ignores presses.

• disableddefault false
  boolean

  Dims and blocks the primary action.

• showOndefault "always"
  "always" | "scroll" | "anchor"

  always: on screen from the start. scroll: after threshold px of scrolling. anchor: while anchorRef (the page's own buy button) is out of view, not reached yet or scrolled past. Anything but always renders hidden on the server, so it never flashes.

• thresholddefault 200
  number

  Scroll distance in px before the bar appears with showOn="scroll".

• anchorRef
  RefObject<HTMLElement | null>

  The in-page buy button for showOn="anchor", watched with an IntersectionObserver on the scroll container. Without it the bar shows always (with a dev warning).

• hideOnScrolldefault false
  boolean

  Slides away with the finger while scrolling down and comes back when scrolling up and at the end of the page.

• keyboarddefault "hide"
  "hide" | "lift" | "none"

  While the on-screen keyboard is open: hide keeps a coupon field uncovered, lift rides on top of the keyboard (chat-like flows), none does nothing.

• positiondefault "fixed"
  "fixed" | "sticky" | "absolute"

  fixed: to the viewport, above a bottom tab bar (bottom: var(--bottom-bar-offset)). sticky: the last child of a scroll container (the demo's phone frame). absolute: inside a relative box.

• hideFromdefault "none"
  "none" | "md" | "lg"

  Hides the bar with CSS from this breakpoint up, where the page shows its own CTA column.

• safeAreadefault true
  boolean

  Pads the home indicator area, minus what a bottom tab bar below already covers (no double padding), and the side insets of a landscape phone. env() is 0 on desktops.

• scrollTarget
  HTMLElement | Window | RefObject<HTMLElement | null> | null

  What scrolls, for showOn, hideOnScroll and the anchor. Default: the nearest ScrollContainerProvider, else the window.

• labels
  Partial<StickyCtaBarLabels>

  Screen reader strings: region (the landmark name, "Purchase"), compare (read before the old price, "Was"). DEFAULT_STICKY_CTA_BAR_LABELS holds the English defaults.

• classNames
  Partial<Record<"inner" | "summary" | "price" | "suffix" | "compare" | "badge" | "caption" | "actions" | "secondary" | "primary", string>>

  Extra classes for the inner parts.

• className
  string

  Extra classes for the root. The bar writes --cta-bar-offset (its visible height in px, 0 while hidden) on <html> when fixed, else on its parent, so floating buttons can sit above it.

Parts

FAQ

Used in

More React mobile components