feat(ui): Add highlightedPlan badge option to PricingTable component

[alexcarpenter]

Description

Add highlightedPlan prop to PricingTable default layout to render a "Popular" badge on the matching plan

docs: clerk/clerk-docs#3371

Checklist

• pnpm test runs as expected.
• pnpm build runs as expected.
• (If applicable) JSDoc comments have been added or updated for any package exports
• (If applicable) Documentation has been updated

Type of change

• 🐛 Bug fix
• 🌟 New feature
• 🔨 Breaking change
• 📖 Refactoring / dependency upgrade / documentation
• other:

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
clerk-js-sandbox	Ready	Preview, Comment	May 14, 2026 6:57pm

[changeset-bot]

🦋 Changeset detected

Latest commit: 167be43

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 20 packages

Name	Type
@clerk/shared	Minor
@clerk/ui	Minor
@clerk/astro	Patch
@clerk/backend	Patch
@clerk/chrome-extension	Patch
@clerk/clerk-js	Patch
@clerk/expo-passkeys	Patch
@clerk/expo	Patch
@clerk/express	Patch
@clerk/fastify	Patch
@clerk/hono	Patch
@clerk/localizations	Patch
@clerk/msw	Patch
@clerk/nextjs	Patch
@clerk/nuxt	Patch
@clerk/react-router	Patch
@clerk/react	Patch
@clerk/tanstack-react-start	Patch
@clerk/testing	Patch
@clerk/vue	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR adds a highlightedPlan feature to the PricingTable component to render a "Popular" badge on a designated plan. The change introduces a new optional highlightedPlan: string prop to the PricingTableBaseProps type, adds styling configuration via a new pricingTableCardBadge appearance key, threads the prop through the component hierarchy via context, and implements conditional badge rendering in the Card component that prioritizes subscription badges over the "Popular" badge. Test coverage verifies correct badge display behavior in both authenticated and unauthenticated contexts.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the main feature being added: a highlightedPlan badge option to the PricingTable component.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Description check	✅ Passed	The PR description directly addresses the changeset: adding a highlightedPlan prop to render a Popular badge on matching plans in PricingTable.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[pkg-pr-new]

Open in StackBlitz

@clerk/astro

npm i https://pkg.pr.new/@clerk/astro@8554

@clerk/backend

npm i https://pkg.pr.new/@clerk/backend@8554

@clerk/chrome-extension

npm i https://pkg.pr.new/@clerk/chrome-extension@8554

@clerk/clerk-js

npm i https://pkg.pr.new/@clerk/clerk-js@8554

@clerk/dev-cli

npm i https://pkg.pr.new/@clerk/dev-cli@8554

@clerk/expo

npm i https://pkg.pr.new/@clerk/expo@8554

@clerk/expo-passkeys

npm i https://pkg.pr.new/@clerk/expo-passkeys@8554

@clerk/express

npm i https://pkg.pr.new/@clerk/express@8554

@clerk/fastify

npm i https://pkg.pr.new/@clerk/fastify@8554

@clerk/hono

npm i https://pkg.pr.new/@clerk/hono@8554

@clerk/localizations

npm i https://pkg.pr.new/@clerk/localizations@8554

@clerk/nextjs

npm i https://pkg.pr.new/@clerk/nextjs@8554

@clerk/nuxt

npm i https://pkg.pr.new/@clerk/nuxt@8554

@clerk/react

npm i https://pkg.pr.new/@clerk/react@8554

@clerk/react-router

npm i https://pkg.pr.new/@clerk/react-router@8554

@clerk/shared

npm i https://pkg.pr.new/@clerk/shared@8554

@clerk/tanstack-react-start

npm i https://pkg.pr.new/@clerk/tanstack-react-start@8554

@clerk/testing

npm i https://pkg.pr.new/@clerk/testing@8554

@clerk/ui

npm i https://pkg.pr.new/@clerk/ui@8554

@clerk/upgrade

npm i https://pkg.pr.new/@clerk/upgrade@8554

@clerk/vue

npm i https://pkg.pr.new/@clerk/vue@8554

commit: 167be43