---
title: "PlanMatch — Framer component · Best of Framer"
description: "$19.00 · Framer component · by knokknokD · Sections. Turn a crowded pricing page into a clear recommendation PlanMatch lets visitors switch on the capabilities they need and immediately…"
canonical: "https://framer.elliotli.dev/component/planmatch"
---

[Home](/)/[Components](/components)/[Sections](/components/category/sections)/PlanMatch

# PlanMatch

Quiz that recommends a plan

[View on Framer](https://framer.com/marketplace/components/planmatch/?via=elliot-li)

![PlanMatch preview image 1](https://framer.elliotli.dev/og/component/planmatch/54bcb8b8f0047db1/1600x1192.jpg)

## Summary

Turn a crowded pricing page into a clear recommendation PlanMatch lets visitors switch on the capabilities they need and immediately shows the closest plan, its price, and the…

## Description

## Turn a crowded pricing page into a clear recommendation

PlanMatch lets visitors switch on the capabilities they need and immediately shows the closest plan, its price, and the reasons behind the match. It replaces hand-wired scoring logic with one responsive Framer Code Component.

## Why it is different

\- Shows every need on one screen instead of forcing visitors through a long quiz.

\- Uses editable weights across two or three plans, so the recommendation logic stays visible and predictable.

\- Explains the match with the selected needs that best support the result.

\- Optionally syncs selections to one URL query parameter for shareable recommendations.

\- Uses semantic switch buttons, visible focus, 44px touch targets, live result announcements, and reduced-motion handling.

\- Includes optional **Glass UI** styling. Turn it off for a solid, neutral interface without losing any function.

### Works well for

\- SaaS and AI product pricing

\- Membership and subscription tiers

\- Productized services

\- Agency client projects with several packages

\- Any offer where visitors ask “Which plan is for me?”

\### Setup

1\. Add two or three plans with names, prices, CTA labels, and links.

2\. Add up to six needs.

3\. Give each need a weight for Plan 1, Plan 2, and Plan 3.

4\. Preview the switches and adjust the weights until the recommendation matches your offer.

5\. Keep URL Sync on for shareable results, or turn it off for local-only state.

### Important

\- PlanMatch recommends from the weights you configure; it does not provide financial, legal, or purchasing advice.

\- It does not process payments or calculate usage-based prices.

\- Use two or three plans and up to six needs in v1.

\- If no need is selected, Plan 2 is shown as the flexible starting point.

## Rank history [How rankings work →](/terms#rankings)

-   All · #10246

## Details

- **Author**: knokknokD
- **Price**: $19.00
- **Published**: 2026-07-17
- **Updated**: 2026-10-06
- **Added**: 2026-07-17
- **Categories**: Sections

## More like this

-   [Sale Bar](/component/sale-bar) — Brandon Grimes · $12 — Auto-start Black Friday promo bar
-   [Show and Tell](/component/show-and-tell) — Majed Monem · $9 — Feature tabs that play themselves
-   [Infinite Picker Whee](/component/infinite-picker-whee) — Karim Saif · Free — Rotating 3D text selector
-   [Resource Preview Dec](/component/resource-preview-dec) — felix strobel · Free — Editorial guides with folding cove