Skip to main content
Clever Ops

Contact Callback Strip

Slim request-a-callback band in React, one tel field, a morning or afternoon window picker and an honest callback promise, collapsing to a confirmation. Tailwind micro form.

Preview & code

Loading Contact Callback Strip preview

Installation

pnpm dlx shadcn@latest add @cleverui/contact-callback-strip

Requires the @cleverui registry in your components.json, a one-off, two-line setup.

Usage

tsx
import { ContactCallbackStrip } from '@/components/blocks/contact-callback-strip'
Exampletsx
'use client'

import { ContactCallbackStrip } from '@/components/blocks/contact-callback-strip'

export default function ContactCallbackStripDemo() {
  return (
    <div className="py-10 sm:py-14">
      <ContactCallbackStrip
        heading="Prefer we call you?"
        promise="Leave a number and a real person from Northline calls back within two business hours, mornings or afternoons, your pick."
        phoneLabel="Phone number"
        windows={['Morning', 'Afternoon']}
        submitLabel="Request callback"
        successMessage="Locked in, we'll call you then."
        onSubmit={() => {
          // demo settles success state via the component
        }}
      />
    </div>
  )
}

API reference

ContactCallbackStrip accepts the following props.

PropTypeDefaultDescription
headingstring'Prefer we call you?'
promisestring'Leave a number and a real person calls back within two business hours.'quiet honest sentence under the heading, plain text, never a status pill
windowsstring[][...DEFAULT_WINDOWS]call-window options rendered as a segmented radio row
phoneLabelstring'Phone number'visible label above the tel input
onSubmit*(data: { phone: string; window: string }) => voidcalled with the validated number and chosen window
submitLabelstring'Request callback'
successMessagestring"Locked in, we'll call you then."mono confirmation line shown after submit
headingLevel2 | 32

…plus everything from Omit< React.HTMLAttributes<HTMLElement>, 'onSubmit' | 'onDrag' | 'onDragStart' | 'onDragEnd' | 'onAnimationStart' >: className, event handlers, aria attributes and the rest pass straight through.

Frequently asked questions

How do I install the Contact Callback Strip component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/contact-callback-strip`. The shadcn CLI copies the source into your project, you own the code from that point. You can also copy the source directly from this page.

What dependencies does Contact Callback Strip require?

Contact Callback Strip uses motion and lucide-react on top of React and Tailwind CSS. You don't need to install them manually, the shadcn CLI resolves and installs npm dependencies automatically when you add the component.

Can I theme Contact Callback Strip to match my brand?

Yes. The component is styled entirely with Tailwind utilities over standard design tokens (primary, background, muted, border), so it inherits your existing shadcn/ui theme automatically. Change your CSS variables and the component follows, no source edits needed for palette, radius, or fonts.

Want this built for you?

CleverUI is built by the Clever Ops web team. If you'd rather ship a hand-coded, fast, custom website than assemble one, we build them for Australian businesses every week.

Explore web development services