> ## Documentation Index
> Fetch the complete documentation index at: https://docs.flexprice.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Pricing Widget

> Complete pricing selector with billing toggle, plan grid, CTAs, and recommended plans

The **Pricing Widget** is the full pricing selector experience. Use it when you want a ready-made pricing page rather than composing table and cards yourself.

It composes header, billing period toggle, a grid of [Pricing Cards](/docs/exportable-ui/pricing-widget/pricing-card), feature comparison, and footer actions.

<Frame>
  <img src="https://mintcdn.com/flexprice/Vfv7ShTlJQCT5AQo/public/images/docs/exportable-ui/price_widget_exportable.png?fit=max&auto=format&n=Vfv7ShTlJQCT5AQo&q=85&s=1850bf76e188f4a390216f897458f368" alt="Pricing Widget with plans loaded via REST" width="1608" height="882" data-path="public/images/docs/exportable-ui/price_widget_exportable.png" />
</Frame>

## Features

* Monthly / yearly (or custom) billing toggle
* Multiple plans
* Usage-based, hybrid, and enterprise plans
* CTA buttons
* Feature comparison
* Highlight recommended plans
* Custom branding via theme / CSS variables

## Best used for

* Marketing websites and landing pages
* Customer portal
* Product onboarding

## Import

```tsx theme={null}
import '@flexprice/flexprice-ui/style.css';
import { PricingWidget } from '@flexprice/flexprice-ui';
```

## Usage

```tsx theme={null}
<PricingWidget
  plans={plans}
  onPlanSelect={handlePlanSelect}
  onCheckout={handleCheckout}
  onContactSales={handleContactSales}
/>
```

Pass presentational `Plan` data from the Flexprice SDK, REST, your backend, or static JSON. See [Ways to provide data](/docs/exportable-ui/overview#ways-to-provide-data).

Wire callbacks into [Checkout](/docs/checkout/overview) or your own payment flow.

## Map Flexprice API data

```ts theme={null}
import { adaptPlanToCard, filterAndSortPlans } from '@flexprice/flexprice-ui';

const plans = filterAndSortPlans(plansWithData, 'USD', 'MONTHLY').map((p) =>
  adaptPlanToCard(p, grants)
);
```

## See also

<CardGroup cols={2}>
  <Card icon="book-open" href="/docs/exportable-ui/overview" title="Overview">
    Install Flexprice UI, choose a data source, theme, and integrate components.
  </Card>

  <Card icon="table" href="/docs/exportable-ui/pricing-widget/pricing-table" title="Pricing Table">
    Comparison table for multiple plans, features, and entitlements.
  </Card>

  <Card icon="rectangle-list" href="/docs/exportable-ui/pricing-widget/pricing-card" title="Pricing Card">
    Single plan card for dashboards, modals, and custom layouts.
  </Card>
</CardGroup>