Preview

Props

The Pricing_2 block accepts the following configuration from PayloadCMS:

Installation

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

For detailed setup instructions, see the Registry Setup Guide.

Registry Dependencies

This component uses the following registry components:

• Button - Customizable button component with variants
• Header Field - PayloadCMS text field for headers
• Subheader Field - PayloadCMS text field for subheaders
• Description Field - PayloadCMS text field for 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
• PayloadCMS - Headless CMS and application framework
• Lucide React - Beautiful & consistent icon toolkit (provides Check icon for feature lists)

Usage Notes

Default Configuration

The Pricing_2 block comes with three pre-configured pricing tiers:

• Starter ($29/mo): Perfect for small teams with 5 features including basic analytics and email support
• Professional ($79/mo): Marked as Popular, includes 6 features with advanced analytics and priority support
• Enterprise ($199/mo): For large organizations with 8 features including unlimited storage and 24/7 support

Styling Features

• Popular Badge: Tiers marked with isPopular: true display a gradient badge at the top and use the default button variant (filled) instead of the outline variant
• Responsive Layout: Cards stack vertically on mobile and display in a 3-column grid on desktop (md breakpoint)
• Card Design: Each tier uses a rounded card with border, muted background, and shadow for depth
• Feature Lists: Features display with a dashed divider above and check mark icons beside each item

Customization Tips

• Set minRows: 0 allows you to create pricing sections without any tiers (useful for placeholder pages)
• Maximum of 4 pricing tiers ensures optimal layout on standard screen sizes
• Each tier can have up to 15 features, though 5-8 features per tier is recommended for readability
• Button styling automatically adapts based on the isPopular flag (default vs outline variant)