# How to use pixel-perfect components

*how to use (lists, standalone, cells), how to use marketplace, how to modify, how to start from scratch.*\
*change all arcades*\
\
There are three options for how you can apply **Custom Components**:

### **1. Cards in List components** (Gallery, Kanban, Map, Calendar, Timeline)

To apply Custom Cards in the List, follow the steps:

1. Click on the **Gallery**
2. Click on the **Property card** button in the right panel
3. From the dropdown menu, choose **Use Marketplace Component**

{% @arcade/embed flowId="JYKsK1BdIV7d9k0M7zBl" url="<https://app.arcade.software/share/JYKsK1BdIV7d9k0M7zBl>" %}

### **2. Standalone components** (Profile headers, documents, summary, banners)

1. Click on the **Gallery**
2. Click on the **Property card** button in the right panel
3. From the dropdown menu, choose **Use Marketplace Component**
4. Choose **Standalone**

{% @arcade/embed flowId="AMWkAbZ3VheaJcDtRedX" url="<https://app.arcade.software/share/AMWkAbZ3VheaJcDtRedX>" %}

### **3. Record fields** (health, metrics, user/product)

1. Click on the **Gallery**
2. Click on the **Property card** button in the right panel
3. From the dropdown menu, choose **Use Marketplace Component**
4. Choose **Record fields**

{% @arcade/embed flowId="kSyE0e2qEx0iztHxjBAt" url="<https://app.arcade.software/share/kSyE0e2qEx0iztHxjBAt>" %}

### **4. Menu items**

1. Navigate to the menu settings
2. Add a new item to the menu
3. Select **Custom component**

{% @arcade/embed flowId="WHhdwGlrCI3Ew9ZmyBan" url="<https://app.arcade.software/share/WHhdwGlrCI3Ew9ZmyBan>" %}


---

# Agent Instructions: 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:

```
GET https://docs.jetadmin.io/component-designer/how-to-use-pixel-perfect-components.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.