Developer Onboarding

This guide provides an overview for creating a new application using DLS v7. If you are upgrading an existing application from DLS v6, refer to the developer migration guide.

To get started with using the Design System, you will want to start by installing our React components. These components require our dls-core stylesheet to be included in your application. Optionally, you can use our React icons to enhance your application. You can find steps for each of these below.

1. Install and Use React Components

We publish an npm package called @americanexpress/dls-react as a React implementation of the DLS styles. This should be installed into your application as a dependency. To install the package, run the following command in your terminal:

Tip: For information about setting up your development environment for web projects, see the guide for configuring a web development environment on the Amex Way.

See the component documentation for a complete list of available components and their props.

2. Add the DLS Stylesheet

The dls-core stylesheet should be included in your application to ensure that your application has the proper grid, spacing, color, and support for dark mode and surfaces. The stylesheet URL is https://www.aexp-static.com/cdaas/dls/packages/@americanexpress/dls/<version>/stylesheets/dls-core.min.css, where <version> is the DLS v7 version (note that min indicates that the CSS file is minified).

If using One App or React, you should use React Helmet to include the dls-core stylesheet in your application.

If not using One App or React, you can alternatively include in the <head> of the application:

<link
  rel="stylesheet"
  href="https://www.aexp-static.com/cdaas/dls/packages/@americanexpress/dls/7.12.0/stylesheets/dls-core.min.css"
/>

For more information about the contents of the stylesheets and advanced usage, see the Stylesheets documentation page.

3. Install and Use React Icons

@americanexpress/dls-icons is a React implementation of the DLS icons. In DLS v6, DLS icons were included as part of the @americanexpress/dls-react package. However in DLS v7, DLS icons are only available through the @americanexpress/dls-icons package. If you need to use DLS icons in your application, this should be installed into your application as a dependency:

Questions?

Connect with the DLS Team on Slack or by email.

Resources

Check out additional resources.