Loading…

Pricing

Block

A pricing section with plan cards and a monthly/yearly toggle.

Pricing
5 components
1 file

Pricing

Start free. Upgrade when you need to.

MonthlyYearlySave 20%

Hobby

For personal projects.

$0/month

1 project
Community support
Deploy from Git

Pro

Recommended

For teams shipping to production.

$20/month

Unlimited projects
Priority support
Preview deployments
Analytics

Enterprise

For organisations with compliance needs.

Custom

SSO and SCIM
Audit logs
Dedicated support
Custom contracts

Installation

The block is written to your blocks directory, and everything it is built from is installed alongside it.

$pnpm dlx @dowel-ui/cli add pricing

Usage

A starting point, not a black box: render it, then edit the layout, the copy and the fields — they are yours.

app/page.tsxTSX

import { PricingBlock } from "@/components/blocks/pricing";

Built from

Every piece is a component you already have documentation for, and can change independently.

API

<PricingBlock>

Prop	Type	Default
`plans` (required)	`PricingPlan[]`	—
`currency`	`string`	`"$"`
`description`	`string`	`"Start free. Upgrade when you need to."`
`footnote`	`ReactNode`	—
`showPeriodToggle` Shows the monthly/yearly toggle.	`boolean`	`true`
`title`	`string`	`"Pricing"`
`className`	`string`	—

Accessibility

Switching the billing period rewrites every price on the page, so the change is announced politely rather than happening silently. Each plan's call to action names the plan — three buttons all reading "Choose" are indistinguishable out of context. Feature ticks are decorative; the feature text carries the meaning.