The full power of One DLS has come to React

The One DLS team has released its implementation of the American Express Design Language System for React. Over the past year, we saw a clear need for a React library that provided feature parity with axp-dls. Existing alternatives like axp-base were community driven and could therefore not always keep up with new additions and improvements being added to axp-dls. In addition, there were features being introduced that were not in the DLS. dls-react changes all that, with the One DLS team maintaining both implementations centrally and providing support to teams across the enterprise.

Our goal with dls-react was to create a consistent, composable API with an accessibility-first mindset. This allows us to align our library with the declarative nature of React instead of the configuration based approach of axp-base. Using style objects with emotion, we are able to directly leverage the CSS from axp-dls, further facilitating consistency between the two libraries, as well as removing the need to load any DLS style sheets on the page. In addition, we are providing documentation on dls-react that allows live coding to better explore how these components can work for you. Just click the ‘view code’ link below each example.

We are tirelessly working to achieve feature parity, which will be available with v1.0.0 of the library. We’re looking to the community to help us reach this goal faster by contributing components. When considering a component for contribution, please consult the prioritization confluence page and ensure the style and API are written consistently with existing dls-react components.

To get started using dls-react or for more information on how to migrate from axp-base to dls-react, check out our README.