Plan gate

Pro

A panel for a feature the current plan doesn't include, honestly empty: the feature's name, which plan includes it, what the plan lacks, what the feature would show (as a list of words, with no sample data behind it), and how to get it: the app's upgrade action, or who to ask. The feature's own controls, named in controls, stand in their place through Locked, saying which plan they need. With upgradeLocked, the upgrade button stays, locked, saying why (only an owner can change the plan, say).

Markdown

Version 5.2.0· other versions

This page is for 5.2.0, the current release. An earlier release’s page is the Markdown that release published, so the docs match the version you have installed (candor-lock.json records it).

Not in the docs of 1.3.0, 1.4.0, 1.5.0, 1.5.1, 1.6.0, 1.7.0, 1.8.0, 1.8.1, 1.9.0, 1.9.1, 2.0.0, 2.1.0, 2.2.0, 2.3.0, 2.4.0, 2.5.0, 2.5.1, 2.6.0, 2.6.1, 2.6.2, 2.7.0, 2.8.0, 2.9.0, 2.10.0, 3.0.0, 4.0.0, 4.0.1, 4.0.2, 4.1.0, 4.2.0 and 4.3.0: the page came later, or had another name then.

Docs pages weren’t kept for 1.0.0, 1.0.1, 1.1.0, 1.1.1, 1.2.0 and 1.2.1: they are kept from 1.3.0 on, and before that only llms.txt was published.

Preview

Install

With the Candor CLI

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/plan-gate

Brings in: bidi, button, heading-level, heading-scope, locale, locked, tokens, utils · npm: lucide-react@^1.67.0

Usage

TSX · The example above

"use client"

import { PlanGate } from "@/components/candor/plan-gate"

export default function Example() {
  // Shown where the feature would be: what it would show is words, never sample figures.
  return (
    <PlanGate
      className="max-w-lg"
      feature="Release readiness"
      plan="Pro"
      currentPlan="Starter"
      description="What has to happen before each release, checked against your environments."
      shows={["Each change’s risk and who approved it", "Tests and checks still to pass", "What a rollback would undo"]}
      controls={["Run a readiness check"]}
      onUpgrade={() => {}}
    />
  )
}

<PlanGate>

Prop	Type	Default	Description
featurerequired	`string`	—	The feature's name, e.g. "Release readiness".
planrequired	`string`	—	The plan that includes it, e.g. "Pro".
currentPlan	`string \| undefined`	—	The plan the account is on now, e.g. "Starter". Left out, the panel says only that the plan doesn't include it.
description	`string \| undefined`	—	What the feature is for, in one line, in the app's words.
shows	`string[] \| undefined`	[]	What the feature would show, as words: "Each change's risk", "What has to happen before the release".
controls	`string[] \| undefined`	[]	The feature's own controls, by their labels, drawn in their place as locked buttons that say which plan they need.
onUpgrade	`(() => void) \| undefined`	—	Shows the upgrade button; called when it's pressed. Without it, the panel says who to ask.
upgradeLabel	`string \| undefined`	—	The upgrade button's words; "Upgrade to {plan}" by default.
upgradeLocked	`string \| null \| undefined`	—	Why this person can't upgrade, e.g. "Only the account owner can change the plan." The button stays, locked, saying it. `null` or unset means they can.
className	`string \| undefined`	—	Classes, merged with Candor's.
headingLevel	`HeadingLevel \| undefined`	—	The level of the panel's heading, so it fits under the page's own headings. Default: one below the nearest `HeadingScope`, else 2 (`<h2>`). Its sub-headings sit one level below it.

Strings

The fixed words, in English by default. Change any of them under planGate in <LocaleProvider strings={{ … }}>; the table is exported as planGateStrings.

Key	English
includedIn	Included in {plan}
lacks	Your plan, {current}, doesn’t include {feature}.
lacksUnnamed	Your plan doesn’t include {feature}.
shows	What it shows
empty	Nothing is shown here until {feature} is part of your plan: no sample data stands in for it.
upgrade	Upgrade to {plan}
howToGet	Ask whoever manages your plan to move to {plan}.
controlLocked	{feature} is included in {plan}. Your plan doesn’t include it.

Types from other items

The props above take these. Each is defined by another item; import it from the path shown.

HeadingLevel from @/lib/candor/heading-level: A heading's level in the page's outline: `1` is `<h1>`, `6` is `<h6>`. Every Candor item that draws a heading takes its `headingLevel` as this type; the level is where the heading sits in the outline, never how large it looks.; 1 | 2 | 3 | 4 | 5 | 6