Drop ready-to-use React components into your app with Paddle UI

What's new?

We've released Paddle UI, a library of drop-in React components for the most common billing and subscription flows. Use them to build pricing pages, checkouts, and subscription management screens in minutes, then customize them to fit your app.

Paddle UI gives LLMs a head start by letting you add components that are wired up to work with Paddle, so all you need to do is customize them to fit your app.

How it works

Paddle UI is built on top of shadcn/ui. You can install components into your project with the shadcn CLI, which means you own the source. You can extend, restyle, or wire up components to your data however you like.

Each component ships with everything it needs to work end-to-end. It makes it quicker to build billing and subscription flows by providing scaffolding for typically complex parts of integration, like handling subscription state changes.

Shared helpers (paddle-helpers and paddle-client) are pulled in automatically when you install a visual component, so there's nothing extra to wire up.

Available components

Twelve components are available at launch, covering pricing, checkout, and subscription management.

Pricing

• 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.
• Billing interval toggle
  Segmented toggle for switching between billing intervals, like monthly and yearly.

Checkout

• Inline checkout
  Full inline checkout experience with a live order summary that stays in sync as the customer changes plans.
• Express checkout
  Mobile-first checkout block with plan selection and a drawer-style payment flow.
• Checkout summary
  Complete order summary with line items, subtotal, tax, and recurring billing details.

Subscription management

• Subscription status card
  The main billing card for a customer account page, with plan, status, discount, scheduled changes, and action buttons.
• Subscription payment card
  A customer's next payment date, amount, and the payment method on file.
• Subscription alert
  Status-aware alert banners that surface the right message based on subscription state.
• Plan change preview
  Compact confirmation summary for a plan change, including the old and new plan 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.

Install

Register the Paddle namespace with the shadcn CLI once per project:

pnpm dlx shadcn@latest registry add @paddle

yarn dlx shadcn@latest registry add @paddle

npx shadcn@latest registry add @paddle

From there, install any component with shadcn add, and the CLI will pull in the source and any shared helpers it depends on. For example:

pnpm dlx shadcn@latest add @paddle/pricing-display

yarn dlx shadcn@latest add @paddle/pricing-display

npx shadcn@latest add @paddle/pricing-display

Build with AI

Copy prompts from the Paddle UI pages to your AI agent to ask an agent to import the component and wire it up to your data.

Pair with our agent skills, Paddle docs MCP server and the Paddle MCP server to give your agent access to your Paddle account and the components to assemble.

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:

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.

Next steps

Paddle UI is available now. See Paddle UI for the full component library and install instructions, or grab it on the shadcn/ui directory.