Skip to main content
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.

Themeable

One CSS variable away from your brand.

Dark mode built in

Every component ships a light and dark treatment.

Full TypeScript

Typed props and adapters, no any.

SSR-ready

Works in Next.js, Remix, and Astro.

​
Components in the UI kit

Every component page has a live, interactive Preview you can toggle between light and dark, right next to the Code that produces it.

Feed this to an LLM

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.

​
Installing the UI kit

​
UI kit peer dependencies

react and react-dom (v18).

​
Importing the UI kit stylesheet

Import the stylesheet once in your app:
You can also override appearance with CSS variables, Tailwind, CSS Modules, or other styling approaches — see Theming.

​
Ways to provide data to the components

Every component follows the same pattern: fetch data from a source you choose, map it into the presentational props the component expects, and render.
Best for existing Flexprice customers, live data, and automatic catalog updates.

​
Option 2: Fetch from the Flexprice REST API

Best for Server Components, a backend proxy, or custom authentication.

​
Option 3: Fetch through your own backend

Your backend can cache responses, add auth, transform data, or merge internal fields.

​
Option 4: Fetch from your own APIs

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: Pass static JSON

Best for documentation sites, marketing pages, and demos.

​
Which data source to choose

Component pages document the exact prop shapes and any adapters for mapping Flexprice API responses.

​
Theming the UI kit

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:
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:
Individual components may also accept theme-related props — see each component page.

​
Event callbacks on the components

Components expose callbacks for user actions (selection, checkout, contact sales, and similar). Wire them to analytics, Checkout, a payment provider, or your own flow. See each component page for the callbacks it supports.

​
Server-side rendering the UI kit

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.

​
A typical UI kit integration flow

1

Install the package

Add @flexprice/ui and ensure react / react-dom are available as peer dependencies.
2

Import stylesheet and components

Import @flexprice/ui/style.css once, then import the components you need.
3

Choose a data source

Pick Flexprice SDK, REST APIs, your backend, your own APIs, or static JSON — see Ways to provide data.
4

Fetch and map data

Load records from your source and map them into each component’s presentational props (adapters are documented on the component pages).
5

Pass props and render

Pass the mapped data (and any callbacks) into the component and render it in your page or layout.

​
Components planned for the UI kit

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.