Plan
Description
The Plan component is a versatile and customizable pricing plan block designed to showcase different product or service tiers. It supports featured plans, price display, benefits listing, and a call-to-action button. This component is ideal for creating compelling pricing pages or comparison tables.
Installation
sabaccui add plan
Usage
Basic Plan
Preview
Basic Plan
Get started with our basic features
Perfect for individuals and small projects
What's included
5GB Storage
2 Team Members
Basic Support
Featured Plan with Ribbon
Preview
Pro Plan
Advanced features for growing businesses
€99
€129
Unlock premium features and priority support
Pro Features
Unlimited Storage
Unlimited Team Members
24/7 Priority Support
Advanced Analytics
Custom Priced Plan
Preview
Enterprise
Tailored for large organizations
Contact us for a customized solution
Enterprise Features
Dedicated Support
Custom Integrations
SLA Guarantee
On-Premise Option
Schema
| Field Name | Type | Description | Default |
|---|---|---|---|
priceText | text | Custom text for displaying price (e.g., "Free", "Contact Us") | - |
title | text | The name of the plan (required, translatable) | - |
intro | text | A brief introduction or tagline for the plan (translatable) | - |
description | markdown | Detailed description of the plan | - |
action | bloks | Call-to-action button (required, 1 item max, restricted to button component) | - |
benefitsHeader | text | Header text for the benefits section | - |
benefits | textarea | List of benefits, each on a new line (translatable) | - |
isFeatured | boolean | Whether the plan should be highlighted as featured | false |
price | number | The price of the plan (min value: 0) | - |
originalPrice | number | The original price for comparison (min value: 0) | - |
ribbonText | text | Text for the featured ribbon (max 20 characters, translatable) | - |
Related Components
Notes
- The component uses the
Intl.NumberFormatto format prices in a defined currency. - Benefits are split by newline characters and rendered as a list with check icons.
- The component supports both custom price text and numerical prices with optional original price for comparisons.
- Featured plans have a distinct visual style with a border and shadow effect.
Best Practices:
- Use consistent pricing structures across plans for easy comparison.
- Highlight the most popular or recommended plan using the
isFeaturedoption. - Keep benefit descriptions concise and clear for easy scanning.
- Use the
ribbonTextto draw attention to special offers or popular choices. - Ensure that the call-to-action button links to the appropriate sign-up or upgrade page.