---
title: "Custom component definition file"
date: "2022-06-20T09:39:59+00:00"
summary: "Learn how to create custom component definition files for Site Studio. Discover required properties, optional elements, and see example structures to enhance your web development workflow."
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/custom-component-definition-file"
id: "d2775435-87e7-474d-8260-a6f191821b88"
---

Each custom component definition file **must** have the following properties:

*   [name (required)](/drupal-starter-kits/add-ons/site-studio/custom-component-definition-reference#custom-component-name "Custom component definition reference")
*   [category (required)](/drupal-starter-kits/add-ons/site-studio/custom-component-definition-reference#custom-component-category "Custom component definition reference")

Each custom component definition file can also have the following, optional, properties:

*   [preview image](/drupal-starter-kits/add-ons/site-studio/custom-component-definition-reference#custom-component-preview "Custom component definition reference")
*   [availability](https://sitestudiodocs.acquia.com/6.9/node/3046#custom-component-availability)
*   [template](/drupal-starter-kits/add-ons/site-studio/custom-component-definition-reference#custom-component-template "Custom component definition reference")
*   [html](/drupal-starter-kits/add-ons/site-studio/custom-component-definition-reference#custom-component-html "Custom component definition reference")
*   [form](https://sitestudiodocs.acquia.com/6.9/node/3046#custom-component-form)
*   [js](https://sitestudiodocs.acquia.com/6.9/node/3046#custom-component-js)
*   [css](https://sitestudiodocs.acquia.com/6.9/node/3046#custom-component-css)
*   [dependencies](https://sitestudiodocs.acquia.com/6.9/node/3046#custom-component-dependencies)

Example structure 1:

    name: Custom component JS with template
    category: cpt_cat_hero_components
    js:
      js-template.js: {}
      https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js: { type: external, minified: true, attributes: { defer: true, async: true } }
    css:
      js-template.css: {}
    form: form.json
    html: html-template.html
    preview_image: preview.png

  
Example structure 2:

    name: Twig custom component
    category: cpt_cat_example
    template: template.html.twig
    availability:
      -
        type: node
        bundles:
          - article
          - layout_page
    form: form.json
    css:
      twig-component.css: {}
    preview_image: preview.png