---
schema_version: "1"
id: 3fec57e187f08bcfd62be1d15c084cc7b2db33dbcffa23d2f086c30afefbaeca
title: Defining Custom Components
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/platform/salesforce-pages-developers-guide/guides/pages/comp-cust/pages-comp-cust-creating.md
canonical_url: https://developer.salesforce.com/docs/platform/salesforce-pages-developers-guide/guide/pages-comp-cust-creating.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 32c07173b20d055b80b64ab395e26fab376c9930302e420aa713c575c9e65865
products:
  - Visualforce Developer Guide
  - Platform Developer Content
---

# Defining Custom Components

To define a custom component for use in a Visualforce page:

1.  In Salesforce from Setup, enter `Components` in the `Quick Find` box, then select **Visualforce Components**.

2.  Click **New**.

3.  In the `Label` text box, enter the text that should be used to identify the custom component in Setup tools.

4.  In the `Name` text box, enter the text that should identify this custom component in Visualforce markup. This name can contain only underscores and alphanumeric characters, and must be unique in your org. It must begin with a letter, not include spaces, not end with an underscore, and not contain two consecutive underscores.

5.  In the `Description` text box, enter a text description of the custom component. This description appears in the component reference with other standard component descriptions as soon as you click **Save**.

6.  In the `Body` text box, enter Visualforce markup for the custom component definition. A single component can hold up to 1 MB of text, or approximately 1,000,000 characters.

7.  Click **Version Settings** to specify the version of Visualforce and the API used with this component. You can also specify versions for any managed packages installed in your organization.

8.  Click **Save** to save your changes and view the custom component’s detail screen, or click **Quick Save** to save your changes and continue editing your component. Your Visualforce markup must be valid before you can save your component.


## Next Steps

**note:** You can also create a custom component in [Visualforce development mode](https://developer.salesforce.com/docs/platform/salesforce-pages-developers-guide/tools/pages-tools-intro.md#tools-for-visualforce-development) by adding a reference to a custom component that does not yet exist to Visualforce page markup. After saving the markup, a quick fix link appears that allows you to create a new component definition (including any specified attributes) based on the name that you provided for the component.

For example, if you haven’t yet defined a custom component named `myNewComponent` and insert `<c:myNewComponent myNewAttribute="foo"/>` into existing page markup, after clicking **Save** a quick fix allows you to define a new custom component named `myNewComponent` with the following default definition:

```visualforce
<apex:component>
  <apex:attribute name="myattribute" type="String" description="TODO: Describe me"/>
  <!-- Begin Default Content REMOVE THIS -->
  <h1>Congratulations</h1>
  This is your new Component: mynewcomponent
  <!-- End Default Content REMOVE THIS -->
</apex:component>
```

You can modify this definition from Setup by entering `Components` in the `Quick Find` box, then selecting **Visualforce Components**, and then clicking **Edit** next to the myNewComponent custom component.

Once your component has been created, you can view it at http://_yourSalesforceOrgURL_/apexcomponent/_nameOfNewComponent_, where _yourSalesforceOrgURL_ is the URL used to access your Salesforce org (for example, _MyDomain_login_URL_) and the value of _nameOfNewComponent_ is the value of the `Name` field on the custom component definition.

The component is displayed as if it’s a Visualforce page. Consequently, if your component relies on attributes or on the content of the component tag’s body, this URL may generate results that you don’t expect. To more accurately test a custom component, add it to a Visualforce page and then view the page.