Atlaskit

Atlaskit is a collection of reusable packages designed for Atlassian products and experiences. It includes the Atlassian Design System, Atlassian Editor, Atlassian Media, and other packages.

Our public packages are available under the @atlaskit scope on npm. View the source of all public @atlaskit packages in the Atlassian Frontend mirror repository. This mirror is used because Atlaskit is part of the larger Atlassian Frontend internal repository, which is private.

Installation

Packages are available as individual npm packages. This allows you to use packages as needed, without needing to install everything. However, some prerequisites are required to ensure components behave as expected.

Prerequisites

Peer dependencies

Packages in this repository can have peer dependencies. When installing a package make sure to have these installed first:

# With npm
npm i react@^18.2.0 react-dom@^18.2.0 @compiled/react

# With yarn
yarn add react@^18.2.0 react-dom@^18.2.0 @compiled/react

Packages related to Editor and Media can also have a peer dependency on react-intl. If using an Editor or Media package, make sure to install this peer dependency:

# With npm
npm i react-intl-next@npm:react-intl@^5.18.1

# With yarn
yarn add react-intl-next@npm:react-intl@^5.18.1

Since these are all peer dependencies, they need to be on the specified major version. Undefined behavior may occur when using these peer dependencies on different major versions.

CSS reset

Some packages need this reset to ensure styles render consistently, as undefined behavior can happen without it:

npm i @atlaskit/css-reset

For setup instructions, view the CSS reset documentation.

Design system styles and tooling

The Atlassian Design System includes styles, tokens, components, and tooling required to use certain Atlaskit components and keep them up to date.

View Atlassian Design System setup guide.

Typescript

Atlaskit packages are written in Typescript and ship with Typescript declaration (d.ts) files for typechecking your applications. The minimum typescript version we support is the version we currently use in our repo, which we upgrade on a quarterly cadence.

You can check the version a particular package supports by searching its changelog for the last typescript upgrade release, or by checking the typescript version in the devDependencies of the package (this was added to packages ~ October 2020).

If you are on an older version of Typescript than our packages support, you may encounter issues. We suggest upgrading your version of Typescript where possible. Where not possible, you can use a paths mapping to map @atlaskit paths to an empty declaration file to ignore typechecking for those packages.

Documentation

Usage

Install packages you’re interested in using, for example, a button:

npm i @atlaskit/button

import Button from '@atlaskit/button';

<Button>Hello world</Button>;

Contributing

Currently, Atlassian Frontend is only accepting contributions from Atlassian employees. If you are an Atlassian employee you can find information about this on our internal docs.

Support

For developers outside of Atlassian looking for help, or to report issues, please make a post on the community forum. These forums are monitored and posts will be directed to the appropriate maintainers.

We offer internal support for components that are part of the Atlassian Design System (which corresponds to the /design-system folder in the repository). Please note that the level of support varies for all Atlaskit packages. Some are primarily for internal use, without official support.