liferay-clay-ui

What problem does it solve?

Liferay Clay UI can be confusing to set up and use consistently across Liferay Portal projects, and developers need clear patterns for Provider setup, package imports, component composition, CSS conventions, and data integration to avoid layout regressions and accessibility issues.

Core Features & Use Cases

• Provider Pattern: Explains mandatory Provider usage and spritemap configuration for SVG icons.
• Package-specific Imports: Shows tree-shakable imports per @clayui package and warns against generic imports.
• Component Patterns: Examples for modals, sortable tables, toolbars, forms, autocomplete, tree views, pickers, and card patterns.
• Integration: Guidance for data fetching with useResource, FDS cell renderer integration, and accessibility/CSS best practices.
• Anti-Patterns: Common mistakes to avoid, such as mixing conflicting Bootstrap classes or importing full CSS when unnecessary.

Quick Start

Import Provider from @clayui/core at your app entry, include the Clay CSS atlas stylesheet once, and set the Provider spritemap to your theme's icons.svg before rendering Clay components.