For AI agents and LLMs: a structured documentation index is available at /llms.txt. Every page has a Markdown sibling — append .md to any URL.

Skip to content
Docs

Paddle UI

Drop-in React components for billing and subscription management. Install using the shadcn CLI.

Use Paddle UI to quickly add checkout, pricing pages, and subscription management screens to your app or website. It makes building billing and subscription flows faster and easier by giving you prebuilt solutions for common scenarios.

How it works

Paddle UI is a library of ready-to-use React components built on top of shadcn/ui, designed to to be dropped into your project and customized to fit your needs.

They make it quicker to build billing and subscription flows by giving you:

  • Extensible components that can be customized to fit your needs.
  • Composable components that can be combined to create complex flows.
  • Helpers for common tasks, like formatting prices and dates.
  • Scaffolding for hard problems, like handling subscription state changes.
  • A Paddle.js client instance, event dispatcher, and SDK hooks.

They're perfect for building with an AI agent, as they give LLMs a head start on building the right UI for your product.

Setup

Register the Paddle namespace with the shadcn CLI:

pnpm
pnpm dlx shadcn@latest registry add @paddle
yarn
yarn dlx shadcn@latest registry add @paddle
npm
npx shadcn@latest registry add @paddle

You only need to do this once per project. Once registered, install any component with the shadcn CLI.

Components

Pricing display
Full pricing section with localized prices, an interval toggle, and Paddle overlay checkout on selection.
Pricing cards
Tier cards with localized pricing, feature lists, and selection or current-plan states.
Pricing select cards
Compact, selectable plan cards in a radio-group pattern. Stacked or grid layout.
Billing interval toggle
Segmented toggle for switching between billing intervals, like monthly and yearly.
Express checkout
Mobile-first checkout block with plan selection and a drawer-style payment flow.
Inline checkout
Full inline checkout experience with a live order summary that stays in sync as the customer changes plans.
Checkout summary
Complete order summary with line items, subtotal, tax, and recurring billing details. Included as part of the inline checkout component.
Subscription status card
The main billing card for a customer account page. Includes plan, status, discount, scheduled changes, and action buttons.
Subscription alert
Status-aware alert banners that surface the right message based on subscription state.
Subscription payment card
A customer's next payment date, amount, and the payment method on file, with option to update the payment method.
Plan change preview
Compact confirmation summary for a plan change. Includes the old and new plan, whether the customer is charged or credited, and when the change takes effect.
Plan change breakdown
Full invoice-style financial breakdown for a plan change, including line items, proration, discounts, tax, and totals.
Core components
Shared types, formatters, and the Paddle.js client helpers that every Paddle UI component depends on. These come bundled with other components, so you don't need to install them directly.

What good looks like

Shadcn UI components are designed to be customizable, so you can make them look and feel like your app. However, if you're building a checkout experience, you must make sure it's compliant.

A compliant checkout lets customers know who they're buying from, what they're buying, and how much they're paying. If you're remixing components, your implementation must include:

Illustration of an inline checkout implementation. On the left is the Paddle Checkout frame, and on the right is an items list. At the top of the items list is some text that says $3600, free for 14 days then billed monthly (1). Under this is an items list (2), followed by a totals table that includes subtotal, tax, and grand total (3). At the bottom is the Paddle.com footer (4) and a link to a refund policy (5).

  1. If recurring, how often it recurs and the total to pay on renewal. If a trial, how long the trial lasts.
  2. A description of what's being purchased.
  3. Transaction totals, including subtotal, total tax, and grand total. Be sure to include the currency too.
  4. The full inline checkout frame, including the checkout footer that has information about Paddle, our terms of sale, and our privacy policy.
  5. A link to your refund policy, if it differs from the Paddle.com standard refund policy.

Was this page helpful?