---
schema_version: "1"
id: e509c2a572fef546a4ce223aa6117a1f9c23bc1629e4b874b0f8906c621cfc3f
title: Defining Visualforce Custom Components
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/platform/264-0-0/pages_custom_components_create.md
canonical_url: https://help.salesforce.com/s/articleView?id=platform.pages_custom_components_create.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: ebc5f64f064696d5151662d166a2dacbcf0ce74908902acd7c790b5c1d39e17e
description: Visualforce components are small, reusable pieces of functionality—think widgets, panels, user interface elements, that kind of thing—that you use in Visualforce page markup. You can use standard Visualforce components, and create your own custom components.
products:
  - Salesforce Platform
release: "264"
---
# Defining Visualforce Custom Components

Visualforce components are small, reusable pieces of functionality—think widgets, panels, user interface elements, that kind of thing—that you use in Visualforce page markup. You can use standard Visualforce components, and create your own custom components.

### Required Editions

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small edition"><colgroup><col></colgroup><tbody><tr class=""><td class="slds-cell-wrap" style="vertical-align:top;">Available in: Salesforce Classic and Lightning Experience</td></tr><tr class=""><td class="slds-cell-wrap" style="vertical-align:top;">Available in: <strong>Contact Manager</strong>, <strong>Group</strong>, <strong>Professional</strong>, <strong>Enterprise</strong>, <strong>Performance</strong>, <strong>Unlimited</strong>, and <strong>Developer</strong> Editions</td></tr></tbody></table>

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small permission">
        <colgroup>
          <col style="width:50%">
          <col style="width:50%">
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="colgroup" class="slds-cell-wrap" colspan="2" style="text-align:center;vertical-align:top;" id="d41597e82">User Permissions
              Needed</th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="User Permissions Needed" class="slds-cell-wrap" style="vertical-align:top;" headers="d41597e82 ">To create custom components:</td>

            <td class="slds-cell-wrap" style="vertical-align:top;" headers="d41597e82 ">Customize Application</td>

          </tr>
        </tbody>
      </table>

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.

![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-platform-extend_code-264-0-0-production-enus/789bc523-706b-4ae4-8fe9-be6322e38b6b/images/icon_note.png)

Note You can also create a custom component in Visualforce development mode by adding a reference to a custom component that doesn’t 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:

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

#### See Also

- [Visualforce Components](https://help.salesforce.com/s/articleView?id=platform.pages_custom_components.htm&release=264.0.0&type=5 "Visualforce components are small, reusable pieces of functionality—think widgets, panels, user interface elements, that kind of thing—that you use in Visualforce page markup. You can use standard Visualforce components, and create your own custom components.")