SubscriptionPlanField

Displays the user's current subscription plan as a compact badge showing the plan name and price. Looks up the matched plan in a supplied plans array by record id.

Installation

pnpm dlx shadcn@latest add @shadmin/subscription-plan-field

Usage

import { SubscriptionPlanField } from "@/components/admin";
 
const PLANS = [
  { id: "free", name: "Free", price: 0, currency: "USD", interval: "month" },
  { id: "pro", name: "Pro", price: 29, currency: "USD", interval: "month" },
  { id: "team", name: "Team", price: 99, currency: "USD", interval: "month" },
];
 
<SubscriptionPlanField source="planId" plans={PLANS} />;

When the record's planId value doesn't match any entry in plans, the field renders null by default. Pass empty to render a fallback instead.

Props

PropRequiredTypeDefaultDescription
sourceRequiredstring-Record field for the plan id
plansRequiredreadonly SubscriptionPlan[]-Available plans
emptyOptionalReactNode-Fallback when planId is unknown
classNameOptionalstring-CSS class applied to the badge

SubscriptionPlan shape

interface SubscriptionPlan {
  id: string;
  name: string;
  price: number;
  currency: string;
  interval: "month" | "year";
  features?: readonly string[];
}

The features array is optional on the field (it's only used by <SubscriptionPlanPicker>).

empty

<SubscriptionPlanField source="planId" plans={PLANS} empty="—" />

empty accepts a string (translated via the i18n provider) or any ReactNode.