> For the complete documentation index, see [llms.txt](https://developer.paddle.com/llms.txt). # Drop ready-to-use React components into your app with Paddle UI Paddle UI is a library of React components for checkout, pricing, and subscription management. Built on shadcn/ui, installed with the shadcn CLI, and designed to be customized to fit your app. --- ## What's new? We've released [Paddle UI](https://developer.paddle.com/sdks/components.md), 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. [Get Paddle UI from the shadcn/ui directory](https://ui.shadcn.com/docs/directory?q=paddle) ## How it works Paddle UI is built on top of [shadcn/ui](https://ui.shadcn.com/). 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](https://developer.paddle.com/sdks/components/pricing-display.md) Full pricing section with localized prices, an interval toggle, and Paddle overlay checkout on selection. - [Pricing cards](https://developer.paddle.com/sdks/components/pricing-cards.md) Tier cards with localized pricing, feature lists, and selection or current-plan states. - [Pricing select cards](https://developer.paddle.com/sdks/components/pricing-select-cards.md) Compact, selectable plan cards in a radio-group pattern. - [Billing interval toggle](https://developer.paddle.com/sdks/components/billing-interval-toggle.md) Segmented toggle for switching between billing intervals, like monthly and yearly. #### Checkout - [Inline checkout](https://developer.paddle.com/sdks/components/inline-checkout.md) Full inline checkout experience with a live order summary that stays in sync as the customer changes plans. - [Express checkout](https://developer.paddle.com/sdks/components/express-checkout.md) Mobile-first checkout block with plan selection and a drawer-style payment flow. - [Checkout summary](https://developer.paddle.com/sdks/components/checkout-summary.md) Complete order summary with line items, subtotal, tax, and recurring billing details. #### Subscription management - [Subscription status card](https://developer.paddle.com/sdks/components/subscription-status-card.md) The main billing card for a customer account page, with plan, status, discount, scheduled changes, and action buttons. - [Subscription payment card](https://developer.paddle.com/sdks/components/subscription-payment-card.md) A customer's next payment date, amount, and the payment method on file. - [Subscription alert](https://developer.paddle.com/sdks/components/subscription-alert.md) Status-aware alert banners that surface the right message based on subscription state. - [Plan change preview](https://developer.paddle.com/sdks/components/plan-change-preview.md) Compact confirmation summary for a plan change, including the old and new plan and when the change takes effect. - [Plan change breakdown](https://developer.paddle.com/sdks/components/plan-change-breakdown.md) 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: {% code-group sync="js-package-manager" %} ```bash {% title="pnpm" %} pnpm dlx shadcn@latest registry add @paddle ``` ```bash {% title="yarn" %} yarn dlx shadcn@latest registry add @paddle ``` ```bash {% title="npm" %} npx shadcn@latest registry add @paddle ``` {% /code-group %} 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: {% code-group sync="js-package-manager" %} ```bash {% title="pnpm" %} pnpm dlx shadcn@latest add @paddle/pricing-display ``` ```bash {% title="yarn" %} yarn dlx shadcn@latest add @paddle/pricing-display ``` ```bash {% title="npm" %} npx shadcn@latest add @paddle/pricing-display ``` {% /code-group %} ## Build with AI Copy prompts from the [Paddle UI](https://developer.paddle.com/sdks/components.md) 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](https://developer.paddle.com/sdks/ai/agent-skills.md), [Paddle docs MCP server](https://developer.paddle.com/sdks/ai/docs-mcp.md) and the [Paddle MCP server](https://developer.paddle.com/sdks/ai/paddle-mcp.md) 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](https://developer.paddle.com/sdks/components.md) for the full component library and install instructions, or grab it on the [shadcn/ui directory](https://ui.shadcn.com/docs/directory?q=paddle).