Pricing

PricingTier and PricingGroup create common SaaS pricing sections with responsive cards.

Quick Start

from faststrap import PricingGroup, PricingTier

PricingGroup(
    PricingTier("Starter", 19, features=["3 projects", "Email support"]),
    PricingTier(
        "Pro",
        49,
        features=["Unlimited projects", "Priority support"],
        highlighted=True,
    ),
    title="Choose your plan",
    subtitle="Start small and scale when you need more.",
)

Parameters

PricingTier

Parameter	Type	Default	Description
name	str	required	Tier name.
price	str \| int	required	Price display value.
period	str	"month"	Billing period label.
features	list[str] \| None	None	Feature bullet list.
button_text	str	"Get Started"	CTA button text.
button_href	str	"#"	CTA link.
highlighted	bool	False	Adds stronger border/shadow and solid CTA.
**kwargs	Any		Extra card attributes.

PricingGroup

Parameter	Type	Default	Description
*tiers	Any		Pricing tier elements.
title	str	"Choose Your Plan"	Section heading.
subtitle	str \| None	None	Optional section copy.
header_cls / title_cls / subtitle_cls	str \| None	None	Header styling hooks.
row_cls / col_cls	str \| None	None	Layout styling hooks.
header_attrs / title_attrs / subtitle_attrs	dict \| None	None	Extra header attributes.
row_attrs / col_attrs	dict \| None	None	Extra grid attributes.
**kwargs	Any		Extra root attributes.

API Reference

faststrap.components.patterns.pricing.PricingTier(name, price, period='month', features=None, button_text='Get Started', button_href='#', highlighted=False, **kwargs)

A single pricing tier card.

Parameters:

Name	Type	Description	Default
name	str	Tier name (e.g., "Pro", "Enterprise")	required
price	str | int	Price amount	required
period	str	Billing period (e.g., "month", "year")	'month'
features	list[str] | None	List of feature strings	None
button_text	str	CTA button text	'Get Started'
button_href	str	CTA button link	'#'
highlighted	bool	Whether to highlight this tier	False
**kwargs	Any	Additional attributes	{}

Returns:

Type	Description
Any	Card component with pricing content

Note

Marked as @beta - API may change in future releases.

Source code in src/faststrap/components/patterns/pricing.py

@register(category="patterns")
@beta
def PricingTier(
    name: str,
    price: str | int,
    period: str = "month",
    features: list[str] | None = None,
    button_text: str = "Get Started",
    button_href: str = "#",
    highlighted: bool = False,
    **kwargs: Any,
) -> Any:
    """A single pricing tier card.

    Args:
        name: Tier name (e.g., "Pro", "Enterprise")
        price: Price amount
        period: Billing period (e.g., "month", "year")
        features: List of feature strings
        button_text: CTA button text
        button_href: CTA button link
        highlighted: Whether to highlight this tier
        **kwargs: Additional attributes

    Returns:
        Card component with pricing content

    Note:
        Marked as @beta - API may change in future releases.
    """
    if features is None:
        features = []

    # Build feature list
    feature_items = [Li(feat) for feat in features]
    feature_list = Ul(*feature_items, cls="list-unstyled")

    # Build price display
    price_display = Div(
        Span("$", cls="fs-4"),
        Span(str(price), cls="display-4 fw-bold"),
        Span(f"/{period}", cls="text-muted"),
        cls="mb-4",
    )

    # Build CTA button
    cta_button = Button(
        button_text,
        href=button_href,
        variant="primary",
        outline=not highlighted,
        size="lg",
        cls="w-100",
    )

    # Build card
    card_cls = "h-100 text-center"
    if highlighted:
        card_cls += " border-primary shadow-lg"

    return Card(
        H3(name, cls="card-title"),
        price_display,
        feature_list,
        cta_button,
        cls=card_cls,
        **kwargs,
    )

faststrap.components.patterns.pricing.PricingGroup(*tiers, title='Choose Your Plan', subtitle=None, header_cls=None, title_cls=None, subtitle_cls=None, row_cls=None, col_cls=None, header_attrs=None, title_attrs=None, subtitle_attrs=None, row_attrs=None, col_attrs=None, **kwargs)

Group of pricing tiers in a responsive grid.

Parameters:

Name	Type	Description	Default
*tiers	Any	PricingTier components	()
title	str	Section title	'Choose Your Plan'
subtitle	str | None	Optional subtitle	None
header_cls	str | None	Additional classes for the section header	None
title_cls	str | None	Additional classes for the title element	None
subtitle_cls	str | None	Additional classes for the subtitle element	None
row_cls	str | None	Additional classes for the row wrapper	None
col_cls	str | None	Additional classes for each column wrapper	None
header_attrs	dict[str, Any] | None	Extra attributes for the section header	None
title_attrs	dict[str, Any] | None	Extra attributes for the title element	None
subtitle_attrs	dict[str, Any] | None	Extra attributes for the subtitle element	None
row_attrs	dict[str, Any] | None	Extra attributes for the row wrapper	None
col_attrs	dict[str, Any] | None	Extra attributes for each column wrapper	None
**kwargs	Any	Additional attributes	{}

Returns:

Type	Description
Div	Div with pricing tiers in grid

Note

Marked as @beta - API may change in future releases.

Source code in src/faststrap/components/patterns/pricing.py

@register(category="patterns")
@beta
def PricingGroup(
    *tiers: Any,
    title: str = "Choose Your Plan",
    subtitle: str | None = None,
    header_cls: str | None = None,
    title_cls: str | None = None,
    subtitle_cls: str | None = None,
    row_cls: str | None = None,
    col_cls: str | None = None,
    header_attrs: dict[str, Any] | None = None,
    title_attrs: dict[str, Any] | None = None,
    subtitle_attrs: dict[str, Any] | None = None,
    row_attrs: dict[str, Any] | None = None,
    col_attrs: dict[str, Any] | None = None,
    **kwargs: Any,
) -> Div:
    """Group of pricing tiers in a responsive grid.

    Args:
        *tiers: PricingTier components
        title: Section title
        subtitle: Optional subtitle
        header_cls: Additional classes for the section header
        title_cls: Additional classes for the title element
        subtitle_cls: Additional classes for the subtitle element
        row_cls: Additional classes for the row wrapper
        col_cls: Additional classes for each column wrapper
        header_attrs: Extra attributes for the section header
        title_attrs: Extra attributes for the title element
        subtitle_attrs: Extra attributes for the subtitle element
        row_attrs: Extra attributes for the row wrapper
        col_attrs: Extra attributes for each column wrapper
        **kwargs: Additional attributes

    Returns:
        Div with pricing tiers in grid

    Note:
        Marked as @beta - API may change in future releases.
    """
    header_attrs = convert_attrs(dict(header_attrs or {}))
    title_attrs = convert_attrs(dict(title_attrs or {}))
    subtitle_attrs = convert_attrs(dict(subtitle_attrs or {}))
    row_attrs = convert_attrs(dict(row_attrs or {}))
    col_attrs = convert_attrs(dict(col_attrs or {}))

    # Build header
    header = Div(
        H2(
            title,
            cls=merge_classes("text-center mb-2", title_cls, title_attrs.pop("cls", "")),
            **title_attrs,
        ),
        (
            P(
                subtitle,
                cls=merge_classes(
                    "text-center text-muted mb-5",
                    subtitle_cls,
                    subtitle_attrs.pop("cls", ""),
                ),
                **subtitle_attrs,
            )
            if subtitle
            else None
        ),
        cls=merge_classes(header_cls, header_attrs.pop("cls", "")),
        **header_attrs,
    )

    # Build tier grid
    col_size = 12 // len(tiers) if tiers else 12
    cols = []
    for tier in tiers:
        current_col_attrs = dict(col_attrs)
        cols.append(
            Col(
                tier,
                md=col_size,
                cls=merge_classes("mb-4", col_cls, current_col_attrs.pop("cls", "")),
                **current_col_attrs,
            )
        )

    return Div(
        header,
        Row(*cols, cls=merge_classes(row_cls, row_attrs.pop("cls", "")), **row_attrs),
        cls=merge_classes("pricing-group py-5", kwargs.pop("cls", "")),
        **kwargs,
    )