Installation

The quickest way to get the UCLA Design System into your project is using the CDN-hosted assets.

CSS

Copy and paste this in the <head> of your document before any other stylesheet


<link rel="stylesheet" crossorigin="anonymous" integrity="sha384-7z8GtQQqD643UxDwtw6TVet71zX6Wy3TlbaywyN0R9rAieizBL/U7izM/0e6A5w+" href="https://cdn.designsystem.brand.ucla.edu/build/v2.2.0/css/ucla-lib.min.css" />

JavaScript

Copy and paste this before the closing </body> tag. Please refer to our JavaScript Documentation for more details.


<script type="text/javascript" crossorigin="anonymous" integrity="sha384-6Hr6ZPF+9K/qQdFqn+4F6x1xK/QGid7xSQOLZk45ygPOcd32Wv4IWlayZ+Ywhv5f" src="https://cdn.designsystem.brand.ucla.edu/build/v2.2.0/js/ucla-lib-scripts.min.js" />

Package Managers

Make your you have the latest Node.js installed and your current working directory is where you want to install the UCLA Design System. Run the following command in your command line:

Install with npm

npm install ucla-design-systems

Install with yarn

yarn add ucla-design-systems

Download source

If you would like to host the assets yourself, you can download the compiled version here.

Download