> ## Documentation Index
> Fetch the complete documentation index at: https://docs.nozle.dev/llms.txt
> Use this file to discover all available pages before exploring further.
# PlanCard
> One plan from your catalog as a card with its price, what it includes and a select button.
`PlanCard` renders a single plan with its price, the lines read from the plan and a button, for when you lay out your pricing page yourself instead of using [`PricingTable`](/sdks/react/components/pricing-table).
**When to use**
* A custom pricing grid, carousel or comparison page.
* A "recommended plan" box next to other content.
* An upgrade prompt that shows the plan the customer would move to.
**Light**
**Dark**
**Minimal**
**Neobrutal**
**Nozle**
**Nozle Dark**
## Importing PlanCard
```tsx theme={null}
import {
PlanCard,
type CreateCheckoutInput,
type PricingPlan,
} from '@nozle-js/react'
```
## Rendering PlanCard
Pass a plan and an `onSelect` handler; the card calls it with the plan code and return URL when the "Get Started" button is clicked:
```tsx components/pro-card.tsx theme={null}
export function ProCard({ plan, currentPlanCode }: { plan: PricingPlan; currentPlanCode: string }) {
const select = ({ planCode, returnUrl }: CreateCheckoutInput) => {
window.location.assign(`/checkout?plan=${planCode}&return=${encodeURIComponent(returnUrl)}`)
}
return (
)
}
```
The card shows the name, description, price with its interval and the plan's lines from `planFeatures`. The price is formatted in the plan's currency, without decimals for whole amounts (`$29`, `$14.99`). The interval reads `month`, `year`, `week`, `quarter` or `6 months`; other intervals show as sent.
`PlanCard` does not fetch anything and does not show [Powered by Nozle](/sdks/react/components/powered-by-nozle).
## Data
The card needs one plan in the `PricingPlan` shape the public catalog returns:
```tsx theme={null}
const pro: PricingPlan = {
code: 'pro',
name: 'Pro',
amount_cents: 2900,
amount_currency: 'USD',
interval: 'monthly',
description: 'For growing teams',
entitlements: [
{ feature_type: 'metered', code: 'api_calls', name: 'API calls', usage_limit: 50000 },
{ feature_type: 'metered', code: 'seats', name: 'Seats', usage_limit: 10 },
],
credit_grant_rules: [{ credit_system_code: 'ai_credits', amount: '500', interval: 'month' }],
}
export function ProCard() {
return
}
```
### Live data
Read the plans with [`usePlans`](/sdks/react/hooks#useplans) inside `BillingProvider`, and start checkout with [`useCheckoutSession`](/sdks/react/hooks#usecheckoutsession), which calls the provider's `createCheckout`:
```tsx theme={null}
import { useState } from 'react'
import { Checkout, useCheckoutSession, usePlans } from '@nozle-js/react'
export function PlanCards({ currentPlanCode }: { currentPlanCode: string }) {
const { plans } = usePlans()
const { fetchClientSecret } = useCheckoutSession()
const [clientSecret, setClientSecret] = useState(null)
if (clientSecret) {
return
}
return plans.map((plan) => (
void fetchClientSecret(planCode, returnUrl).then(setClientSecret)}
/>
))
}
```
## Examples
### Current plan
With `isCurrent`, the card gets a primary-colour border, `aria-current="true"` and a disabled "Current Plan" button.
```tsx theme={null}
export function FreeCard({ plan }: { plan: PricingPlan }) {
return {}} />
}
```
### Panel layout
The themes `nozle` and `nozleDark` use the [panel card layout](/sdks/react/styling#plan-card-layout): the name in a header band, with a badge that reads "Active" on the current plan.
```tsx theme={null}
import { nozle } from '@nozle-js/react/themes'
export function ProCard({ plan }: { plan: PricingPlan }) {
return {}} appearance={{ theme: nozle }} />
}
```
### Custom lines
`features` replaces the lines read from the plan.
```tsx theme={null}
export function ProCard({ plan }: { plan: PricingPlan }) {
return
}
```
## API reference
**plan** `PricingPlan` *required*
The plan to show: `code`, `name`, `amount_cents`, `amount_currency`, `interval`, and optional `description`, `entitlements`, `credit_grant_rules`, `charges`.
**isCurrent** `boolean` *required*
Shows the card as the customer's plan: a primary-colour border, `aria-current="true"`, and a disabled "Current Plan" button.
**features** `string[]`
Replaces the lines read from the plan. Defaults to the lines from `planFeatures(plan)`.
**onSelect** `(input: CreateCheckoutInput) =\> void`
Fires when the "Get Started" button is clicked and receives `{ planCode, returnUrl }`. Without it the card has no button.
**returnUrl** `string`
The `returnUrl` passed to `onSelect`. Defaults to the current URL.
**appearance** `Appearance`
Theme, variables and element overrides. Defaults to the provider's. See [Appearance](/sdks/react/styling).
### States
| State | What shows |
| - | - |
| Not current | The "Get Started" button, when `onSelect` is set. |
| Current plan | A primary-colour border and a disabled "Current Plan" button; in the panel layout, the "Active" badge. |
| No `onSelect` | The card without a button. |
The root has `data-testid="plan-card-"`.
### Appearance
> **Element keys**
>
> `planCard` (root), `planCard__name`, `planCard__description`, `planCard__price`, `planCard__features`, `planCard__feature`, `planCard__cta`. In the [panel layout](/sdks/react/styling#plan-card-layout) also `planCard__header` and `planCard__badge`, which reads "Active" on the current plan.
>
> Style them with `appearance.elements`. See [Elements](/sdks/react/styling#elements).
## Related
> **[PricingTable](/sdks/react/components/pricing-table)**
>
> All plans with checkout built in.
> **[PlanComparison](/sdks/react/components/plan-comparison)**
>
> The plans side by side, feature by feature.
> **[CheckoutButton](/sdks/react/components/checkout-button)**
>
> A button that starts checkout for one plan.
> **[PlanBadge](/sdks/react/components/plan-badge)**
>
> The plan name as a small badge.
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.