> For the complete documentation index, see [llms.txt](https://developer.paddle.com/llms.txt).

# 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](https://ui.shadcn.com/), 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:

{% 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 %}

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

## Components

- [Pricing display](https://developer.paddle.com/sdks/components/pricing-display.md)
- [Pricing cards](https://developer.paddle.com/sdks/components/pricing-cards.md)
- [Pricing select cards](https://developer.paddle.com/sdks/components/pricing-select-cards.md)
- [Billing interval toggle](https://developer.paddle.com/sdks/components/billing-interval-toggle.md)
- [Express checkout](https://developer.paddle.com/sdks/components/express-checkout.md)
- [Inline checkout](https://developer.paddle.com/sdks/components/inline-checkout.md)
- [Checkout summary](https://developer.paddle.com/sdks/components/checkout-summary.md)
- [Subscription status card](https://developer.paddle.com/sdks/components/subscription-status-card.md)
- [Subscription alert](https://developer.paddle.com/sdks/components/subscription-alert.md)
- [Subscription payment card](https://developer.paddle.com/sdks/components/subscription-payment-card.md)
- [Plan change preview](https://developer.paddle.com/sdks/components/plan-change-preview.md)
- [Plan change breakdown](https://developer.paddle.com/sdks/components/plan-change-breakdown.md)
- [Core components](https://developer.paddle.com/sdks/components/foundation.md)

## 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.