Preview

Props

The Pricing_1 block accepts the following configuration from PayloadCMS:

Installation

npx shadcn add --registry https://uifoundry.com/r pricing-1

For detailed setup instructions, see the Registry Setup Guide.

Registry Dependencies

This component uses the following registry components:

• Button - Customizable button component with variants (featured tier uses default variant, others use outline)
• Card - Card component providing the pricing tier container with header, content, title, and description sections
• Header Field - PayloadCMS text field for the main heading
• Subheader Field - PayloadCMS text field for the supporting description
• Description Field - PayloadCMS text field for tier descriptions
• Style Utils - Tailwind utility functions including cn() class merger
• Block Constants - Block slug and group constants for PayloadCMS blocks

Dependencies

This component requires the following NPM packages:

• React - JavaScript library for building user interfaces
• Next.js - React framework for production (provides Link component)
• PayloadCMS - Headless CMS and application framework
• Lucide React - Beautiful & consistent icon toolkit (provides Check icon for feature lists)

Usage Notes

Default Configuration

The Pricing_1 block comes with two pre-configured pricing tiers optimized for SaaS products:

• Developer ($299 one-time): Perfect for agencies and freelancers with 8 features including complete template, 50+ components, full source code, deployment guides, documentation, community support, 1 year of updates, and commercial license
• Founder ($49/month): For non-technical founders with 8 features including no-code editing, managed AWS hosting, custom domain, SSL & CDN, automatic backups, email support, 99.9% uptime SLA, and data export

Featured Tier System

The block includes a configurable featured tier system:

• Set config.focusIndex to highlight a specific tier (0 for first, 1 for second, etc.)
• Featured tiers display a gradient badge at the top with customizable text via config.focusLabel
• Featured tiers automatically use the default (filled) button variant for emphasis
• Non-featured tiers use the outline button variant for visual hierarchy
• Set config.focusIndex: -1 to disable the featured badge entirely

Flexible Pricing Models

The pricing configuration supports three different billing periods:

• One-time Payment: Set fixed: true - displays "$299" with no suffix (ideal for templates, licenses)
• Monthly Billing: Set monthly: true - displays "$49 / mo" (ideal for subscriptions)
• Annual Billing: Set annual: true - displays "$199 / yr" (ideal for yearly plans)

Only one pricing type should be enabled per tier for clarity.

Styling Features

• Two-Column Layout: Tiers display side-by-side on desktop (md breakpoint and up), stacked vertically on mobile
• Featured Badge: Uses a gradient background (purple to amber) with ring effects for premium feel
• Card Design: Clean card-based design with rounded corners, borders, and subtle shadows
• Dashed Divider: Visual separator between pricing details and feature lists
• Responsive Spacing: Adjusts padding and margins for optimal display on all screen sizes

Customization Tips

• The default configuration includes 2 tiers, but you can add or remove tiers as needed
• Each tier can have unlimited features, though 6-8 features per tier is recommended for readability
• The featured badge is absolutely positioned at the top center of the card (-top-3)
• Button links currently point to empty strings ("") - update these to actual checkout or signup URLs
• Consider using consistent feature counts across tiers for visual alignment
• The layout works best with 2-3 pricing tiers maximum