Alpha: Ships on npm at 7.0.0-alpha.07.0.0-alpha.0
Build a pricing page
Plans as OfferTiles, a plan table and the pricing questions, built like the Vanroster and Ledgerhouse pricing pages.
A pricing page lets a buyer pick a plan without writing in. It runs three sections under the nav: the plans, a comparison, and the questions. Vanroster sells software and Ledgerhouse sells bookkeeping; one record shape serves both.
Prerequisites
- A landing page record, from Build a landing page. The pricing page shares its
navandfooter.
Lay out the plans
pricing holds one to four plans, each an OfferTile: a name and a price of 16 characters, a note of 24, a line of 80, one to ten features of 56, and the label and address of its button. In the record the list is tiers.
{
"$schema": "https://next.mdxui.dev/schema.json",
"theme": "callboard",
"frame": "none",
"template": "api-product",
"title": "Plans · Vanroster",
"description": "Three Vanroster plans, priced per crew a month. Office users are free on every plan.",
"sections": [
… 1 more section
{sections.1 · pricing
"kind": "section",
"shell": { "inset": "contained", "density": "section" },
"block": {
"type": "pricing",
"layout": "cards",
"head": {
"eyebrow": "Plans",
"title": "Priced per crew, never per seat.",
"lede": "A crew is one van and the people in it. Office users sign in free on every plan."
},
"tiers": [
{
"name": "Crew",
"price": "$29",
"note": "a crew a month",
"desc": "One depot and up to 10 crews.",
"features": [
"The dispatch board",
"Skills on every job",
"Customer arrival texts"
],
"cta": "Start a trial",
"href": "/contact"
},
{
"name": "Fleet",
"price": "$24",
"note": "a crew a month",
"desc": "11 to 100 crews across up to 10 depots.",
"features": [
"Everything in Crew",
"Swaps between depots",
"Overtime flags on the board",
"The Dispatch API"
],
"cta": "Start a trial",
"href": "/contact",
"featured": true
},
{
"name": "Region",
"price": "Quoted",
"note": "from 100 crews",
"desc": "Any number of depots, with single sign-on.",
"features": [
"Everything in Fleet",
"Single sign-on with SAML",
"Audit log export",
"A named dispatch contact"
],
"cta": "Book a walkthrough",
"href": "/contact"
}
],
"featuredBadge": "For many depots",
"note": "Prices exclude tax. A crew counts in a month once it holds a job."
}
},
{sections.2 · plan-table
"kind": "section",
"shell": { "inset": "contained", "density": "section" },
"block": {
"type": "plan-table",
"title": "Every plan, line by line",
"columns": ["Crews", "Depots", "API", "Sign-on", "Log kept"],
"rows": [
{
"name": "Crew",
"cells": ["1 to 10", "1", "no", "no", "1 year"]
},
{
"name": "Fleet",
"cells": ["11 to 100", "up to 10", "yes", "no", "3 years"]
},
{
"name": "Region",
"cells": ["100 or more", "any", "yes", "SAML", "7 years"],
"note": "Quoted per year"
}
],
"foot": "Every plan includes the board, crew phones and customer texts. [Security](/security) lists where data is kept."
}
},
{sections.3 · faq
"kind": "section",
"shell": { "inset": "contained", "density": "section" },
"block": {
"type": "faq",
"head": {
"eyebrow": "Questions",
"title": "Before the trial ends.",
"lede": "Grouped by billing, the trial and your data."
},
"groups": [
{
"title": "Billing",
"items": [
{
"q": "What counts as a crew?",
"a": "One van and the people in it. A crew counts in a month once it holds a job. A crew with no jobs that month costs nothing."
},
{
"q": "Do office users cost extra?",
"a": "No. Dispatchers, managers and owners sign in free on every plan."
}
]
},
{
"title": "The trial",
"items": [
{
"q": "What happens after 14 days?",
"a": "The board stays readable. New jobs stop until a plan is chosen."
},
{
"q": "Can I import from a spreadsheet?",
"a": "Yes. Vanroster reads crews, skills and jobs from one CSV file each."
}
]
},
{
"title": "Your data",
"items": [
{
"q": "Where is the data kept?",
"a": "In the region chosen at sign-up, the EU or the US. The [security page](/security) lists both."
},
{
"q": "Can I take it with me?",
"a": "Yes. Every plan exports crews, jobs and the change log as CSV or JSON at any time."
}
]
}
]
}
},
… 1 more section
]
}
Feature one plan
Mark one plan featured, and name its badge in featuredBadge, 16 characters. With four plans, the fourth is a row under the other three and is never the featured one.
{
"$schema": "https://next.mdxui.dev/schema.json",
"theme": "callboard",
"frame": "none",
"template": "api-product",
"title": "Plans · Vanroster",
"description": "Three Vanroster plans, priced per crew a month. Office users are free on every plan.",
"sections": [
… 1 more section
{sections.1 · pricing
"kind": "section",
"shell": { "inset": "contained", "density": "section" },
"block": {
"type": "pricing",
"layout": "cards",
"head": {
"eyebrow": "Plans",
"title": "Priced per crew, never per seat.",
"lede": "A crew is one van and the people in it. Office users sign in free on every plan."
},
"tiers": [
{
"name": "Crew",
"price": "$29",
"note": "a crew a month",
"desc": "One depot and up to 10 crews.",
"features": [
"The dispatch board",
"Skills on every job",
"Customer arrival texts"
],
"cta": "Start a trial",
"href": "/contact"
},
{
"name": "Fleet",
"price": "$24",
"note": "a crew a month",
"desc": "11 to 100 crews across up to 10 depots.",
"features": [
"Everything in Crew",
"Swaps between depots",
"Overtime flags on the board",
"The Dispatch API"
],
"cta": "Start a trial",
"href": "/contact",
"featured": true
},
{
"name": "Region",
"price": "Quoted",
"note": "from 100 crews",
"desc": "Any number of depots, with single sign-on.",
"features": [
"Everything in Fleet",
"Single sign-on with SAML",
"Audit log export",
"A named dispatch contact"
],
"cta": "Book a walkthrough",
"href": "/contact"
}
],
"featuredBadge": "For many depots",
"note": "Prices exclude tax. A crew counts in a month once it holds a job."
}
},
{sections.2 · plan-table
"kind": "section",
"shell": { "inset": "contained", "density": "section" },
"block": {
"type": "plan-table",
"title": "Every plan, line by line",
"columns": ["Crews", "Depots", "API", "Sign-on", "Log kept"],
"rows": [
{
"name": "Crew",
"cells": ["1 to 10", "1", "no", "no", "1 year"]
},
{
"name": "Fleet",
"cells": ["11 to 100", "up to 10", "yes", "no", "3 years"]
},
{
"name": "Region",
"cells": ["100 or more", "any", "yes", "SAML", "7 years"],
"note": "Quoted per year"
}
],
"foot": "Every plan includes the board, crew phones and customer texts. [Security](/security) lists where data is kept."
}
},
{sections.3 · faq
"kind": "section",
"shell": { "inset": "contained", "density": "section" },
"block": {
"type": "faq",
"head": {
"eyebrow": "Questions",
"title": "Before the trial ends.",
"lede": "Grouped by billing, the trial and your data."
},
"groups": [
{
"title": "Billing",
"items": [
{
"q": "What counts as a crew?",
"a": "One van and the people in it. A crew counts in a month once it holds a job. A crew with no jobs that month costs nothing."
},
{
"q": "Do office users cost extra?",
"a": "No. Dispatchers, managers and owners sign in free on every plan."
}
]
},
{
"title": "The trial",
"items": [
{
"q": "What happens after 14 days?",
"a": "The board stays readable. New jobs stop until a plan is chosen."
},
{
"q": "Can I import from a spreadsheet?",
"a": "Yes. Vanroster reads crews, skills and jobs from one CSV file each."
}
]
},
{
"title": "Your data",
"items": [
{
"q": "Where is the data kept?",
"a": "In the region chosen at sign-up, the EU or the US. The [security page](/security) lists both."
},
{
"q": "Can I take it with me?",
"a": "Yes. Every plan exports crews, jobs and the change log as CSV or JSON at any time."
}
]
}
]
}
},
… 1 more section
]
}
Choose the layout
layout: "cards" sets each plan in its own box; layout: "ruled" sets the plans as columns between rules. Ledgerhouse sets its plans ruled. How the featured plan stands out is the Theme's featured policy: a plate in vaultline, quaypoint and callboard, a rule in certificate and directory.
{
"$schema": "https://next.mdxui.dev/schema.json",
"theme": "vaultline",
"frame": "none",
"template": "api-product",
"title": "Fees · Ledgerhouse",
"description": "Three fixed monthly fees, set by transactions a month and fixed for twelve months.",
"sections": [
… 1 more section
{sections.1 · pricing
"kind": "section",
"shell": { "inset": "contained", "density": "section" },
"block": {
"type": "pricing",
"layout": "ruled",
"head": {
"eyebrow": "Fees",
"title": "Fixed fees, set at intake.",
"lede": "Fees follow transactions a month, never hours. Each fee holds for twelve months."
},
"tiers": [
{
"name": "Close",
"price": "$450",
"note": "a month",
"desc": "Up to 150 transactions a month.",
"features": [
"Monthly close by the fifth",
"One signed report",
"Two bank accounts"
],
"cta": "Start intake",
"href": "/intake"
},
{
"name": "Close and tax",
"price": "$750",
"note": "a month",
"desc": "Up to 400 transactions, with tax.",
"features": [
"Everything in Close",
"Quarterly tax estimates",
"The annual business return",
"Five bank accounts"
],
"cta": "Start intake",
"href": "/intake",
"featured": true
},
{
"name": "Partner",
"price": "$1,400",
"note": "a month",
"desc": "Up to 1,000 transactions, two entities.",
"features": [
"Everything in Close and tax",
"Returns for two owners",
"Payroll posted monthly",
"A quarterly review call"
],
"cta": "Start intake",
"href": "/intake"
}
],
"featuredBadge": "Includes tax",
"note": "Catch-up months are quoted once, at intake. Fees exclude sales tax where it applies."
}
},
… 1 more section
{sections.3 · faq
"kind": "section",
"shell": { "inset": "contained", "density": "section" },
"block": {
"type": "faq",
"head": { "eyebrow": "Questions", "title": "Before the letter is signed." },
"items": [
{
"q": "What is a transaction?",
"a": "One line on a bank or account statement. A month over the limit moves to the next fee for that month only."
},
{
"q": "What if the books are behind?",
"a": "Intake quotes the catch-up months once. Monthly close starts when the catch-up is signed."
},
{
"q": "Which software does Ledgerhouse use?",
"a": "The accounting software you already have. Ledgerhouse connects bank feeds read-only and never moves money."
},
{
"q": "What happens if a close is late?",
"a": "The fee for that month is waived. The engagement letter states it."
},
{
"q": "Can I leave mid-year?",
"a": "Yes, with 30 days’ notice. Every closed month and its report stay yours."
}
]
}
},
… 2 more sections
]
}
Compare them line by line
plan-table takes up to six columns of 16 characters and eight rows, each cell 32 characters, with a foot line of 160. Put the plan names across the top and one limit per row.
{
"$schema": "https://next.mdxui.dev/schema.json",
"theme": "callboard",
"frame": "none",
"template": "api-product",
"title": "Plans · Vanroster",
"description": "Three Vanroster plans, priced per crew a month. Office users are free on every plan.",
"sections": [
… 1 more section
{sections.1 · pricing
"kind": "section",
"shell": { "inset": "contained", "density": "section" },
"block": {
"type": "pricing",
"layout": "cards",
"head": {
"eyebrow": "Plans",
"title": "Priced per crew, never per seat.",
"lede": "A crew is one van and the people in it. Office users sign in free on every plan."
},
"tiers": [
{
"name": "Crew",
"price": "$29",
"note": "a crew a month",
"desc": "One depot and up to 10 crews.",
"features": [
"The dispatch board",
"Skills on every job",
"Customer arrival texts"
],
"cta": "Start a trial",
"href": "/contact"
},
{
"name": "Fleet",
"price": "$24",
"note": "a crew a month",
"desc": "11 to 100 crews across up to 10 depots.",
"features": [
"Everything in Crew",
"Swaps between depots",
"Overtime flags on the board",
"The Dispatch API"
],
"cta": "Start a trial",
"href": "/contact",
"featured": true
},
{
"name": "Region",
"price": "Quoted",
"note": "from 100 crews",
"desc": "Any number of depots, with single sign-on.",
"features": [
"Everything in Fleet",
"Single sign-on with SAML",
"Audit log export",
"A named dispatch contact"
],
"cta": "Book a walkthrough",
"href": "/contact"
}
],
"featuredBadge": "For many depots",
"note": "Prices exclude tax. A crew counts in a month once it holds a job."
}
},
{sections.2 · plan-table
"kind": "section",
"shell": { "inset": "contained", "density": "section" },
"block": {
"type": "plan-table",
"title": "Every plan, line by line",
"columns": ["Crews", "Depots", "API", "Sign-on", "Log kept"],
"rows": [
{
"name": "Crew",
"cells": ["1 to 10", "1", "no", "no", "1 year"]
},
{
"name": "Fleet",
"cells": ["11 to 100", "up to 10", "yes", "no", "3 years"]
},
{
"name": "Region",
"cells": ["100 or more", "any", "yes", "SAML", "7 years"],
"note": "Quoted per year"
}
],
"foot": "Every plan includes the board, crew phones and customer texts. [Security](/security) lists where data is kept."
}
},
{sections.3 · faq
"kind": "section",
"shell": { "inset": "contained", "density": "section" },
"block": {
"type": "faq",
"head": {
"eyebrow": "Questions",
"title": "Before the trial ends.",
"lede": "Grouped by billing, the trial and your data."
},
"groups": [
{
"title": "Billing",
"items": [
{
"q": "What counts as a crew?",
"a": "One van and the people in it. A crew counts in a month once it holds a job. A crew with no jobs that month costs nothing."
},
{
"q": "Do office users cost extra?",
"a": "No. Dispatchers, managers and owners sign in free on every plan."
}
]
},
{
"title": "The trial",
"items": [
{
"q": "What happens after 14 days?",
"a": "The board stays readable. New jobs stop until a plan is chosen."
},
{
"q": "Can I import from a spreadsheet?",
"a": "Yes. Vanroster reads crews, skills and jobs from one CSV file each."
}
]
},
{
"title": "Your data",
"items": [
{
"q": "Where is the data kept?",
"a": "In the region chosen at sign-up, the EU or the US. The [security page](/security) lists both."
},
{
"q": "Can I take it with me?",
"a": "Yes. Every plan exports crews, jobs and the change log as CSV or JSON at any time."
}
]
}
]
}
},
… 1 more section
]
}
Answer the questions
faq holds up to ten questions of 64 characters, each answer up to 420; or up to four titled groups of six. Never both. Answer what stops a purchase: the trial, the contract, what happens over a limit.
{
"$schema": "https://next.mdxui.dev/schema.json",
"theme": "callboard",
"frame": "none",
"template": "api-product",
"title": "Plans · Vanroster",
"description": "Three Vanroster plans, priced per crew a month. Office users are free on every plan.",
"sections": [
… 1 more section
{sections.1 · pricing
"kind": "section",
"shell": { "inset": "contained", "density": "section" },
"block": {
"type": "pricing",
"layout": "cards",
"head": {
"eyebrow": "Plans",
"title": "Priced per crew, never per seat.",
"lede": "A crew is one van and the people in it. Office users sign in free on every plan."
},
"tiers": [
{
"name": "Crew",
"price": "$29",
"note": "a crew a month",
"desc": "One depot and up to 10 crews.",
"features": [
"The dispatch board",
"Skills on every job",
"Customer arrival texts"
],
"cta": "Start a trial",
"href": "/contact"
},
{
"name": "Fleet",
"price": "$24",
"note": "a crew a month",
"desc": "11 to 100 crews across up to 10 depots.",
"features": [
"Everything in Crew",
"Swaps between depots",
"Overtime flags on the board",
"The Dispatch API"
],
"cta": "Start a trial",
"href": "/contact",
"featured": true
},
{
"name": "Region",
"price": "Quoted",
"note": "from 100 crews",
"desc": "Any number of depots, with single sign-on.",
"features": [
"Everything in Fleet",
"Single sign-on with SAML",
"Audit log export",
"A named dispatch contact"
],
"cta": "Book a walkthrough",
"href": "/contact"
}
],
"featuredBadge": "For many depots",
"note": "Prices exclude tax. A crew counts in a month once it holds a job."
}
},
{sections.2 · plan-table
"kind": "section",
"shell": { "inset": "contained", "density": "section" },
"block": {
"type": "plan-table",
"title": "Every plan, line by line",
"columns": ["Crews", "Depots", "API", "Sign-on", "Log kept"],
"rows": [
{
"name": "Crew",
"cells": ["1 to 10", "1", "no", "no", "1 year"]
},
{
"name": "Fleet",
"cells": ["11 to 100", "up to 10", "yes", "no", "3 years"]
},
{
"name": "Region",
"cells": ["100 or more", "any", "yes", "SAML", "7 years"],
"note": "Quoted per year"
}
],
"foot": "Every plan includes the board, crew phones and customer texts. [Security](/security) lists where data is kept."
}
},
{sections.3 · faq
"kind": "section",
"shell": { "inset": "contained", "density": "section" },
"block": {
"type": "faq",
"head": {
"eyebrow": "Questions",
"title": "Before the trial ends.",
"lede": "Grouped by billing, the trial and your data."
},
"groups": [
{
"title": "Billing",
"items": [
{
"q": "What counts as a crew?",
"a": "One van and the people in it. A crew counts in a month once it holds a job. A crew with no jobs that month costs nothing."
},
{
"q": "Do office users cost extra?",
"a": "No. Dispatchers, managers and owners sign in free on every plan."
}
]
},
{
"title": "The trial",
"items": [
{
"q": "What happens after 14 days?",
"a": "The board stays readable. New jobs stop until a plan is chosen."
},
{
"q": "Can I import from a spreadsheet?",
"a": "Yes. Vanroster reads crews, skills and jobs from one CSV file each."
}
]
},
{
"title": "Your data",
"items": [
{
"q": "Where is the data kept?",
"a": "In the region chosen at sign-up, the EU or the US. The [security page](/security) lists both."
},
{
"q": "Can I take it with me?",
"a": "Yes. Every plan exports crews, jobs and the change log as CSV or JSON at any time."
}
]
}
]
}
},
… 1 more section
]
}
Result
The Result is the SaaS page. Flip it to vaultline, then to directory, and watch the featured plan move from a plate to a rule.
Vanroster › pricing · callboardOpen the render
{
"$schema": "https://next.mdxui.dev/schema.json",
"theme": "callboard",
"frame": "none",
"template": "api-product",
"title": "Plans · Vanroster",
"description": "Three Vanroster plans, priced per crew a month. Office users are free on every plan.",
"sections": [
… 1 more section
{sections.1 · pricing
"kind": "section",
"shell": { "inset": "contained", "density": "section" },
"block": {
"type": "pricing",
"layout": "cards",
"head": {
"eyebrow": "Plans",
"title": "Priced per crew, never per seat.",
"lede": "A crew is one van and the people in it. Office users sign in free on every plan."
},
"tiers": [
{
"name": "Crew",
"price": "$29",
"note": "a crew a month",
"desc": "One depot and up to 10 crews.",
"features": [
"The dispatch board",
"Skills on every job",
"Customer arrival texts"
],
"cta": "Start a trial",
"href": "/contact"
},
{
"name": "Fleet",
"price": "$24",
"note": "a crew a month",
"desc": "11 to 100 crews across up to 10 depots.",
"features": [
"Everything in Crew",
"Swaps between depots",
"Overtime flags on the board",
"The Dispatch API"
],
"cta": "Start a trial",
"href": "/contact",
"featured": true
},
{
"name": "Region",
"price": "Quoted",
"note": "from 100 crews",
"desc": "Any number of depots, with single sign-on.",
"features": [
"Everything in Fleet",
"Single sign-on with SAML",
"Audit log export",
"A named dispatch contact"
],
"cta": "Book a walkthrough",
"href": "/contact"
}
],
"featuredBadge": "For many depots",
"note": "Prices exclude tax. A crew counts in a month once it holds a job."
}
},
{sections.2 · plan-table
"kind": "section",
"shell": { "inset": "contained", "density": "section" },
"block": {
"type": "plan-table",
"title": "Every plan, line by line",
"columns": ["Crews", "Depots", "API", "Sign-on", "Log kept"],
"rows": [
{
"name": "Crew",
"cells": ["1 to 10", "1", "no", "no", "1 year"]
},
{
"name": "Fleet",
"cells": ["11 to 100", "up to 10", "yes", "no", "3 years"]
},
{
"name": "Region",
"cells": ["100 or more", "any", "yes", "SAML", "7 years"],
"note": "Quoted per year"
}
],
"foot": "Every plan includes the board, crew phones and customer texts. [Security](/security) lists where data is kept."
}
},
{sections.3 · faq
"kind": "section",
"shell": { "inset": "contained", "density": "section" },
"block": {
"type": "faq",
"head": {
"eyebrow": "Questions",
"title": "Before the trial ends.",
"lede": "Grouped by billing, the trial and your data."
},
"groups": [
{
"title": "Billing",
"items": [
{
"q": "What counts as a crew?",
"a": "One van and the people in it. A crew counts in a month once it holds a job. A crew with no jobs that month costs nothing."
},
{
"q": "Do office users cost extra?",
"a": "No. Dispatchers, managers and owners sign in free on every plan."
}
]
},
{
"title": "The trial",
"items": [
{
"q": "What happens after 14 days?",
"a": "The board stays readable. New jobs stop until a plan is chosen."
},
{
"q": "Can I import from a spreadsheet?",
"a": "Yes. Vanroster reads crews, skills and jobs from one CSV file each."
}
]
},
{
"title": "Your data",
"items": [
{
"q": "Where is the data kept?",
"a": "In the region chosen at sign-up, the EU or the US. The [security page](/security) lists both."
},
{
"q": "Can I take it with me?",
"a": "Yes. Every plan exports crews, jobs and the change log as CSV or JSON at any time."
}
]
}
]
}
},
… 1 more section
]
}
{
"$schema": "https://next.mdxui.dev/schema.json",
"theme": "vaultline",
"frame": "none",
"template": "api-product",
"title": "Fees · Ledgerhouse",
"description": "Three fixed monthly fees, set by transactions a month and fixed for twelve months.",
"sections": [
… 1 more section
{sections.1 · pricing
"kind": "section",
"shell": { "inset": "contained", "density": "section" },
"block": {
"type": "pricing",
"layout": "ruled",
"head": {
"eyebrow": "Fees",
"title": "Fixed fees, set at intake.",
"lede": "Fees follow transactions a month, never hours. Each fee holds for twelve months."
},
"tiers": [
{
"name": "Close",
"price": "$450",
"note": "a month",
"desc": "Up to 150 transactions a month.",
"features": [
"Monthly close by the fifth",
"One signed report",
"Two bank accounts"
],
"cta": "Start intake",
"href": "/intake"
},
{
"name": "Close and tax",
"price": "$750",
"note": "a month",
"desc": "Up to 400 transactions, with tax.",
"features": [
"Everything in Close",
"Quarterly tax estimates",
"The annual business return",
"Five bank accounts"
],
"cta": "Start intake",
"href": "/intake",
"featured": true
},
{
"name": "Partner",
"price": "$1,400",
"note": "a month",
"desc": "Up to 1,000 transactions, two entities.",
"features": [
"Everything in Close and tax",
"Returns for two owners",
"Payroll posted monthly",
"A quarterly review call"
],
"cta": "Start intake",
"href": "/intake"
}
],
"featuredBadge": "Includes tax",
"note": "Catch-up months are quoted once, at intake. Fees exclude sales tax where it applies."
}
},
… 1 more section
{sections.3 · faq
"kind": "section",
"shell": { "inset": "contained", "density": "section" },
"block": {
"type": "faq",
"head": { "eyebrow": "Questions", "title": "Before the letter is signed." },
"items": [
{
"q": "What is a transaction?",
"a": "One line on a bank or account statement. A month over the limit moves to the next fee for that month only."
},
{
"q": "What if the books are behind?",
"a": "Intake quotes the catch-up months once. Monthly close starts when the catch-up is signed."
},
{
"q": "Which software does Ledgerhouse use?",
"a": "The accounting software you already have. Ledgerhouse connects bank feeds read-only and never moves money."
},
{
"q": "What happens if a close is late?",
"a": "The fee for that month is waived. The engagement letter states it."
},
{
"q": "Can I leave mid-year?",
"a": "Yes, with 30 days’ notice. Every closed month and its report stay yours."
}
]
}
},
… 2 more sections
]
}
Vanroster › pricing · callboardOpen the render