> 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

# Standalone Components

> Embed pricing on a public marketing page using a publishable key instead of a company scoped access token.

In addition to the Customer Portal and checkout flow, Schematic provides a standalone components that can be used through your application and other web applications.

The first standalone component we offer is a [Pricing Table](/components/pricing-table).

## Built for public facing pages

Standalone components are designed for use on your marketing site or other public-facing pages and thus load much more quickly than the Customer Portal. They load your configured plans, not customer specific data, so they operate in a much lower security context. Because of this, they only require a Schematic public key (the same one used by the React or Javascript SDK), instead of a temporary access token.

Additionally, standalone components are not configured through the Schematic component builder, but via code where they are used. This requires much less data from Schematic and supports a much more performant experience.

## Example

An example of a standalone component in use is the Pricing Table component from the [Schematic Weather Demo App](https://github.com/SchematicHQ/schematic-next-example)

![Standalone Pricing Table](/_fern-img/4e9618e43da60dab60162f2a21dac987164c505ab5ae87e90c2f477885237640.webp)

A sample of the Pricing Table component in use is below:

```tsx
import { EmbedProvider, PricingTable } from "@schematichq/schematic-components";

export default function Pricing() {
  const apiKey = process.env.NEXT_PUBLIC_SCHEMATIC_PUBLISHABLE_KEY;

  return (
    <EmbedProvider
      apiKey={apiKey}
      settings={{
        theme: {
          numberOfColumns: 2,
          sectionLayout: "merged",
          ...
        },
      }}
    >
      <h1 className="text-2xl font-bold mb-4">Pricing</h1>
      <PricingTable />
    </EmbedProvider>
  );
}
```

Details of the styling options available for the Pricing Table are available on the [Pricing Table](/components/pricing-table) page.