Staaarter

Enterprise Contact Card

A two-card layout: a standard self-serve plan card with a real price and feature list, beside a distinctly-styled "Enterprise" card with no price, custom-quote messaging, a "Contact sales" CTA, and its own list of enterprise-only feature bullets.

By Staaarter Team
Pricing
Docs
Live preview

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.json

Prefer 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

PropTypeDefaultDescription
headingstringundefinedOptional section heading above the cards.
descriptionstringundefinedOptional supporting text under the heading.
standardStandardPlannoneThe self-serve plan card on the left.
enterpriseEnterprisePlannoneThe custom-quote card on the right.
classNamestringnoneExtra 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.