Stripe products

Admin product list where each "Show on pricing page" switch adds or removes the plan from a live pricing preview, and Sync from Stripe flags what changed.

TypeScript Source with Startup & Business plans Light & dark

Products

Synced from Stripe. Choose which plans show on the pricing page.

Pricing page preview

Solo$29/mo

Startup$79/mo

Solo
One founder, one product.
prod_Solo91x
Shown
Startup
A small team shipping fast.
prod_Startup4k
Shown
Business
Multiple products and teams.
prod_Biz7qa
Hidden
Legacy ProArchived
Grandfathered 2024 plan.
prod_Legacy2
Hidden

Interactive preview · desktop · dark

Installation

Installation is available on the Startup and Business plans. Your personal install command appears here once you have access.

Usage

Import it, pass your props, and make it part of your product.

example.tsx

1import { StripeProducts } from '@/components/component-kit/items/block-stripe-products';
2
3export function Example() {
4  return <StripeProducts onToggleVisibility={(product, visible) => console.log(product.id, visible)} />;
5}

Props

Stripe products properties
Prop	Type	Default	Description
`products`	`BillingProduct[]`	`4 demo products`	Products with id, name, description, monthly price, active and visible.
`currency`	`string`	`"$"`	Symbol shown in front of prices.
`onToggleVisibility`	`(product: BillingProduct, visible: boolean) => void`	`undefined`	Called when a product is shown on or hidden from the pricing page.
`onSync`	`() => Promise<BillingProduct[]> \| void`	`undefined`	Resolve with the refreshed list; the demo applies a price change and a new product.
`compact`	`boolean`	`false`	Pricing preview and two products, for small previews.
`autoPlay`	`boolean`	`false`	Toggle one product's visibility on a loop.

Usage

Import it, pass your props, and make it part of your product.

example.tsx

1import { StripeProducts } from '@/components/component-kit/items/block-stripe-products';
2
3export function Example() {
4  return <StripeProducts onToggleVisibility={(product, visible) => console.log(product.id, visible)} />;
5}

Props

Stripe products properties
Prop	Type	Default	Description
`products`	`BillingProduct[]`	`4 demo products`	Products with id, name, description, monthly price, active and visible.
`currency`	`string`	`"$"`	Symbol shown in front of prices.
`onToggleVisibility`	`(product: BillingProduct, visible: boolean) => void`	`undefined`	Called when a product is shown on or hidden from the pricing page.
`onSync`	`() => Promise<BillingProduct[]> \| void`	`undefined`	Resolve with the refreshed list; the demo applies a price change and a new product.
`compact`	`boolean`	`false`	Pricing preview and two products, for small previews.
`autoPlay`	`boolean`	`false`	Toggle one product's visibility on a loop.

Usage

Import it, pass your props, and make it part of your product.

example.tsx

1import { StripeProducts } from '@/components/component-kit/items/block-stripe-products';
2
3export function Example() {
4  return <StripeProducts onToggleVisibility={(product, visible) => console.log(product.id, visible)} />;
5}

Props

Stripe products properties
Prop	Type	Default	Description
`products`	`BillingProduct[]`	`4 demo products`	Products with id, name, description, monthly price, active and visible.
`currency`	`string`	`"$"`	Symbol shown in front of prices.
`onToggleVisibility`	`(product: BillingProduct, visible: boolean) => void`	`undefined`	Called when a product is shown on or hidden from the pricing page.
`onSync`	`() => Promise<BillingProduct[]> \| void`	`undefined`	Resolve with the refreshed list; the demo applies a price change and a new product.
`compact`	`boolean`	`false`	Pricing preview and two products, for small previews.
`autoPlay`	`boolean`	`false`	Toggle one product's visibility on a loop.

Stripe products

Admin product list where each "Show on pricing page" switch adds or removes the plan from a live pricing preview, and Sync from Stripe flags what changed.

TypeScript Source with Startup & Business plans Light & dark

Products

Synced from Stripe. Choose which plans show on the pricing page.

Pricing page preview

Solo$29/mo

Startup$79/mo

Solo
One founder, one product.
prod_Solo91x
Shown
Startup
A small team shipping fast.
prod_Startup4k
Shown
Business
Multiple products and teams.
prod_Biz7qa
Hidden
Legacy ProArchived
Grandfathered 2024 plan.
prod_Legacy2
Hidden

Interactive preview · desktop · dark

Installation

Installation is available on the Startup and Business plans. Your personal install command appears here once you have access.

Usage

Import it, pass your props, and make it part of your product.

example.tsx

1import { StripeProducts } from '@/components/component-kit/items/block-stripe-products';
2
3export function Example() {
4  return <StripeProducts onToggleVisibility={(product, visible) => console.log(product.id, visible)} />;
5}

Props

Stripe products properties
Prop	Type	Default	Description
`products`	`BillingProduct[]`	`4 demo products`	Products with id, name, description, monthly price, active and visible.
`currency`	`string`	`"$"`	Symbol shown in front of prices.
`onToggleVisibility`	`(product: BillingProduct, visible: boolean) => void`	`undefined`	Called when a product is shown on or hidden from the pricing page.
`onSync`	`() => Promise<BillingProduct[]> \| void`	`undefined`	Resolve with the refreshed list; the demo applies a price change and a new product.
`compact`	`boolean`	`false`	Pricing preview and two products, for small previews.
`autoPlay`	`boolean`	`false`	Toggle one product's visibility on a loop.