Leveraging Clay React Components

One of the challenges in building a consistent digital experience is ensuring that every button, form, and modal across your application looks and behaves the same way. Without a shared design system, UI inconsistencies creep in, accessibility can suffer, and maintenance becomes harder over time.

Liferay addresses this challenge with Clay, its native React-based component library. Clay ensures that any UI you build—whether it’s out-of-the-box or custom—is visually aligned, accessible, and optimized for a consistent user experience.

For developers, Clay is a productivity multiplier:

  • You get prebuilt components that already match Liferay’s look and feel.
  • You save time by focusing on functionality rather than reinventing UI patterns.
  • Your work blends seamlessly with Liferay’s existing UI, making custom elements feel native.

If you are building a JavaScript application for Liferay, you should leverage Clay React components whenever possible to streamline development.

Customizing Clay Components

Every application has some requirement that causes it to deviate from the default path. One of the benefits of working with Clay is that the Liferay team has taken these deviations into consideration. Clay components come with rich APIs for customization through **props**.

For example, a button can be customized:

<ClayButton
  displayType="secondary"
  onClick={handleClick}
  small
>
  View Details
</ClayButton>

Similarly, you can customize the details of an alert by configuring the component to close automatically after a certain period of time:

<ClayAlert
  displayType="success"
  title="Success:"
  autoClose={5000}
>
  Distributor added successfully!
</ClayAlert>

It’s also possible to mix Clay components with custom React components and vice versa. After all, both Clay and non-Clay elements adhere to Web Components standards. You can use custom React components as child elements of a Clay React component, or vice versa.

Accessibility with Clay

Apart from providing consistent styling and user experiences, Clay also automates adherence to accessibility standards. Clay components are built with **ARIA roles** and **semantic HTML**, and they always use meaningful labels and titles.

Using Clay Components for Clarity’s Distributor Locator

The development team at Clarity has completed the custom OpenStreetMap React component and can now turn their focus to the additional supporting custom elements. The Distributor Table and the Distributor Details components have been determined to be best built with Clay. There are several advantages in this approach, including a consistent user experience and the ability to deliver the solution faster by leveraging out-of-the-box elements.

Conclusion

Liferay's Clay component library is a significant productivity multiplier for frontend development. By using its prebuilt and customizable components, you can rapidly build user interfaces that are both accessible and visually consistent with the platform. This approach allows you to focus on core application logic while ensuring your custom elements feel native to the Liferay experience.

Next, you’ll help Clarity add Clay components to their distributor locator app.

Loading Knowledge