---
schema_version: "1"
id: ea5cfeaed308d27a0dd02d8af26beb36b60c2e23da5124d332725658bfa3b12d
title: Using the Visualforce Component Library
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/platform/salesforce-pages-developers-guide/guides/pages/quick-start/pages-quick-start-component-library.md
canonical_url: https://developer.salesforce.com/docs/platform/salesforce-pages-developers-guide/guide/pages-quick-start-component-library.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: bab632959c128ea787bbc9f276c7b59f99e5ddcf1f1203f2066e63ffa2e764ac
products:
  - Visualforce Developer Guide
  - Platform Developer Content
---

# Using the Visualforce Component Library

Up to this point, the only Visualforce tag that has been used in the examples is the mandatory `<apex:page>` tag that must be placed at the start and end of all Visualforce markup. However, just as you can insert images or tables into an HTML document with the `<img>` or `<table>` tags, respectively, you can add user interface components to your Visualforce pages using tags that are defined in the Visualforce component library.

For example, to add a component that looks like a section on a detail page, use the `<apex:pageBlock>` component tag:

<!-- otherprops: apex_page set_clipboard -->
```markup
<apex:page standardController="Account">
    <apex:pageBlock title="Hello {!$User.FirstName}!"> 
            You are viewing the {!account.name} account.
    </apex:pageBlock> 
</apex:page>
```

![The Apex Page Editor, displaying apex:pageBlock in the code window and a section that says, "Hello John! You are viewing the Global Media account," in the page view](https://developer.salesforce.com/media/salesforce-pages-developers-guide/pages_quick_start_page_pageblock.png "The <apex:pageBlock> Component")

Tags also exist for other common Salesforce interface components, such as related lists, detail pages, and input fields. For example, to add the content of a detail page, use the `<apex:detail>` component tag:

<!-- otherprops: apex_page set_clipboard -->
```markup
<apex:page standardController="Account">
    <apex:pageBlock title="Hello {!$User.FirstName}!">
        You are viewing the {!account.name} account.
    </apex:pageBlock>
    <apex:detail/> 
</apex:page>
```

![The Apex Page Editor, displaying aped:detail in the code window and an account detail view in the page view](../../../../../media/salesforce-pages-developers-guide/pages_quick_start_page_detail.png "The <apex:detail> Component Without
Attributes")

Without any specified attributes on the tag, `<apex:detail>` displays the complete detail view for the context record. If you want to modify properties such as which record details are displayed, or whether related lists or the title appear, you can use attributes on the tag. For example, the following markup displays the details of the context account's owner, without related lists or a colored title bar:

<!-- otherprops: apex_page set_clipboard -->
```markup
<apex:page standardController="Account">
    <apex:pageBlock title="Hello {!$User.FirstName}!">
        You are viewing the {!account.name} account.
    </apex:pageBlock>
    <apex:detail subject="{!account.ownerId}" relatedList="false" title="false"/> 
</apex:page>
```

![The apex:detail component without Related List or Title elements](../../../../../media/salesforce-pages-developers-guide/pages_quick_start_page_detail_attribute.png "The <apex:detail> Component Without
Related List or Title Elements")

If a component is updated or edited, the Visualforce page that references it is also updated.

To browse the component library, click **Component Reference** in the Page Editor. From this page you can drill down into any component to see the attributes that are available for each, including any [custom components](https://developer.salesforce.com/docs/platform/salesforce-pages-developers-guide/comp-cust/pages-comp-cust.md) that you define.

**See Also**  


-   [Standard Visualforce Component Reference](https://developer.salesforce.com/docs/platform/salesforce-pages-developers-guide/components/pages-compref.md)