‎‎Develop

Set up your environment to use Atlassian Design System components, design tokens, and tools.

Atlassian Design System is a collection of UI components, foundations, and standards that help teams build beautiful product experiences.

This page lists how to use Atlassian's design system components and developer tools.

An image showing the Atlassian Design System logo on a dark background with a star-like grid in the background, with a set of concentric hexagons containing iconographic representations of Atlassian Design System's foundations: colors, icons, typography, border radius, sizing, and layout.

Before you begin

The Atlassian Design System is implemented with React 16 and TypeScript. Make sure you have React and optionally TypeScript installed before you start.

You’ll also need a package manager like NPM. We use yarn in our examples:

yarn add react@16.8 react-dom@16.8 typescript@4.5

Atlassian Design System packages are available on npm under the @atlaskit scope, along with other Atlassian platform components.

You can view source code for our public packages in Bitbucket (Atlassians can view these in the private Atlassian Frontend repository).

Set up your style environment

1. Copy the following into your terminal to install our dependencies: CSS reset, design tokens, and ESLint plugin.

yarn add @atlaskit/css-reset @atlaskit/tokens

2. Import these stylesheets at the root of your application. These are required for our components to work as expected in light and dark mode (coming soon).

import '@atlaskit/css-reset';

We’re rolling out design tokens across Atlassian

With design tokens, your style choices align with system-level design decisions. Implementing tokens makes things like dark mode possible and scalable across Atlassian.

Learn more about design tokens

Set up your tooling environment

Turn on the ESLint plugin to see in-context help in your IDE. This includes accessibility pointers, deprecation notices, and other helpful tips.

Atlassians are required to use the latest version of ESLint, and we strongly recommend it for anyone using design system packages.

First, add our ESlint plugin:

yarn add --dev @atlaskit/eslint-plugin-design-system

Second, add our plugin to your ESlint config. For example, your .eslintrc.js file may look like this:

module.exports = {
  plugins: [
    '@atlaskit/design-system',
  ],
  extends: [
    'plugin:@atlaskit/design-system/recommended',
  ],
};

More about ESlint configuration.

If you’re using CSS modules, we recommend installing the Stylelint plugin too.

Use a component

Now you’re ready to install and use components. For example, here’s a button:

yarn add @atlaskit/button
import Button from '@atlaskit/button';

const App = () => <Button>Hello world</Button>;

To see if your setup matches ours, view this Codesandbox of a working button with everything installed.

Now you should be ready to install and use all design system packages. See each component’s code documentation for individual package installation instructions.

Also see the design recommendations in each component (for example, button usage guidelines).

Want more components?

The Atlassian Design System has components for core Atlassian experiences like forms, navigation, and more. Check out the rest of Atlaskit for other integrated experiences such as editor and media picker. Note that Atlaskit packages come with limited support for developers outside Atlassian.

Design System components·All Atlaskit components

Get help

How to contact us.


Was this page helpful?

We use this feedback to improve our documentation.