Skip to main content

Setup

In this section, you will find an explanation of how to get ready to integrate components into your project.

Configuration​

Adding the GitHub registry to npm​

We host our components on the GitHub npm registry. As this registry is not the standard registry for npm, it requires some setup. In the same directory as your package.json file, create or edit a .npmrc file to include a line specifying the registry:

@adjust:registry=https://npm.pkg.github.com/

npm will use this registry to install packages with the @adjust prefix.

Authentication​

As the design system packages are private make sure that you're authenticated. For more information follow this guide.

If you have CI pipelines that install packages from npm, make sure that they also have access to our private packages. If you're using GitHub Actions you can follow this guide.

Installation​

Installing the component library.

npm install --save @adjust/components

Usage​

import React from 'react';
import { Button } from '@adjust/components';

export default props => (
  <Box>
    <h1>Hello</h1>
    <Button label="My first button from Atlas library" kind="primary" />
  </Box>
);
tip

Before integrating a component into your codebase play around with its configuration options in the live editor. You can find a live editor in most sections that show code.

note

We build our components in an environment that doesn't rely on any inherited styles. The only stylesheet loaded is a browser default stylesheet. If you render components in an environment that does come with styles for HTML elements (such as p { margin-bottom: 10px; }) please note that these might get inherited by components and affect the way they are displayed.

Design tokens​

The style of the components is based on a set of design constants (colors, spacing etc.) called design tokens. The design tokens are also available as an npm package to be used in your project. You can find more information about it here.

Feature requests and bugs reports​

If you find a bug, miss a feature or just interested in how you can contribute refer to our Contribution guide.