Billing Managed Services Pricing

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its avatar, badge, button dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/billing/billing72.tsx instead.

Usage

The file also exports billing72Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Billing72, billing72Demo } from "@/components/blocks/billing/billing72";

export default function Page() {
  return <Billing72 {...billing72Demo} />;
}

Props

Behavior notes

• This is a static display block, no client-side state, the split layout and every value render directly from props.
• The expert profile panel (avatar, name, role, availability) only renders when expertName is set, so the block works as a plain pricing card without a named expert too.
• The avatar falls back to initials computed from expertName whenever expertAvatarSrc is omitted or the image fails to load, using the same avatar-fallback pattern as the rest of the UI kit.
• price, priceNote, and setupFee are all plain strings, so currency formatting and whether to show cents is entirely up to the caller.
• Both CTAs are next/link buttons, the primary one always renders, the secondary one only when secondaryHref is provided.

Frequently asked questions