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.
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).
Build apps for Atlassian products with Forge
Forge is a serverless development environment that takes care of security, compute, and storage. It helps you build apps for Atlassian products, including for the Atlassian Marketplace.
Forge UI Kit is a native component library that offers most primitives and components from Atlassian Design System and Atlaskit.
Start building UI with Forge.
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.
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.
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.
How to contact us.
Was this page helpful?
We use this feedback to improve our documentation.