ComponentsMarketing
Pricing Table
Three-column pricing with a highlighted middle tier. Each card lists features and a CTA button.
Preview
Simple pricing.
Code
from nitro_ui import Div, H2, H3, Paragraph, Span, Href, Section, UnorderedList, ListItem
TIERS = [
{
"name": "Hobby",
"price": "$0",
"period": "forever",
"features": ["1 project", "Community support", "Basic analytics"],
"cta": "Start free",
"featured": False,
"color": "yellow",
},
{
"name": "Pro",
"price": "$19",
"period": "per month",
"features": ["Unlimited projects", "Priority support", "Advanced analytics", "Custom domains"],
"cta": "Start 14-day trial",
"featured": True,
"color": "blue",
},
{
"name": "Team",
"price": "$49",
"period": "per month",
"features": ["Everything in Pro", "Team workspaces", "SSO + audit log", "SLA support"],
"cta": "Contact sales",
"featured": False,
"color": "purple",
},
]
def PricingCard(tier):
card_cls = "pricing-card"
if tier["featured"]:
card_cls += " pricing-card--featured"
return Div(
Div(
Span(tier["name"], cls=f"pricing-name pricing-name--{tier['color']}"),
Div(
Span(tier["price"], cls="pricing-price"),
Span(tier["period"], cls="pricing-period"),
cls="pricing-price-row",
),
UnorderedList(
*[ListItem(f) for f in tier["features"]],
cls="pricing-features",
),
Href(tier["cta"], href="#", cls="btn btn-primary pricing-cta"),
cls="pricing-card-body",
),
cls=card_cls,
)
def Pricing():
return Section(
Div(
H2("Simple pricing.", cls="section-title"),
Div(*[PricingCard(t) for t in TIERS], cls="pricing-grid"),
cls="container",
),
cls="pricing-section",
)