@sonordev/site-kit/cta-bar

The Liquid Glass mobile CTA bar (6.1.0). A floating frosted capsule that keeps a site's one or two highest-intent actions a thumb away on phones.

It replaces a hand-rolled sticky mobile bar, and handles what each of those ends up solving on its own:

Use it

// app/layout.tsx (a server component)
import Link from 'next/link'
import { Phone, ClipboardCheck } from 'lucide-react'
import { CtaBar, CtaBarAction } from '@sonordev/site-kit/cta-bar'

<SiteKitLayout>
  <Header />
  <main>{children}</main>
  <Footer />
  <CtaBar label="Call or request a quote" hideOver="#quote">
    <CtaBarAction href="tel:+15555550100" variant="secondary" icon={<Phone />}>
      Call now
    </CtaBarAction>
    <CtaBarAction as={Link} href="/quote" icon={<ClipboardCheck />}>
      Free quote
    </CtaBarAction>
  </CtaBar>
</SiteKitLayout>

Rules:

• Render it once per page: at the layout root for a site-wide bar, or inside the page for a page-specific one. It's a labelled <aside>, valid at either depth; the kit's axe gate covers both placements.

• Never inside a blurred header. backdrop-filter on an ancestor becomes the containing block for this fixed bar and clips it.

• Delete the site's own bar and its compensating padding-bottom. The kit renders a spacer that reserves the bar's height at the end of the page.

• Better: pad the footer instead of adding a strip after it. A spacer after a dark footer is a blank band in the page colour. Pass spacer={false} and let the footer's own background run under the bar:

  Copy

  footer { padding-bottom: calc(2rem + var(--sk-cta-bar-space, 0px)); }

  --sk-cta-bar-space is set on <html> only while a bar is present and below its breakpoint, so desktop and bar-less pages get 0px.

• Delete any --sk-echo-offset-bottom rule written for the old bar. The kit sets it while the bar is on screen.

CtaBar and CtaBarAction are plain components with no hooks, so a server layout can pass as={Link} and Link children without crossing a client boundary. The only client code is a childless behaviour island the bar mounts itself (about 4.4 KB gzipped for the whole module, glass and analytics included).

<CtaBar>

Client navigation re-finds showAfter and hideOver targets on each route.

<CtaBarAction>

Everything else (href, onClick, target, aria-*, data-*) passes through. A button without an explicit type gets type="button".

Theme it

Colours and geometry are custom properties. Set them on :root so the bar, its spacer and the Echo clearance all read the same values.

:root {
  --sk-cta-primary-bg: var(--brand-primary);   /* default: --sk-primary, then #2563eb */
  --sk-cta-primary-text: #fff;
  --sk-cta-bar-text: var(--ink-900);           /* secondary label colour */
}

A dark bar: scope the tint to the bar, not :root. The Echo window reads the same --sk-glass-tint, and its text follows --sk-text-primary (dark by default). A dark tint on :root puts that dark text on dark glass. Either scope the bar's colours to the bar:

.sk-cta-bar {
  --sk-glass-tint: #0b0a09;
  --sk-cta-bar-text: #fff;
  --sk-cta-primary-bg: #fff;
  --sk-cta-primary-text: #0b0a09;
}

or theme the whole kit dark with --sk-bg and --sk-text-primary on :root, which both surfaces (and site-kit forms) read.

The glass

The surface is the kit's one Liquid Glass recipe (src/shared/glass.tsx), the same material as the Echo launcher and chat window, so the bar and the chat always match. The tint is mostly opaque (72%): the tint carries the contrast, and the blur only softens what shows through. Browsers without backdrop-filter, and visitors who ask their OS for reduced transparency or more contrast, get the same surface solid. Reduced motion turns the transitions off. JS-off visitors get the bar, visible, through @media (scripting: none).

On phones where the layout viewport runs taller than the visible one (in-app browsers, toolbar animations), mount VisualViewportGap from @sonordev/site-kit/client; the bar already adds --sk-vv-layout-gap to its bottom.