Horizontal list-style pricing layout with accent icon blobs, strikethrough original prices, and optional recommended badge.
Installation
Usage
Customisation
Pass a plans array to override the default plans:
How It Works
- Each plan renders as a horizontal card (
flex-rowonsm+) with a gradient accent blob on the left and pricing + CTA on the right. - The accent blob is a simple
divstyled with abg-linear-to-bgradient matching the plan'saccentcolour. originalPrice, when provided, renders with aline-throughdecoration next to the current price.- The
recommendedflag adds aBadgenext to the plan name.
API Reference
Pricing5
| Prop | Type | Default |
|---|---|---|
plans? | Plan5[] | default two-plan array |
title? | string | "Organize without limits" |
subtitle? | string | "Local or cloud — your choice" |
Plan5
| Prop | Type | Default |
|---|---|---|
id | string | - |
name | string | - |
features | string[] | - |
price | string | - |
ctaLabel | string | - |
ctaHref | string | - |
originalPrice? | string | - |
recommended? | boolean | - |
recommendedLabel? | string | "Recommended" |
billingNote? | string | - |
accent? | "neutral" | "orange" | "blue" | "violet" | "emerald" | "rose" | "yellow" | "neutral" |