Getting started

Welcome to the Atlassian User Interface library. It consists of JavaScript, CSS and images compliant with Atlassian Design Guidelines. The main dependency of this library is jQuery (version 2 and above) - you have to install it independently.

To get started with AUI, there are a few steps:

  1. Choose a deployment option,
  2. Include the AUI resources on your page, and
  3. Start using AUI's components.

Choose a deployment option

Depending on the version of AUI, there will be a number of options for how you can consume the AUI library.

Here are a few of the options available to you:

  1. Use the Node package
  2. Use the Atlassian Plugin
  3. Download the static files
  4. Other options

Using AUI through Node.js

The AUI library is published on npmjs.com. You can consult the package's README file for consumption options through Node.

Using AUI through the Atlassian Plugin

AUI is shipped in most Atlassian Server products as an Atlassian Plugin. Including AUI resources on a page is a matter of requiring the appropriate web-resource key. The AUI documentation lists these keys for each component. You may also want to read Atlassian's getting started guide for writing plugins.

Downloading static files

  1. The zip file contains both core/stable components from AUI, plus some components with experimental APIs (in separate resources).

    Download this zip.

  2. Link the files:

    • <link rel="stylesheet" href="aui/aui-prototyping.css" media="all"> - in the head of your HTML document
    • <script src="aui/aui-prototyping.js"></script> - at the end of the body of your HTML document but after the script tag loading the proper version of jQuery (2 and above)

  3. Make sure the paths point to the location of your copy and update them if not.

Other options

Some versions of AUI are available via CDN. You can check the AUI CDN website for the versions Atlassian hosts, and instructions on consuming them.

Start coding!

Once you've included AUI in to your project, check out AUI's documentation to learn about how to use the AUI components.

If you have any questions or run in to troubles using AUI, ask a question in our developer community.

Happy coding!