Domain

PricingSection

Pricing comparison section that lays out multiple plans using the existing PricingCard primitive.

import { PricingSection } from '@lostgradient/cinder/pricing-section';
marketingpricingplans
01

Overview

Renders a pricing plans section using PricingCard blocks with optional selection callbacks.

Usage

svelte 
<script lang="ts">
  import PricingSection from '@lostgradient/cinder/pricing-section';

  const plans = [
    {
      name: 'Starter',
      price: '$0',
      features: ['1 project', 'Community support'],
      cta: 'Start free',
    },
    {
      name: 'Pro',
      price: '$29',
      features: ['Unlimited projects', 'Priority support'],
      cta: 'Upgrade',
    },
  ];
</script>

<PricingSection title="Simple pricing" {plans} />
Live preview
02

When to use

Use when
  • Presenting tiered subscription plans with features and action buttons.
  • Highlighting a recommended plan while still allowing side-by-side comparison.
Avoid when
03

Examples

PricingSection

PricingSection with multi-tier plans composed from PricingCard and plan selection callback.

04

Props

Props for pricing-section
Name Type Default Required Bindable Description
as 'section' | 'div' 'section' Wrapper element tag.
title text Optional section title.
description text Optional section description.
plans PricingSectionPlan[] req Plans rendered as PricingCard components.
columns 1 | 2 | 3 | 4 3 Grid column count.
onPlanSelect (plan: PricingSectionPlan, index: number) => void Callback fired when a plan CTA is clicked.
maxWidth 'prose' | 'narrow' | 'wide' | 'full' 'wide' Max width token forwarded to Container.