Get Your Aura Components Ready to Use on Lightning Pages | Lightning Aura Components Developer Guide

Custom Aura components don’t work on Lightning pages or in the Lightning App Builder right out of the box. To use a custom component in either of these places, configure the component and its component bundle so that they’re compatible.

Configure Components for Lightning Pages and the Lightning App Builder
There are a few steps to take before you can use your custom Aura components in either Lightning pages or the Lightning App Builder.
Configure Components for Lightning Experience Record Pages
After your component is set up to work on Lightning pages and in the Lightning App Builder, use these guidelines to configure the component so it works on record pages in Lightning Experience.
Create Components for the Outlook and Gmail Integrations
Create custom Aura components that are available to add to the email application pane for the Outlook and Gmail integrations.
Create Components for Forecast Pages
Create custom Aura components that are available to add to Lightning forecasts pages.
Create Dynamic Picklists for Your Custom Components
You can expose a component property as a picklist when the component is configured in the Lightning App Builder. The picklist’s values are provided by an Apex class that you create.
Create a Custom Lightning Page Template Component
Every standard Lightning page is associated with a default template component, which defines the page’s regions and what components the page includes. Custom Lightning page template components let you create page templates to fit your business needs with the structure and components that you define. Once implemented, your custom template is available in the Lightning App Builder’s new page wizard for your page creators to use.
Lightning Page Template Component Best Practices
Keep these best practices and limitations in mind when creating Lightning page template components.
Make Your Lightning Page Components Width-Aware with lightning:flexipageRegionInfo
When you add a component to a region on a page in the Lightning App Builder, the lightning:flexipageRegionInfo sub-component passes the width of that region to its parent component. With lightning:flexipageRegionInfo and some strategic CSS, you can tell the parent component to render in different ways in different regions at runtime.
Tips and Considerations for Configuring Components for Lightning Pages and the Lightning App Builder
Keep these guidelines in mind when creating components and component bundles for Lightning pages and the Lightning App Builder.