EzUI Component Library

Build elegant, fast, and accessible user interfaces — without the complexity.

EzUI is a fast, flexible UI library designed to simplify the creation of beautiful, accessible interfaces. With a rich set of reusable components, it helps teams create cohesive user experiences effortlessly. Lightweight and modular, EzUI integrates smoothly into your development workflow—so you can focus on crafting amazing apps.

Table of Contents

• Overview
• Key Features
• Installation
• Usage
• Available Components
• Available Services
• Component Preview
• Compatibility
• Support
• License

Overview

EzUI is a modular UI component library built with performance and scalability at its core. It offers a comprehensive suite of reusable, customizable components designed to meet the demands of modern web applications. Every component prioritizes accessibility (A11y), keyboard navigation, and seamless theming with SCSS, ensuring your apps are fully accessible.

Compatible with both traditional module-based and standalone component architectures, EzUI fits naturally into new and existing projects alike. Its clean design and minimal dependencies help teams accelerate development without sacrificing flexibility or quality. Whether you're building simple dashboards or complex enterprise platforms, EzUI provides a robust foundation for consistent, maintainable user interfaces.

Key Features

• Angular 16+ Support
• SCSS Theming System
• A11y & Keyboard Navigation
• Lightweight & Tree-shakable
• NPM Package Support

Installation

npm install @clarium/ezui-components

Module Import

To use EzUI-Components in your app, import the module into your AppModule:

import { EzuiComponentsModule } from '@clarium/ezui-components';
 
@NgModule({
  declarations: [AppComponent],
  imports: [EzuiComponentsModule],
})
export class AppModule {}

Stylesheets Import

To apply EzUI styles and use icons, make sure to import the required stylesheet and icon font:

@use '../node_modules/@clarium/ezui-components/styles/styles';
@use '../node_modules/@clarium/ezui-icons/src/assets/ezui-icons/css/ezui-icons.css';

Usage

Use components in your templates:

<ezui-button severity="primary" (handleClick)="buttonClick()">Click Me</ezui-button>

Why EzUI?

• Ready-to-use Components – From forms to data grids, modals to navigation systems — all in one library.

• Design System Friendly – Built to be themeable, extendable, and consistent across products.

• Accessible by Default – Follows accessibility best practices with keyboard navigation and ARIA support.

• Built for Scale – Suitable for small teams or large enterprises building robust multi-module apps.

• Future-Ready – Supports modern APIs like Web Components and modular architectures without lock-in.

Available Components

| Component Name | Description | Documentation | |-----------------------| -------------------------------------------- |----------------------------------------------------------------------------------------------| | Badge | Displays a status or notification label | View Docs | | Button | Action triggers with various styles | View Docs | | Button Toggle | Single toggleable button | View Docs | | Button Toggle Group | Grouping of multiple toggle buttons | View Docs | | Checkbox | Enables single selection using check mark | View Docs | | Checkbox Group | Grouped checkboxes with multi-select support | View Docs | | Datepicker | Calendar-based date selection input | View Docs | | Divider | Horizontal or vertical separator | View Docs | | Dynamic Form Template | Auto-generated form from API schema | View Docs | | Expansion Panel | Toggleable collapsible content block | View Docs | | File Upload | Upload files via click or drag-and-drop | View Docs | | Flex Layout | Flexbox layout system for responsive UI | View Docs | | Grid | High-performance data grid | View Docs | | Grid Layout | Grid layout system using CSS Grid | View Docs | | List Layout | Vertical stack layout for listing content | View Docs | | Message | Display contextual messages or alerts | View Docs | | Number Input | Input field for numeric values | View Docs | | Paginator | Controls for paginating data | View Docs | | Progress Bar | Shows linear progress status | View Docs | | Radio Button | Single-select radio input | View Docs | | Rating | Star-based rating component | View Docs | | Select | Dropdown with multi-select & search | View Docs | | Sidebar | Side navigation drawer | View Docs | | Slider | Interactive slider input | View Docs | | Slide Toggle | Switch-style toggle input | View Docs | | Tab | Tab panel for switching views | View Docs | | Tab Group | Container for organizing tabs | View Docs | | Text Input | Input field for text data | View Docs | | Toolbar | Header section for controls or navigation | View Docs |

Available Services

| Service Name | Description | Documentation | |------------------| ------------------------------------------------------------------------------- |-------------------------------------------------------------------------------------| | Dialog | Easily open, close, and configure modal dialogs dynamically in your application | View Docs | | Snackbar | Show contextual toast messages for feedback, alerts, or confirmations | View Docs | | Spinner | Control loading indicators to signal async or background operations | View Docs |

Component Preview

Explore real-world examples for each component to learn how to integrate EzUI into your application.

View Demo App

Compatibility

EzUI supports Angular versions 16 through 20, ensuring seamless integration with the latest features and ecosystem improvements.

The library works with TypeScript 4.8 and above, giving you the latest language enhancements and strict type safety.

For Node.js, EzUI is tested and compatible with versions 16, 18, and 20, aligning with common Angular development environments.

Browser Support

EzUI components run flawlessly on all major modern browsers, including:

• Google Chrome

• Mozilla Firefox

• Microsoft Edge

• Apple Safari

License

For licensing terms and usage restrictions, please refer to the LICENSE.txt file.

Developed By

EzUI is crafted and maintained by the Clarium Pulse UI team.