> ## Documentation Index
> Fetch the complete documentation index at: https://flexprice-mintlify-370b7c30.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# Overview
> Production-ready billing UI, pulled straight from the Flexprice dashboard, that renders from any data source
Building billing UI from scratch means re-solving problems Flexprice already solved: currency formatting, entitlement states, empty states, dark mode, responsive layout. **Flexprice UI** (`@flexprice/ui`) skips that work. It's the actual React components from the Flexprice dashboard, published as an installable library, so your pricing page, usage dashboard, and billing screens match a production system on day one instead of a first draft.
Every component is presentational: no fetching, no auth, no routing baked in. You own the data. Feed a component from the Flexprice SDK, the REST API, your own backend, or a plain JSON file, and it renders identically either way.
One CSS variable away from your brand.
Every component ships a light and dark treatment.
Typed props and adapters, no `any`.
Works in Next.js, Remix, and Astro.
## Components
| Component | Description |
| ----------------------------------------------------------------- | ------------------------------------------------------------------------------- |
| [Pricing Table](/docs/exportable-ui/pricing-widget/pricing-table) | Comparison grid of multiple plans, with billing period and currency controls. |
| [Pricing Card](/docs/exportable-ui/pricing-widget/pricing-card) | A single plan: price, entitlements, and a CTA. Compose your own layout with it. |
| Component | Description |
| ------------------------------------------------------------------------ | ------------------------------------------------------------ |
| [Metric Cards](/docs/exportable-ui/usage-widgets/metric-cards) | Headline numbers: revenue, cost, margin, and custom metrics. |
| [Usage Trend Chart](/docs/exportable-ui/usage-widgets/usage-trend-chart) | Line chart of usage over time, one series per feature. |
| [Usage Breakdown](/docs/exportable-ui/usage-widgets/usage-breakdown) | Grouped, sortable table of usage and cost by feature. |
| [Usage Quota](/docs/exportable-ui/usage-widgets/usage-quota) | Progress bars showing usage against each plan limit. |
| Component | Description |
| -------------------------------------------------------------------- | ---------------------------------------------------------------- |
| [Credit Balance](/docs/exportable-ui/credits-widgets/credit-balance) | Wallet balance card: credits, monetary value, and status. |
| [Credit History](/docs/exportable-ui/credits-widgets/credit-history) | Paginated wallet transaction history, with multi-wallet support. |
Every component page has a live, interactive **Preview** you can toggle between light and dark, right next to the **Code** that produces it.
The full Flexprice documentation, including every component on this page, as one plain-text file at `/llms-full.txt`. Open it to copy the raw text, or paste the link into an AI tool that can fetch URLs.
As more Flexprice surfaces become exportable, they ship here under the same pattern: install, bring your own data, render.
## Install
```bash npm theme={null}
npm install @flexprice/ui
```
```bash pnpm theme={null}
pnpm add @flexprice/ui
```
```bash yarn theme={null}
yarn add @flexprice/ui
```
### Peer dependencies
`react` and `react-dom` (v18).
### Stylesheet
Import the stylesheet once in your app:
```tsx theme={null}
import '@flexprice/ui/style.css';
```
You can also override appearance with CSS variables, Tailwind, CSS Modules, or other styling approaches — see [Theming](#theming).
## Ways to provide data
Every component follows the same pattern: fetch data from a source you choose, map it into the presentational props the component expects, and render.
### Option 1: Flexprice SDK (recommended)
```
Frontend → Flexprice SDK → Flexprice APIs → Components
```
Best for existing Flexprice customers, live data, and automatic catalog updates.
### Option 2: Flexprice REST APIs
```
Frontend → Flexprice REST API → Components
```
Best for Server Components, a backend proxy, or custom authentication.
### Option 3: Your own backend
```
Frontend → Your backend → Flexprice → Components
```
Your backend can cache responses, add auth, transform data, or merge internal fields.
### Option 4: Your own APIs
```
Frontend → Your API → Components
```
If your APIs already expose the data you need, map them into each component's prop shape. No Flexprice API dependency is required.
### Option 5: Static JSON
Best for documentation sites, marketing pages, and demos.
### Which approach to use
| Approach | Best for |
| ----------------------- | ---------------------------------------- |
| **Flexprice SDK** | Existing Flexprice users, live data |
| **Flexprice REST APIs** | Direct API control with live data |
| **Backend proxy** | Auth, caching, or server-side transforms |
| **Custom APIs** | Systems outside Flexprice |
| **Static JSON** | Marketing sites, demos, documentation |
Component pages document the exact prop shapes and any adapters for mapping Flexprice API responses.
## Theming
Every component renders inside an element carrying the `flexprice-ui` class, and that element is
where the theme tokens are declared. Override them with a selector that **matches that element** —
`--primary` is the accent hook:
```css theme={null}
.my-app .flexprice-ui {
--primary: 243 75% 59%;
}
```
Setting these variables on a wrapping *ancestor* has no effect. The package declares them on
`.flexprice-ui` itself, so an ancestor rule loses the cascade and the components render
unchanged. Target `.flexprice-ui` (or an element that also carries the class).
Values are HSL channels — `243 75% 59%`, not `hsl(243 75% 59%)` or `#4f46e5`.
Add the `dark` class to any ancestor to toggle dark mode:
```tsx theme={null}
{/* Flexprice UI components */}
```
Individual components may also accept theme-related props — see each component page.
## Event callbacks
Components expose callbacks for user actions (selection, checkout, contact sales, and similar). Wire them to analytics, [Checkout](/docs/checkout/overview), a payment provider, or your own flow. See each component page for the callbacks it supports.
## Server-side rendering
Components work with SSR in Next.js (App Router and Pages Router), Remix, and Astro. Fetch data on the server when you can, then pass it as props to avoid client-only waterfalls.
## Typical integration flow
Add `@flexprice/ui` and ensure `react` / `react-dom` are available as peer dependencies.
Import `@flexprice/ui/style.css` once, then import the components you need.
Pick Flexprice SDK, REST APIs, your backend, your own APIs, or static JSON — see [Ways to provide data](#ways-to-provide-data).
Load records from your source and map them into each component's presentational props (adapters are documented on the component pages).
Pass the mapped data (and any callbacks) into the component and render it in your page or layout.
## Future components
The package is designed to expand beyond the current exports. Planned surfaces include invoices, subscription details, and the full customer portal. New components follow the same pattern: install from `@flexprice/ui`, load data from any source, map into props, and render.