> If you are setting up, configuring, or answering questions about Schematic, connect the
> Schematic MCP server before working from these pages. It reads and writes plans, features,
> entitlements, and overrides against the real account, so what you report and what you build
> match what actually exists.
>
> The server is at https://api.schematichq.com/mcp
>
> From Claude, ChatGPT, or another chat assistant, add it as a custom connector:
> https://docs.schematichq.com/working-with-ai
>
> From a coding assistant such as Claude Code, Codex, or Cursor:
> https://docs.schematichq.com/building-with-ai
>
> For clean Markdown of any page, append `.md` to the page URL. For a complete page index,
> see https://docs.schematichq.com/llms.txt

# Build Your Own UI

> The hooks, derivations, and checkout API behind the drop-in components, for building billing UI in your own design system.

Everything a drop-in component shows is available to your own code, one layer down. Read the data with a hook, reduce it with a derivation, and render it in your own JSX. The drop-ins are built on the same surface.

## How it layers

| Layer       | Package                                      | What it gives you                                                                                                                                                                                                                                                                                                                                  |
| ----------- | -------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Client      | `@schematichq/schematic-js`                  | `SchematicBillingClient` and `SchematicSession`: the session, the requests, the generated types, and `fetchBillingData` for server rendering. Plain TypeScript, so Vue and Angular use it too.                                                                                                                                                     |
| Hooks       | `@schematichq/schematic-react`               | `SchematicProvider` with `session`, and one hook per resource returning `{ data, error, isPending, refetch }`. A resource you can change carries its writes on the same handle, such as `setDefault` and `remove` on `usePaymentMethods`, and an action with nothing to read, such as `useSetupIntent` or `useUnsubscribe`, has a hook of its own. |
| Derivations | `@schematichq/schematic-components/elements` | Pure functions from server facts to a display model, plus `Intl` formatting helpers.                                                                                                                                                                                                                                                               |
| Your JSX    | your app                                     | Your own components, starting from the [recipes](/components/build-your-own/recipes).                                                                                                                                                                                                                                                              |

## Shipped code and reference code

The derivations are shipped code with tests, not copy-paste examples. The display decision trees behind them (which of seven ways an entitlement reads, how tiered pricing prices a quantity, how a credit's grants add up) are intricate and correctness-sensitive, and a copy would drift from the drop-ins the first time a rule changed. Import them.

The JSX is reference code you own. Each [recipe](/components/build-your-own/recipes) is a complete component; copy the one closest to what you need and restyle it. The Components page in the Schematic dashboard has reference code for each drop-in in shadcn/ui, Tailwind, and plain CSS, plus a prompt for your coding agent.

## The recipe pattern

```tsx
import { useInvoices } from "@schematichq/schematic-react";
import { deriveInvoiceList } from "@schematichq/schematic-components/elements";

export function InvoiceHistory() {
  const { data, error, isPending, refetch, loadMore } = useInvoices();    // 1. read
  if (data === undefined) {
    return error ? <button onClick={refetch}>Retry</button> : <p>Loading…</p>;
  }

  const list = deriveInvoiceList(data, { locale: "en-US" });             // 2. derive

  return (                                                                 // 3. render
    <ul>
      {list.rows.map((row) => (
        <li key={row.id}>
          {row.dateText} {row.isCredit ? `(${row.amountText})` : row.amountText}
        </li>
      ))}
      {list.hasMore && <button disabled={isPending} onClick={loadMore}>Load more</button>}
    </ul>
  );
}
```

Every derivation returns structured parts with the raw value beside the formatted text, not assembled sentences, so your wording and your translation stay in your code.

## Mixing with drop-ins

The hooks and the drop-ins share one provider and one cache, so a page can use both. A custom Plan Manager can open the drop-in `<Checkout/>` through `useCheckoutLauncher().open()`, the same dialog the drop-ins use. A page that shows Included Features and Metered Features beside your own usage chart still makes one request for feature usage.

#### [Session and access tokens](/components/build-your-own/session)

Minting tokens, the session identity, refresh, and server rendering.

#### [Hooks reference](/components/build-your-own/hooks)

Every hook, its signature, and what its data means.

#### [Derivations and formatting](/components/build-your-own/derivations)

The pure functions and the Intl helpers.

#### [Checkout API](/components/build-your-own/checkout-api)

The persisted checkout behind useCheckout and the drop-in.

#### [Recipes](/components/build-your-own/recipes)

Complete components for a customer portal, a credit wallet, cancellation, and a pricing page.