HomeDocsComponentsBlocksChartsThemes
Introduction
  • Introduction
  • Installation
  • Themes
  • llms.txt
Components
  • Accordion
  • Alert
  • Alert Dialog
  • Amount
  • Aspect Ratio
  • Audio Player
  • Avatar
  • Avatar Upload
  • Badge
  • Banner
  • Breadcrumb
  • Button
  • Button Group
  • Calendar
  • Card
  • Carousel
  • Chart
  • Checkbox
  • Code Block
  • Collapsible
  • Color Picker
  • Combobox
  • Command
  • Context Menu
  • Copy Button
  • Countdown
  • Data Grid
  • Data Table
  • Date Picker
  • Date Range Picker
  • Description List
  • Device Mockup
  • Dialog
  • Direction
  • Dot Loader
  • Drawer
  • Dropdown Menu
  • Empty
  • Field
  • File Upload
  • Hover Card
  • Input
  • Input Group
  • Input OTP
  • Item
  • Kanban
  • Kbd
  • Label
  • Menubar
  • Meter
  • Multi Select
  • Native Select
  • Navigation Menu
  • Number Field
  • Pagination
  • Password Strength
  • Phone Input
  • Popover
  • Progress
  • Progress Circle
  • Radio Group
  • Rating
  • Resizable
  • Responsive Dialog
  • Rich Text Editor
  • Scroll Area
  • Segmented Control
  • Select
  • Separator
  • Sheet
  • Sidebar
  • Signature
  • Skeleton
  • Slider
  • Sortable
  • Spinner
  • Stat
  • Stepper
  • Switch
  • Table
  • Tabs
  • Tag Input
  • Terminal
  • Textarea
  • Time Field
  • Timeline
  • Toast
  • Toggle
  • Toggle Group
  • Tooltip
  • Tree
  • Typography
  • Video Player
  • Window Mockup
AI
  • Message Scroller
  • Message
  • Bubble
  • Marker
  • Attachment
  • Questionnaire
  • Composer
  • Reasoning
  • Tool Call
  • Approval Card
  • Citations
Blocks
  • Airtable
  • Airtable Kanban
  • ClickUp List
  • ClickUp Kanban
  • Repeatable Group
  • Command Palette
  • Sign In and Sign Up
  • Availability Scheduler
  • AI Chat
  • Action Bar
  • Notion
  • Banking
  • Lineup Builder
  • Sports Score
  • Strava
  • Sheets
  • Notices
  • Settings
  • Billing
Utilities
  • motion
  • sounds
  • scroll-fade
  • shimmer
Another UI. Built on shadcn/ui with Phosphor icons.

Billing

PreviousNext

A subscription billing page with usage meters, a plan picker, payment method, billing address, invoice history and a cancel flow, built from Another UI primitives.

Billing

Your plan, payment details and invoices for North Shore Studio.

Current plan
ProMonthly
$29.00
per month + GST

Renews on 1 Nov 2026 for $30.45 with GST.

Seats8 of 10
Storage72.4 of 100 GB
Exports this month1,840 of 2,000

Almost at the limit. It resets on the 1st.

INV-1048 is due
$30.45 did not go through on 1 Oct 2026.

Plans

2 months free yearly
Starter
For a freelancer or a small side project.
$12.00/ month

Billed monthly, plus GST

  • 3 seats
  • 10 GB storage
  • 200 exports a month
  • Email support
ProCurrent plan
For a studio that ships work every week.
$29.00/ month

Billed monthly, plus GST

  • 10 seats
  • 100 GB storage
  • 2,000 exports a month
  • Priority support
Business
For larger teams that need controls and audit logs.
$79.00/ month

Billed monthly, plus GST

  • 50 seats
  • 1 TB storage
  • Unlimited exports
  • SSO and audit log
Payment method
Charged on each renewal.
Visa ending 4242Default

Expires 08/28 · Maya Thompson

Billing address
Shown on every invoice.
North Shore Studio Inc.

1250 Marine Dr, Suite 204
North Vancouver, BC V7P 1T1
GST/HST 81234 5678 RT0001

Invoices

InvoiceDateStatusAmountDownload
INV-1048
1 Oct 2026Pro, monthly
1 Oct 2026Due$30.45
INV-1047
1 Sep 2026Pro, monthly
1 Sep 2026Paid$30.45
INV-1046
18 Aug 2026Extra storage, 50 GB
18 Aug 2026Refunded$10.50
INV-1045
1 Aug 2026Pro, monthly
1 Aug 2026Paid$30.45
INV-1044
3 Jul 2026Pro, monthly (retry)
3 Jul 2026Paid$30.45
INV-1043
1 Jul 2026Pro, monthly
1 Jul 2026Failed$30.45
INV-1042
1 Jun 2026Pro, monthly
1 Jun 2026Paid$30.45
INV-1041
1 May 2026Pro, monthly
1 May 2026Paid$30.45

Installation#

pnpm dlx shadcn@latest add https://anotherui.dev/r/billing.json

Features#

  • Current plan. The plan, billing period and price in CAD with Amount, the renewal date, and Meters for seats, storage and exports that turn amber near the limit.
  • Invoice due. A Banner shows when an invoice did not go through, with Pay now.
  • Plan picker. A Monthly and Yearly Segmented Control sits in one row with the heading. Plan cards show the monthly price, what is included and mark your current plan. Choosing a plan opens a Responsive Dialog with the price, GST and total, and blocks a downgrade that your usage does not fit.
  • Payment method. The card on file with an Update dialog. The card number groups itself in fours, and the brand comes from the first digits.
  • Billing address. Company, street, city, province and postal code, checked against the Canadian format, plus your GST/HST number.
  • Invoices. A Table with status Badges (Paid, Due, Failed, Refunded) and a download button on each row. Filter by All, Paid or Unpaid. On phones the date folds under the invoice number.
  • Cancel subscription. A destructive button opens a dialog that says what happens and asks why you are leaving. After you cancel, the plan shows when it ends and a Resume button.
  • Sound. Cuelume plays on plan changes, saves, filters, downloads and dialogs.

Usage#

import {
  Billing,
  SAMPLE_INVOICES,
  SAMPLE_PLANS,
  SAMPLE_SUBSCRIPTION,
} from "@/components/blocks/billing"
<Billing
  plans={SAMPLE_PLANS}
  subscription={SAMPLE_SUBSCRIPTION}
  invoices={SAMPLE_INVOICES}
  onDownload={(invoice) => window.open(`/api/invoices/${invoice.id}.pdf`)}
/>

Prices are per month for monthly billing and per year for yearly billing. Invoice dates are plain strings, so format them on the server in the reader's locale.

Settingsmotion

On This Page

InstallationFeaturesUsage