---
title: "Add Javascript and CSS libraries"
date: "2022-06-20T11:30:37+00:00"
summary: "Learn how to enhance your custom Drupal components with JavaScript and CSS libraries. Follow our guide to easily attach files and manage dependencies for improved functionality and styling."
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/add-javascript-and-css-libraries"
id: "67ab0cc1-41c6-4f04-a8a5-2b756b08f721"
---

You can attach Javascript and CSS files to a custom component and also refer dependencies on other Drupal libraries. To attach such files, add a [js](/drupal-starter-kits/add-ons/site-studio/custom-component-definition-reference#custom-component-js "Custom component definition reference"), [css](/drupal-starter-kits/add-ons/site-studio/custom-component-definition-reference#custom-component-css "Custom component definition reference") or [dependencies](/drupal-starter-kits/add-ons/site-studio/custom-component-definition-reference#custom-component-dependencies "Custom component definition reference") to the custom component YAML definition.

    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:
      example_stylesheet.css: {}
      https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css: { type: external, minified: true }
    

These properties follow the same format as Drupal libraries. In fact Site studio will create a Drupal library for each custom component. You can refer to the [Custom component definition reference page](/drupal-starter-kits/add-ons/site-studio/custom-component-definition-reference "Custom component definition reference") and Drupal documentation [https://www.drupal.org/docs/creating-custom-modules/adding-assets-css-js-to-a-drupal-module-via-librariesyml](https://www.drupal.org/docs/creating-custom-modules/adding-assets-css-js-to-a-drupal-module-via-librariesyml) for more information.

**Note that the \`css\` properties for custom components do not need a style type key (base, component, state, theme) as all css for custom components will be placed at the \`component\` level.**