Billing and team

Installation & usage

npx @youj/cli add app-billing

Also installs alert, app-page, async-button, badge, button, card, counter, dialog, field, icon-credit-card, icon-download, icon-lock, icon-refresh, input, presence-list, radio-group, reveal, skeleton, table, textarea, toast, toggle-group, typography, youj-core, youj-ui-core.

The CLI copies the block to blocks/app/billing.tsx with every component it uses, so it’s yours to edit.

Every prop is optional and falls back to the demo, so it renders as you see it until you pass your own. Give it your data, rewrite or translate its strings through copy, and connect its actions:

billing-view.tsx

'use client'

import { Billing, type BillingProps } from '@/blocks/app/billing'

export function BillingView({ plans, cycle, card, invoices }: Pick<BillingProps, 'plans' | 'cycle' | 'card' | 'invoices'>) {
  return (
    <Billing
      plans={plans}
      cycle={cycle}
      card={card}
      invoices={invoices}
      copy={{ title: 'Billing' }}
      onRetry={() => {
        // your code
      }}
      onChangePlan={async (change) => {
        // await your API here; the block shows progress until it settles
      }}
      onUpdatePayment={async (input) => {
        // await your API here; the block shows progress until it settles
      }}
    />
  )
}

Reference

Props26 props, 5 types

Props

Billing props
Prop	Type	Default
`theme`	`ThemeInput` A theme to force on the block. Default: none, so it inherits the app's (YoujProvider or a ThemeScope around it).	–
`embedded`	`boolean` A page in your app's frame: the shared page header (AppPage) and the frame's gutter, across the whole width, with no top bar of its own. default true	`true`
`failedPayment`	`boolean` Starts with September's charge failed, which raises the payment alert. Only applies to the demo invoices. default true	`true`
`brand`	`{ name: string; logo?: ReactNode }` The product in the top bar. default Tern	`Tern`
`plans`	`BillingPlan[]` The plans on offer, cheapest first. default Starter, Growth, Scale	`Starter, Growth, Scale`
`plan`	`string` The current plan's id, to control it. Pair with `onChangePlan`.	–
`defaultPlan`	`string` The current plan's id at first, when uncontrolled. default 'growth'	`'growth'`
`cycle`	`BillingCycle` `'monthly''annual'` The billing cycle, to control it.	–
`defaultCycle`	`BillingCycle` `'monthly''annual'` The billing cycle at first, when uncontrolled. default 'monthly'	`'monthly'`
`seats`	`number` Seats the workspace pays for. default 14	`14`
`card`	`BillingCard` The card on file. default a Visa ending 4242	`a Visa ending 4242`
`invoices`	`BillingInvoice[]` Every invoice, newest first; one with status `failed` raises the payment alert. Default: Tern's seven.	–
`details`	`BillingInfo` Who invoices are addressed to. default Tern Analytics GmbH	`Tern Analytics GmbH`
`locale`	`string` Formats every amount. Default: the app's locale (YoujProvider's `locale`), else en-US.	–
`currency`	`string` The ISO currency of every amount. default 'USD'	`'USD'`
`headingLevel`	`1 \| 2 \| 3` The page title's level; section headings sit one below. default 1	`1`
`loading`	`boolean` Shows skeleton rows in place of the invoices while they load. default false	`false`
`error`	`ReactNode` A load failure, shown under the title with a Retry button when `onRetry` is set.	–
`onRetry`	`() => void` Called from the error's Retry button.	–
`empty`	`ReactNode` Replaces the empty state shown when there are no invoices. default `copy.emptyInvoices`	`copy.emptyInvoices`
`copy`	`Partial<BillingCopy>` Any of the page's strings, to rewrite or translate.	–
`onChangePlan`	`(change: { plan: BillingPlan; cycle: BillingCycle }) => Promise<unknown> \| unknown` Switches plan or cycle; resolve when done, throw to show the error in the dialog. Default: a demo wait.	–
`onUpdatePayment`	`(input: BillingCardInput) => Promise<BillingCard \| void> \| BillingCard \| void` Saves a new card from the form; resolve with the card on file (or nothing to show what was typed). Default: a demo wait.	–
`onRetryPayment`	`(invoice: BillingInvoice) => Promise<unknown> \| unknown` Retries a failed charge; resolve when paid, throw when declined. Default: a demo wait.	–
`onDownloadInvoice`	`(invoice: BillingInvoice) => Promise<unknown> \| unknown` Fetches an invoice's PDF; resolve when it's ready. Default: a demo wait.	–
`onSaveDetails`	`(details: BillingInfo) => Promise<unknown> \| unknown` Saves the billing details; resolve when saved, throw to show the error. Default: a demo wait.	–

`BillingPlan`

BillingPlan props
Prop	Type	Default
`id`Required	`string`	–
`name`Required	`string`	–
`blurb`Required	`string`	–
`price`Required	`number` Per seat per month, billed monthly, in the block's currency. Annual billing takes two months off.	–

`BillingCard`

BillingCard props
Prop	Type	Default
`brand`Required	`string` e.g. `Visa`.	–
`last4`Required	`string`	–
`expMonth`Required	`number`	–
`expYear`Required	`number` Four digits.	–
`name`Required	`string`	–

`BillingCardInput`

BillingCardInput props
Prop	Type	Default
`name`Required	`string`	–
`number`Required	`string`	–
`expiry`Required	`string` `MM/YY`.	–
`cvc`Required	`string`	–

`BillingInvoice`

BillingInvoice props
Prop	Type	Default
`id`Required	`string`	–
`number`Required	`string` As printed, e.g. `TRN-0010`.	–
`date`Required	`string` As it reads, e.g. `Sep 1, 2026`.	–
`period`Required	`string` What it covers, e.g. `Sep 2026`.	–
`amount`Required	`number` In the block's currency; negative for a credit.	–
`status`Required	`BillingInvoiceStatus` `'paid''due''failed''refunded'`	–

`BillingInfo`

BillingInfo props
Prop	Type	Default
`company`Required	`string`	–
`email`Required	`string`	–
`address`Required	`string`	–
`taxId`Required	`string`	–

Strings98 keys for copy

Built from18 components

Accessibilitylandmarks, dialogs, tables, status

#Installation & usage

#Description

#Code

#Reference

Props

BillingPlan

BillingCard

BillingCardInput

BillingInvoice

BillingInfo

Strings

Built from

Components used

#Accessibility