Docs
Installation
A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button, badge dependencies and any missing npm packages, and installs them straight into your project.
npx shadcn add https://staaarter.com/r/enterprise-contact-card.jsonPrefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/pricing/pricing5.tsx instead.
Usage
The file also exports pricing5Demo, 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 { Pricing5, pricing5Demo } from "@/components/blocks/pricing/pricing5"; export default function Page() { return <Pricing5 {...pricing5Demo} />; }
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| heading | string | undefined | Optional section heading above the cards. |
| description | string | undefined | Optional supporting text under the heading. |
| standard | StandardPlan | none | The self-serve plan card on the left. |
| enterprise | EnterprisePlan | none | The custom-quote card on the right. |
| className | string | none | Extra classes for the outer section element. |
Types
type StandardPlan = { name: string; description: string; price: string; period: string; features: string[]; cta: { label: string; href?: string }; }; type EnterprisePlan = { name: string; headline: string; description: string; features: string[]; cta: { label: string; href?: string }; };
Behavior notes
- This is a fully static server component; nothing on the page changes at runtime.
- The enterprise card deliberately shows no numeric price at all, only a name badge, a custom headline, description, and its own feature bullets, to read as a distinct "talk to us" offer rather than a fourth pricing tier.
- The enterprise card uses a primary-tinted background and border to visually separate it from the standard plan card without relying on a literal color class.
- Both CTA buttons are inert placeholders with href="#", no real checkout or contact-form submission 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.
Pricing With Testimonial
Pricing cards paired with a single customer quote block for social proof, side by side on large screens.
Tabbed Audience Pricing
Pill tabs switch between separate plan sets for different audiences, e.g. individuals vs. teams.