Single Plan Highlight

One centered, larger card for a single plan with a big price, full feature list, and a primary CTA, plus a small secondary link below for pointing to a fuller comparison. Good fit for products with one plan, or a single "main" offer.

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/single-plan-highlight.json

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

Usage

The file also exports pricing3Demo, 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 { Pricing3, pricing3Demo } from "@/components/blocks/pricing/pricing3";

export default function Page() {
  return <Pricing3 {...pricing3Demo} />;
}

Props

Prop	Type	Default	Description
badgeLabel	string	undefined	Small pill above the plan name, e.g. "Full access".
planName	string	none	Name of the plan.
description	string	undefined	One-line description under the plan name.
price	string	none	The large price figure, e.g. "$49".
period	string	none	Billing period text next to the price, e.g. "/month".
features	string[]	none	Feature checklist; automatically lays out as two columns once there are more than 6 items.
cta	{ label: string; href?: string }	none	Primary call-to-action button.
secondaryText	string	undefined	Small text below the card, e.g. a link to a full comparison.
secondaryHref	string	undefined	If set, secondaryText renders as a link to this URL.
className	string	none	Extra classes for the outer section element.

Behavior notes

This is a fully static server component; nothing on the page changes at runtime.
The feature checklist automatically switches from a single column to a two-column grid on small screens and up once features.length exceeds 6, purely a CSS/layout decision made at render time from the array length.
The primary CTA button is an inert placeholder with href="#"; secondaryText renders as plain text unless secondaryHref is supplied, in which case it becomes a link (also inert, href="#" in the demo).

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.

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.

Tabbed Audience Pricing

Pill tabs switch between separate plan sets for different audiences, e.g. individuals vs. teams.