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/logos-below-pricing.jsonPrefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/pricing/pricing16.tsx instead.
Usage
The file also exports pricing16Demo, 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 { Pricing16, pricing16Demo } from "@/components/blocks/pricing/pricing16"; export default function Page() { return <Pricing16 {...pricing16Demo} />; }
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| heading | ReactNode | none | Main section headline. |
| description | string | undefined | Supporting subtext below the heading. |
| tiers | Pricing16Tier[] | none | The pricing cards to render (2-3 recommended). |
| logosLabel | string | "Trusted by teams at" | Small caption above the logo strip. |
| logos | string[] | none | Wordmark text for each placeholder logo; the strip only renders when non-empty. |
| className | string | none | Extra classes for the outer section element. |
Types
type Pricing16Tier = { name: string; description?: string; price: string; period?: string; features: string[]; cta: { label: string; href?: string }; highlighted?: boolean; };
Behavior notes
- The logo strip renders each `logos` entry as plain bold text in a muted color, not an image, since no real company marks were available; swap in real `<img>`/`MediaSlot` logos if this is adapted for production use.
- This block is fully static presentation with no interactivity.
- All 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.