Single Pricing Card

A single centered pricing card for a one-plan display: plan name, large price with an optional billing period, a call-to-action button, and a checklist of included features below a hairline divider. An optional footnote sits under the card.

By Staaarter Team

Feature

Docs

Live preview

Docs

Installation

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

npx shadcn add https://staaarter.com/r/single-pricing-card.json

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

Usage

The file also exports feature145Demo, 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 { Feature145, feature145Demo } from "@/components/blocks/feature/feature145";

export default function Page() {
  return <Feature145 {...feature145Demo} />;
}

Props

Prop	Type	Default	Description
eyebrow	string	undefined	Small label above the card.
planName	string	none	Name of the plan shown at the top of the card.
price	string	none	The large price figure, e.g. "$29".
period	string	undefined	Billing period shown next to the price, e.g. "/month".
description	string	undefined	Short line under the plan name.
features	string[]	none	Checklist of included features.
cta	{ label: string; href: string }	none	The call-to-action button label and destination.
footnote	string	undefined	Small print under the card, e.g. a trial disclaimer.
className	string	none	Extra classes for the outer section element.

Behavior notes

This is a plain Server Component, the CTA is a real next/link styled as a button via Button's `render` prop, not a form submission.
There is only one plan/card, this block is intended for a single-tier pricing page or an add-on upsell, not a plan comparison grid.

More Feature Blocks

View all →

Full-Bleed Workspace Band

Two-column header above a full-bleed image band with a live view switcher, closing on three numbered captions.

Center-Line Journey Timeline

Vertical hairline timeline alternating stages either side, dropping a phone frame on one step.

Figure-Led Evidence Rows

Tall image with a floating before-and-after card, leading into oversized-figure evidence rows.

Staircase Asset Trio

Three image tiles stepping down the page in a staircase, each floating a different live asset.

Sticky Reference List

Sticky heading column beside three labelled groups of checked capabilities, closing on a footnote.

Day Timeline Rows

Hairline rows walking through one working day, stamped with time and a live approval card inline.