Pricing component | Monsoon CSS

Example

Full

pricing.html

<div class="pricing"><div class="pricing-card"><h3 class="pricing-name">Starter</h3><p class="pricing-desc">For side projects.</p><p class="pricing-price">$0<span class="pricing-period">/month</span></p><ul class="pricing-features"><li>3 projects</li><li>Community support</li></ul><a class="inline-flex items-center rounded-lg border border-border px-4 py-2 text-sm font-medium justify-center" href="#">Start free</a></div><div class="pricing-card pricing-featured"><span class="pricing-badge">Most popular</span><h3 class="pricing-name">Pro</h3><p class="pricing-desc">For growing teams.</p><p class="pricing-price">$24<span class="pricing-period">/month</span></p><ul class="pricing-features"><li>Unlimited projects</li><li>Priority support</li><li>Custom themes</li></ul><a class="inline-flex items-center rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground justify-center" href="#">Upgrade</a></div><div class="pricing-card"><h3 class="pricing-name">Enterprise</h3><p class="pricing-desc">For large organizations.</p><p class="pricing-price">$99<span class="pricing-period">/month</span></p><ul class="pricing-features"><li>Single sign on</li><li>Audit log</li><li>Dedicated manager</li></ul><a class="inline-flex items-center rounded-lg border border-border px-4 py-2 text-sm font-medium justify-center" href="#">Contact sales</a></div></div>

Classes

9 classes. Click a name to copy it. Utilities on the same element always win over component defaults, so any of them can be adjusted with plain utility classes.

Class	Type	What it does
	Base	Base class of the pricing. On a <div> in the example. Sets grid display, grid tracks, alignment and gap. CSS `.pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); align-items: stretch; gap: 1.5rem; }`
	Modifier	Modifier, combined with the pricing class. On a <div> in the example. Sets flex display, alignment, gap, padding, border and corner radius. CSS `.pricing-card { position: relative; display: flex; flex-direction: column; gap: 1.25rem; padding: 2rem; border: var(--m-border-width) solid var(--border); border-radius: var(--m-radius-2xl); background: var(--surface); }`
	Modifier	Modifier, combined with the pricing class. On a <div> in the example. Sets border and shadow. CSS `.pricing-featured { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary), 0 24px 48px -20px color-mix(in oklab, var(--primary) 45%, transparent); }`
	Part	Part of the pricing. On a <span> in the example. Sets absolute position, offsets, padding, corner radius, background and text color. CSS `.pricing-badge { position: absolute; top: 0; left: 50%; padding: 0.25rem 0.75rem; border-radius: var(--m-radius-full); background: var(--primary); color: var(--primary-foreground); font-size: 0.75rem; font-weight: 600; white-space: nowrap; translate: -50% -50%; }`
	Part	Part of the pricing. On a <h3> in the example. Sets font weight. CSS `.pricing-name { font-weight: 600; }`
	Part	Part of the pricing. On a <p> in the example. Sets margin, text size and text color. CSS `.pricing-desc { margin-top: -0.75rem; font-size: 0.875rem; color: var(--muted-foreground); }`
	Part	Part of the pricing. On a <p> in the example. Sets flex display, alignment, gap, text size, font weight and text style. CSS `.pricing-price { display: flex; align-items: baseline; gap: 0.25rem; font-size: 2.5rem; font-weight: 700; line-height: 1; letter-spacing: -0.025em; }`
	Part	Part of the pricing. On a <span> in the example. Sets text size, font weight, text style and text color. CSS `.pricing-period { font-size: 0.875rem; font-weight: 400; letter-spacing: 0; color: var(--muted-foreground); }`
	Part	Part of the pricing. On an <ul> in the example. Sets flex display, alignment, gap, text size, generated content and width. CSS `.pricing-features > li { display: flex; gap: 0.625rem; } .pricing-features { display: flex; flex: 1; flex-direction: column; gap: 0.625rem; font-size: 0.875rem; }`

Usage

Components ship inside the same stylesheet as the utilities. There is nothing else to install and no script to load: link Monsoon and write the markup.

index.html

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss">

<!-- Pricing: start from the base class, then add modifiers -->
<div class="pricing"><div class="pricing-card"><h3 class="pricing-name">Starter</h3><p class="pricing-desc">For side projects.</p><p class="pricing-price">$0<span class="pricing-period">/month</span></p><ul class="pricing-features"><li>3 projects</li><li>Community support</li></ul><a class="inline-flex items-center rounded-lg border border-border px-4 py-2 text-sm font-medium justify-center" href="#">Start free</a></div><div class="pricing-card pricing-featured"><span class="pricing-badge">Most popular</span><h3 class="pricing-name">Pro</h3><p class="pricing-desc">For growing teams.</p><p class="pricing-price">$24<span class="pricing-period">/month</span></p><ul class="pricing-features"><li>Unlimited projects</li><li>Priority support</li><li>Custom themes</li></ul><a class="inline-flex items-center rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground justify-center" href="#">Upgrade</a></div><div class="pricing-card"><h3 class="pricing-name">Enterprise</h3><p class="pricing-desc">For large organizations.</p><p class="pricing-price">$99<span class="pricing-period">/month</span></p><ul class="pricing-features"><li>Single sign on</li><li>Audit log</li><li>Dedicated manager</li></ul><a class="inline-flex items-center rounded-lg border border-border px-4 py-2 text-sm font-medium justify-center" href="#">Contact sales</a></div></div>

Theme it with --seed on any ancestor, for example style="--seed: #0d9488", and force a scheme with class="dark" or class="light" on a wrapper.

#Example

#Classes

#Usage

#Accessibility

#Related components

Example

Classes

Usage

Accessibility

Related components