Atlaskit is the technical implementation of the Atlassian Design Guidelines. It is a collection of reusable components that can be downloaded independently into your projects. Each component is also independently versioned and published to npm.
The full list of components can be found in the Atlaskit Registry.
This project is bound by a Code of Conduct.
Atlaskit components and utilities are available as discrete npm packages.
It's strongly advised to use the Atlaskit CSS reset in your whole project, or some Atlaskit components may diverge in appearance:
In general, you should avoid directly styling base elements (ex. p, h1, h2) and uses classes instead.
Atlaskit components are built for React. Here's an example of using the Avatar component:
npm install @atlaskit/avatar
import React from 'react'; import Avatar from '@atlaskit/avatar'; export default ( <Avatar src="https://design.atlassian.com/images/avatars/project-128.png" presence="online" size="large" /> );
Check out the Atlaskit Registry to learn more.
There is a subset of components available as styles called the Reduced UI pack. To use:
<link rel="stylesheet" href="//unpkg.com/@atlaskit/css-reset@latest" /> <link rel="stylesheet" href="//unpkg.com/@atlaskit/reduced-ui-pack@latest" />
<button class="ak-button ak-button__appearance-primary">Submit</button>
Check out the Reduced UI pack for more examples and details.
When upgrading an Atlaskit component, all changelogs can be found in the Atlaskit Registry.
A comprehensive list of components and detailed usage of each can be found in the Atlaskit Registry, which contains both guides on contributing to atlaskit, as well as documentation for each package.
You can also find how each component is meant to be used from a design perspective on the Atlassian Design Guidelines website.
We believe in open contributions and the power of a strong development community. Pull requests, bug reports, and comments are welcomed!
Here are some quick tips for various contributions:
Our CONTRIBUTING.md includes links for where to raise issues to Atlaskit.
Atlassian requires contributors to sign a Contributor License Agreement, known as a CLA. This serves as a record stating that the contributor is entitled to contribute the code/documentation/translation to the project and is willing to have it used in distributions and derivative works (or is willing to transfer ownership).
Please read our CONTRIBUTING.md for details on how to become a contributor and for our guidelines around contributions.
Some quick tips for making successful contributions to Atlaskit:
This is a mono-repo, which means that different parts of this repository can have different licenses.
The base level of the repository is licensed under Apache 2.0. There are separate license files (
LICENSE) for each component under
/packages that specify the license restrictions for each component. While most components are licensed under the Apache 2.0 license, please note packages containing styles, assets & icons are most likely licensed under the Atlassian Design Guidelines license.
If you fork this repository you can continue to use those Atlassian Design Guidelines licensed components only under the given license restrictions. If you want to redistribute this repository, you will need to replace these Atlassian Design Guidelines licensed components with your own implementation.
Copyright (c) 2018 Atlassian and others.