> 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

# Create a Component

> Configure your catalog, build a customer portal in the Component Builder, and publish it for embedding.

Before embedding a component in your application, you'll create and configure it in Schematic. This covers both setting up your catalog (so the component has the right plans and pricing to display) and building the component itself.

## Configuring the Catalog

1. Navigate to **Products > Configuration**
2. Choose a default plan that all companies will be assigned if there is no formal subscription (optional)
3. Choose "live plans" (those that your end users can choose to downgrade from or upgrade to)
4. Save changes

> **Info**
>
> Plans must be associated with Stripe Products to be added to Live Plans. If you don't use Stripe, skip this section.

![](/_fern-img/d8dbffd142bf64897d59a22117da962a8c73b8a1c936bcc8ce03abcf835eb31e.webp)

## Creating a New UI Component

Once you've configured your Catalog, Components will be populated with your data rather than sample data (if you skip to this section, you can simply use the sample data).

1. Navigate to **Components** in the navigation bar
2. Click **New Component** and choose "Customer Portal" as an example
3. Click into the new Component you created and you should see a rendered Customer Portal in the Schematic Component Builder
4. Press **Save & Publish** and follow the [steps to drop into your application](/components/set-up)

![](/_fern-img/7408ae43f41fe493907e70913e719a03d9423b735e64845a4085fb1d5ddbd2f1.webp)

Components are fully customizable both in the elements they are made up of (e.g. Current Plan, Included Features, Invoices, etc.) and in how they look and feel (so it appears native to your product).

Additionally, you may preview as any company in your account using the dropdown at the top of the builder.

![](/_fern-img/418387c413f10061c9d60f5820afdcdaa4461c89b449a9e845c313d89fa30bf1.webp)