> For the complete documentation index, see [llms.txt](https://docs.peakcommerce.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.peakcommerce.com/product/using-peakcommerce/templates/creating-a-component.md).
# Creating a Component
When the system components don't cover a layout you need — a bespoke pricing block, a branded banner, a portal widget specific to your business — you create your own. User components become first-class blocks in the page editor, so a layout you build once can be reused across pages and portals. Create them in **Content → Component Library**.
The component editor — fields on the left, a live preview in the center, and the selected field's properties on the right.
## Two ways to start
* **New Component** — build a component from scratch in the component editor.
* [**Create with Mango**](/product/getting-started/meet-mango.md) — describe what you want in plain language and have PeakCommerce generate a working component for you, which you can then refine.
## The component editor
The editor is a three-pane workspace:
* **Left rail** — switch between **Insert** (drop in ready-made snippets), **Fields** (define the editable properties authors will see), and **Chat** (ask Mango to generate or change the component).
* **Center canvas** — toggle between a live **Preview** (rendered at desktop, tablet, or mobile widths) and the **Code** view for direct editing.
* **Right inspector** — **Props** for the selected field or the whole component, and **Data** for binding the component to live commerce data.
When you ask Mango for a change, it proposes an edit you can accept, reject, or refine; accepting it updates the code, fields, and preview together.
## Settings to set
* **Category** — how it's grouped in the library.
* **Contexts** — which editors and page types it can be used in (Storefront, Checkout, Customer Portal, Partner Portal, CSR Portal, or Payment Pages). Choose every context where the component should be available.
* **Status** — set it **Active** to make it available in the page editor.
## Things to watch
* **Set the right contexts.** A component only appears in editors whose context you selected — if it's missing from a page, its contexts are the first thing to check.
* **Active is what makes it usable.** A saved-but-inactive component won't show up as a block until you activate it.
* **Define fields for anything authors should edit.** Values you don't expose as fields are baked into the component and can only be changed back in the editor.
Once active, the component appears in the [Component Library](/product/using-peakcommerce/templates.md) and can be placed on any [page](/product/using-peakcommerce/ecommerce-and-payment-pages/adding-an-e-commerce-page.md) whose context matches.
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://docs.peakcommerce.com/product/using-peakcommerce/templates/creating-a-component.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.