Skip to main content
Clever Ops

Trial Pass CTA

The first-week pass sold like a coach would, a day-by-day mini plan in three ruled rows, a plain no-lock-in honesty line, and one bold imperative CTA that closes it.

Preview & code

Loading Trial Pass CTA preview
Open in v0

Installation

pnpm dlx shadcn@latest add @cleverui/trial-pass-cta

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

Usage

tsx
import { TrialPassCta } from '@/components/blocks/trial-pass-cta'
Exampletsx
'use client'

import { TrialPassCta } from '@/components/blocks/trial-pass-cta'

export default function TrialPassCtaDemo() {
  return (
    <TrialPassCta
      eyebrow="Start here"
      heading="One week. On us."
      honestyLine="No lock-in. No card on file. If it's not for you, no hard feelings."
      ctaLabel="Claim your week"
      onClaim={() => {}}
      plan={[
        {
          day: 'Day 1',
          title: 'Intro session + movement screen',
          detail: 'Meet your coach. Map mobility limits. Leave with a plan.',
        },
        {
          day: 'Day 3',
          title: 'Strength fundamentals',
          detail: 'Squat, hinge, press. Technique first, load second.',
        },
        {
          day: 'Day 6',
          title: 'Engine class + debrief',
          detail: 'One hard session. Then we talk about the next 12 weeks.',
        },
      ]}
    />
  )
}

API reference

TrialPassCta accepts the following props.

PropTypeDefaultDescription
headingstring'One week. On us.'–
eyebrowstring–coach-voice kicker, e.g. START HERE
plan*TrialPassDay[]–the mini plan, 3 rows is the sweet spot
honestyLinestring"No lock-in. No card on file. If it's not for you, no hard feelings."plain-spoken line under the plan
ctaLabelstring'Claim your week'–
hrefstring–CTA renders as an anchor when set
onClaim() => void–CTA renders as a button when set and href is absent

…plus everything from React.HTMLAttributes<HTMLElement>: className, event handlers, aria attributes and the rest pass straight through.

Referenced types

Typestsx
export interface TrialPassDay {
  /** short mark like Day 1 */
  day: string
  /** renders uppercase */
  title: string
  detail?: string
}

Frequently asked questions

How do I install the Trial Pass CTA component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/trial-pass-cta`. 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 Trial Pass CTA require?

Trial Pass CTA uses motion on top of React and Tailwind CSS. You don't need to install it manually, the shadcn CLI resolves and installs npm dependencies automatically when you add the component.

Can I theme Trial Pass CTA 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