Docs
Installation
A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its badge, button dependencies and any missing npm packages, and installs them straight into your project.
npx shadcn add https://staaarter.com/r/money-back-guarantee.jsonPrefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/pricing/pricing10.tsx instead.
Usage
The file also exports pricing10Demo, 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 { Pricing10, pricing10Demo } from "@/components/blocks/pricing/pricing10"; export default function Page() { return <Pricing10 {...pricing10Demo} />; }
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| heading | ReactNode | undefined | Centered headline above the pricing cards. |
| description | string | undefined | Supporting subtext below the heading. |
| plans | PricingPlan[] | none | Pricing tier cards (2-3 recommended). Required. |
| guaranteeHeading | string | none | Heading inside the guarantee banner, e.g. "30-day money-back guarantee". Required. |
| guaranteeText | string | none | Supporting copy inside the guarantee banner. Required. |
| className | string | none | Extra classes for the outer section element. |
Types
type PricingPlan = { name: string; price: string; period?: string; description?: string; features: string[]; ctaLabel: string; ctaHref?: string; highlighted?: boolean; };
Behavior notes
- This block is fully static: a Server Component with zero event handlers. The guarantee banner is decorative reassurance copy, not a live policy check against any billing system.
- The ShieldCheck icon is fixed in the component; it is not configurable per-plan or via props.
- All pricing card CTA buttons are inert placeholders (href defaults to "#" in the demo) with no real navigation or checkout wired up.
More Pricing Blocks
View all →Three Tier Cards
Classic three-column pricing cards with one plan visually highlighted as the recommended choice.
Monthly/Yearly Toggle
Three-tier pricing cards with a real billing-period toggle that switches every displayed price.
Single Plan Highlight
One centered, larger card for a single plan with a big price, full feature list, and a primary CTA.
Comparison Table
A full feature-matrix table comparing 3-4 plan tiers row by row, with a horizontal scroll fallback on mobile.
Enterprise Contact Card
A standard self-serve plan card next to a distinctly-styled Enterprise card with custom-quote messaging.
Pricing With Testimonial
Pricing cards paired with a single customer quote block for social proof, side by side on large screens.