AEM new Component doesn't available to use on the Component list

Question

I've followed the AEM Custom Component tutorial to create a new component but after deploying the code the new component is not available on the left pallet. The name of my new component is Spacer and inherit from Separator. Also, on the template editor, I can't see the new component as well.

Steps

File structure: ui.apps/src/main/content/jcr_root/apps/my_project/components/spacer

spacer/.content.xml

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
          jcr:primaryType="cq:Component"
          jcr:title="Spacer"
          jcr:description="Able to define a Spacer with pixels choice."
          sling:resourceSuperType="core/wcm/components/separator/v1/separator"
          componentGroup="My Project - Content"/>

spacer/spacer.html

<div data-sly-use.placeholderTemplate="core/wcm/components/commons/v1/templates.html">
</div>
<sly data-sly-call="${placeholderTemplate.placeholder @ isEmpty=true}"></sly>

spacer/_cq_dialog/.content.xml

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:granite="http://www.adobe.com/jcr/granite/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
          jcr:primaryType="nt:unstructured"
          jcr:title="Spacer"
          sling:resourceType="cq/gui/components/authoring/dialog">
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
        <items jcr:primaryType="nt:unstructured">
            <column
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/container">
                <items jcr:primaryType="nt:unstructured">
                    <text
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                        fieldLabel="Text"
                        name="./text"/>
                </items>
            </column>
        </items>
    </content>
</jcr:root>

Installed with: mvn clean install -PautoInstallSinglePackage Result: BUILD SUCCESS

Component appearing on CRX:

Component not appearing on Site Edit pallet:

Answer 1

SOLVED

I had to enable the new component on the Template Layout policies.