ComponentsMarketing

Pricing Table

Three-column pricing with a highlighted middle tier. Each card lists features and a CTA button.

Preview

Simple pricing.

Hobby
$0forever
  • 1 project
  • Community support
  • Basic analytics
Start free
Team
$49per month
  • Everything in Pro
  • Team workspaces
  • SSO + audit log
  • SLA support
Contact sales

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",
    )