Abode React Spectrum

[joe_17382226]

Hi all,

My goal is to create a tool in AEM, but I want the layout/design to be identical to what Adobe is using in Cloud Manager, so is there a method to include the Adobe React Spectrum library into AEM project?

Currently using coral layout, but it is old and outdated.

Thanks.

[krishna_sai]

Hi @joe_17382226 , you can refer to below links on how we can create an aem project with react and on how you can use react spectrum in it.

https://www.embitel.com/ecommerce-insights/building-a-project-in-aem-6-5-with-react-integration
https://react-spectrum.adobe.com/react-spectrum/getting-started.html

Hope this helps,

Krishna

[joe_17382226 · Accepted solution]

I found the solution myself.

As per my needs and if anyone else is interested in using Spectrum Layout in AEM instead of the CoralUI3, it happens that Adobe calls the library of Spectrum in AEM as Coral Spectrum.

Here are some documentation links:

• Just an overview of the Spectrum design system: Spectrum, Adobe’s design system - Spectrum
• Another overview Manual | Coral Spectrum (adobe.com)
• The goo part:
  • Components: Spectrum Web Components (adobe.com)
  • If you just want to use the styling without any JS for Web components: Spectrum CSS (adobe.com)
  • The libraries can be found in the CRX under: /libs/clientlibs/granite/coralspectrum