Pricing Table

Pro

Plan picker for paywalls and upgrades, as selectable rows, a feature comparison or swipeable cards. The chosen plan fills with colour, and prices roll smoothly when you switch billing period.

Preview

TSX components/ui/pricing-table/pricing-table.tsx

Pro source · 890 lines

Part of LumioUI Pro. With Pro, the full file shows here and npx @lumioui/cli add pro/pricing-table writes it into your repo. Unlocking your Pro source… Couldn't load the source. Refresh to try again.

See Pro

Upgrade to Pro

TSX example.tsx

import { PricingTable } from "@/components/ui/pricing-table/pricing-table";

export function Example() {
  return (
    <PricingTable />
  );
}

Installation

npx @lumioui/cli add pro/pricing-table

Install the dependencies
npx expo install react-native-reanimated react-native-svg
Add the components it builds on
icon segmented-control
Copy the source from the Code tab into your project
components/ui/pricing-table/pricing-table.tsxcomponents/ui/pricing-table/index.ts
Icons it renders
check minus
Update the import paths to match your project setup.

Usage

import { PricingTable } from "@/components/ui/pricing-table/pricing-table";

<PricingTable />

Examples

Plan cards

A music app's plans page.

npx @lumioui/cli add pro/pricing-table-cards

TSX components/ui/pricing-table/variants/cards.tsx

Pro source · 68 lines

Part of LumioUI Pro. With Pro, the full file shows here and npx @lumioui/cli add pro/pricing-table-cards writes it into your repo. Unlocking your Pro source… Couldn't load the source. Refresh to try again.

See Pro

Upgrade to Pro

Plan comparison

A team-docs app's upgrade screen.

npx @lumioui/cli add pro/pricing-table-comparison

TSX components/ui/pricing-table/variants/comparison.tsx

Pro source · 65 lines

Part of LumioUI Pro. With Pro, the full file shows here and npx @lumioui/cli add pro/pricing-table-comparison writes it into your repo. Unlocking your Pro source… Couldn't load the source. Refresh to try again.

See Pro

Upgrade to Pro

Trial paywall

A language app's streak paywall, lit from above in green.

npx @lumioui/cli add pro/pricing-table-paywall

TSX components/ui/pricing-table/variants/paywall.tsx

Pro source · 92 lines

Part of LumioUI Pro. With Pro, the full file shows here and npx @lumioui/cli add pro/pricing-table-paywall writes it into your repo. Unlocking your Pro source… Couldn't load the source. Refresh to try again.

See Pro

Upgrade to Pro

API reference

Prop Type Default

plans* PricingPlan[]

Plans, in display order.

—

features PricingFeature[]

Feature matrix for layout="comparison".

[]

layout "list" | "comparison" | "cards"

Presentation. Default "list".

"list"

value string

Controlled selected plan id.

—

defaultValue string

Uncontrolled initial plan id. Default: first plan with a badge, else the first plan.

—

onValueChange (id: string) => void

Fires with the newly selected plan id.

—

billing Billing

Controlled billing period.

—

defaultBilling Billing

Uncontrolled initial billing period. Default "yearly".

"yearly"

onBillingChange (billing: Billing) => void

Fires when the billing switch changes.

—

showBillingToggle boolean

Show the monthly / yearly switch. Default: true when any plan has a yearlyPrice.

—

yearlySavingsLabel string

Suffix on the yearly segment — "Save 20%".

—

currency string

Currency symbol for the default formatter. Default "$".

"$"

formatPrice

(amount: number, plan: PricingPlan …

(amount: number, plan: PricingPlan, billing: Billing) => string

Custom price formatter (receives the per-month amount for the active billing).

—

confirmed boolean

The choice is committed — one sheen crosses the chosen plan, the others step back and lock.

false

className string —

Primitives

Composed

Screens

Pricing Table

Preview

Installation

Usage

Examples

Plan cards

Plan comparison

Trial paywall

API reference