Pricing Sections

Full-width pricing sections — a three-tier column layout, a plan comparison table and a single-plan toggle.

Drop-in pricing sections for a landing or marketing page. Each is a self-contained, full-width Svelte <section> built only from semantic tokens, so it restyles across every theme — the brand colour maps to --primary. Try the theme switcher above the preview.

Preview

Pricing

Simple, transparent pricing

Start free and upgrade as you grow. No hidden fees, cancel anytime.

Starter

$0 / month

For side projects and getting started.

Up to 3 projects
Community support
1 GB storage
Basic analytics

Pro

Enterprise

Custom

For organisations with scale and controls.

SSO & SAML
Dedicated support
Unlimited storage
Audit logs
SLA

Compare plans

Find the plan that fits

Features	Starter $0	Pro $24	Enterprise Custom
Projects	3	Unlimited	Unlimited
Storage	1 GB	50 GB	Unlimited
Advanced analytics
Custom domains
Priority support
SSO & SAML
Audit logs

Pricing

One plan, everything included

$24 / seat / month

Billed monthly · cancel anytime

Unlimited projects
Priority support
50 GB storage
Advanced analytics
Custom domains
Team roles & permissions

Install

bun x bosia@latest add block pricing/columns
bun x bosia@latest add block pricing/comparison
bun x bosia@latest add block pricing/simple

These pull @lucide/svelte for icons.

The blocks

columns — three tier cards with a lifted "Most popular" plan, feature checklists and CTAs.
comparison — a plan-column table with price headers and check / minus / value rows.
simple — one centred plan with a monthly / yearly toggle, two-column checklist and a wide CTA.

Usage

<script lang="ts">
	import Pricing from "$lib/blocks/pricing/columns/block.svelte";
</script>

<Pricing />

Content lives in hardcoded arrays at the top of each block.svelte — edit the tiers, prices and features to match your product. The featured tier and every accent use primary, so the section follows whichever theme is active.

Source

src/lib/blocks/pricing/*/block.svelte