A collection of self-contained, plug-and-play web components for building consistent user interfaces, built with LitElement.
Pattern Library is a UI component library that provides a collection of reusable web components built with LitElement. It solves the problem of UI inconsistency by offering a standardized set of components that follow atomic design principles and can be integrated into any web project. The components are self-contained, framework-agnostic, and designed to work seamlessly across different environments.
Frontend developers and teams building web applications who need consistent, reusable UI components that work across frameworks. It's particularly useful for organizations adopting design systems and atomic design methodologies.
Developers choose Pattern Library for its production-ready web components that are framework-agnostic, support version coexistence, and follow established web standards. The library's use of Shadow DOM ensures style encapsulation, while its atomic design organization promotes maintainable and scalable UI development.
AXA CH UI component library. Please share, comment, create issues and work with us!
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
Components work natively in the browser and can be used with any JavaScript framework or vanilla JS, as highlighted in the key features, ensuring broad compatibility.
Different versions of components can coexist on the same web page without conflicts, enabling gradual updates and reducing breaking changes, as documented in the component versioning section.
Components utilize Shadow DOM for style isolation, preventing CSS conflicts and ensuring consistent rendering, which is a core feature mentioned in the README.
Components are structured into atoms, molecules, and organisms, promoting scalable and maintainable UI development based on established design principles.
The README dedicates a section to workarounds for testing with Jest, indicating significant challenges with DOM emulation and web component APIs in node environments, requiring extra configuration or mocking.
Components follow AXA's specific design guidelines linked via Figma, which may restrict customization for teams needing to deviate from the provided styles or brand identity.
Managed as a monorepo with Lerna, this adds overhead for contributions or integrations compared to simpler packaging systems, and reliance on external channels like Slack for support can be less accessible.