> ## Documentation Index
> Fetch the complete documentation index at: https://coconut-grid.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Visualforce Components

Embed Coconut Grid in Visualforce pages using Visualforce components.

## Components

The following Visualforce components are available.

| Component Label   | Component Name | Attributes                  |
| ----------------- | -------------- | --------------------------- |
| Coconut Grid      | `CG_App`       |                             |
| Coconut Grid Item | `CG_Item`      | `itemId`, `tabId`, `height` |

## Coconut Grid

Use the Coconut Grid component to embed the full Coconut Grid app experience in a Visualforce page.

```xml theme={null}
<CoconutGrid:CG_App />
```

## Coconut Grid Item

Use the Coconut Grid Item component to embed a specific Item in a Visualforce page.

* `itemId` – Specify the Item record ID
* `tabId` – Specify the Tab record ID
* `height` – Set the component height in px or CSS units

```xml theme={null}
<CoconutGrid:CG_Item itemId="{!CoconutGrid__CG_Item__c.Id}" height="100%" />
```

```xml theme={null}
<CoconutGrid:CG_Item itemId="{!CoconutGrid__CG_Tab__c.CoconutGrid__CG_Item__c}" tabId="{!CoconutGrid__CG_Tab__c.Id}" height="600px" />
```