PhiaUi.Components.PricingCard (phia_ui v0.1.17)

Copy Markdown View Source

Pricing plan card for displaying subscription tiers.

Renders a structured pricing card with:

  • Plan name and optional promotional badge
  • Price display (price + billing period)
  • Optional description
  • Feature list with checkmark (available) or dash (unavailable) indicators
  • A call-to-action button (optionally rendered as an <a> link)
  • Optional highlighted state for featured / recommended plans

Feature list syntax

Features are a plain list of strings. Prefix a feature string with "—" (em dash) to mark it as unavailable — it will be displayed with a dash instead of a checkmark, and in muted foreground colour:

features={[
  "Unlimited projects",
  "Priority support",
  "—SSO / SAML",        # unavailable — shown muted with dash
  "—Custom domains"     # unavailable
]}

Highlighted state

Set highlighted={true} to add a ring-2 ring-primary border and a subtle bg-primary/5 tint. Use this for the recommended or most popular plan.

Examples

<%!-- Basic plan --%>
<.pricing_card
  plan="Starter"
  price="Free"
  period=""
  features={["1 project", "5 team members", "—Priority support"]}
  cta_label="Get started"
  cta_href="/signup"
/>

<%!-- Highlighted Pro plan --%>
<.pricing_card
  plan="Pro"
  price="$29"
  period="/month"
  description="Everything you need for growing teams."
  badge="Most popular"
  features={["Unlimited projects", "50 team members", "Priority support", "—SSO"]}
  highlighted={true}
  cta_label="Start free trial"
  cta_href="/signup?plan=pro"
/>

<%!-- Three-column pricing section --%>
<div class="grid gap-6 sm:grid-cols-3">
  <.pricing_card plan="Free"       price="$0"  features={["1 project"]}     cta_href="/signup" />
  <.pricing_card plan="Pro"        price="$29" features={["Unlimited"]}      highlighted cta_href="/signup?plan=pro" badge="Popular" />
  <.pricing_card plan="Enterprise" price="Custom" period="" features={["All features", "SLA"]} cta_label="Contact sales" cta_href="/contact" />
</div>

Summary

Functions

pricing_card(assigns)

Renders a pricing plan card.

Functions

pricing_card(assigns)

Renders a pricing plan card.

Card layout

The card contains three regions:

  1. Header — optional promotional badge, plan name, price (with billing period), optional description, and any :header_extra slot content.
  2. Content — a <hr> separator, feature list, and CTA button.
  3. Footer — optional :footer slot content below the CTA button.

The CTA button is wrapped in an <a> link when cta_href is provided, so it works for both LiveView events (phx-click via :rest) and navigation.

Examples

<%!-- Minimal free plan --%>
<.pricing_card
  plan="Starter"
  price="Free"
  period=""
  features={["1 project", "5 team members", "—Priority support"]}
  cta_label="Get started"
  cta_href="/signup"
/>

<%!-- Highlighted Pro plan with badge --%>
<.pricing_card
  plan="Pro"
  price="$29"
  period="/month"
  description="Everything you need for a growing team."
  badge="Most popular"
  features={["Unlimited projects", "50 team members", "Priority support", "—SSO"]}
  highlighted={true}
  cta_label="Start free trial"
  cta_href="/signup?plan=pro"
/>

Attributes

  • plan (:string) (required) - Plan name (e.g. 'Pro', 'Enterprise').
  • price (:string) (required) - Price string (e.g. '$29').
  • period (:string) - Billing period label. Defaults to "/month".
  • description (:string) - Short plan description. Defaults to nil.
  • features (:list) - List of feature strings. Prefix '—' marks unavailable features. Defaults to [].
  • highlighted (:boolean) - Highlight as recommended/featured plan. Defaults to false.
  • badge (:string) - Optional badge label above plan name. Defaults to nil.
  • cta_label (:string) - Call-to-action button label. Defaults to "Get started".
  • cta_href (:string) - Optional href for CTA button. Defaults to nil.
  • disabled (:boolean) - Disable the CTA button. Defaults to false.
  • class (:string) - Additional CSS classes. Defaults to nil.
  • Global attributes are accepted. HTML attributes forwarded to the card element.

Slots

  • header_extra - Extra content rendered below the price.
  • footer - Content rendered below the CTA button.