> ## 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.

# Lightning Web Components

Embed Coconut Grid directly in Lightning pages using Lightning Web Components.

## Components

The following Lightning Web Components are available.

| Component | Description |
| - | - |
| Coconut Grid Item | Displays a specified item's layout and tabs inside a Lightning page |
| Coconut Grid Item View | Displays the current Coconut Grid Item record on its record page |

## Coconut Grid Item

Use the Coconut Grid Item component to display an item's layout and tabs inside Lightning pages such as Record Page, Home Page, or App Page.

**1. Add Component to Page**

Open the Lightning App Builder and add the Coconut Grid Item component.

* Drag the component onto the page
* Place it in the desired section

**2. Configure Properties**

Set the component properties.

| Field | Description |
| - | - |
| **Item ID** (`itemId`) | Required. Specify the Salesforce record ID of the item to display |
| **Tab ID** (`tabId`) | Optional. Specify the Salesforce record ID of the initial tab within that item. If omitted, the first tab is selected |
| **Height** (`height`) | Optional. Defaults to `600px`. Enter a number such as `600` for pixels, or a CSS value such as `600px` or `100%` |

Use record IDs, not item or tab keys. **Tab ID** selects an initial tab without hiding the item's other tabs or layout areas. Percentage heights require a containing region with a defined height.

**3. Save and Activate**

Save the page and activate it.

The item is displayed inline within the Lightning page.

## Coconut Grid Item View

Use **Coconut Grid Item View** on a Coconut Grid Item record page to display the current item automatically. This component is available for desktop record pages of the Coconut Grid Item object.

| Field | Description |
| - | - |
| **Tab ID** (`tabId`) | Optional. Specify the Salesforce record ID of the initial tab within the current item. If omitted, the first tab is selected |
| **Height** (`height`) | Optional. Defaults to `100%` of the containing region. Use an explicit height such as `600px` if the region does not have a defined height |

Salesforce supplies the current item's `recordId`; there is no **Item ID** property to configure for this component.

For embedding in a custom Visualforce page, see [Visualforce Components](https://coconut-grid.mintlify.site/configuration/visualforce-components.md). To open an item using a URL, see [Visualforce Pages](https://coconut-grid.mintlify.site/configuration/visualforce-pages.md).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.