Alyle UI

screenshot of Alyle UI

Alyle UI

Minimal Design, a set of components for Angular 16+


Alyle UI is a UI component library for building responsive web applications. It offers a wide range of features and components that are easy to install and use. The library provides a comprehensive documentation for each feature and component, making it easy for developers to implement them in their projects.


  • Avatar: Displays an avatar image or icon.
  • Badge: Adds a badge or label to an element.
  • Button: Creates a customizable button element.
  • Card: Displays content in a card-like container.
  • Carousel: Creates a carousel for displaying multiple items.
  • Checkbox: Renders a checkbox input.
  • Dialog: Displays a modal dialog window.
  • Divider: Adds a horizontal line or divider.
  • Drawer: Provides a drawer component for navigation or sidebars.
  • Expansion: Renders an expandable or collapsible container.
  • Field: Includes various form field components.
  • Grid: Implements a grid layout system.
  • Icon: Displays an icon from a library.
  • Img Cropper: Provides an image cropper component.
  • List: Renders a list of items.
  • Media: Displays media content, such as images or videos.
  • Menu: Creates a dropdown menu.
  • Radio: Renders a radio button input.
  • Select: Implements a dropdown select input.
  • Snack Bar: Displays a notification or message at the bottom of the screen.
  • Skeleton Screen: Provides a loading skeleton screen effect.
  • Slider: Creates a slider or range input.
  • Tabs: Renders a tabbed interface.
  • Toolbar: Creates a customizable toolbar.
  • Tooltip: Adds a tooltip to an element.
  • Typography: Includes various typography styles and components.


To install Alyle UI, use the following code snippet:

npm install alyle-ui


Alyle UI is a comprehensive UI component library that offers a wide range of features and components for building responsive web applications. With its easy installation process and detailed documentation, developers can quickly implement the desired features and components in their projects.


Angular is a TypeScript-based open-source framework by Google for building dynamic single-page applications and cross-platform mobile apps with MVC architecture and a rich set of features.


Express.js is a simple Node.js framework for single, multi-page, and hybrid web applications.

Material UI

material-ui adds classes to Tailwind CSS for all common UI components. Classes like btn, card, etc. This allows us to focus on important things instead of making basic elements for every project.

Fullstack Boilerplates

A fullstack boilerplate provides a starter application that includes both frontend and backend. It should include database, auth, payments, user roles and other backend services to build a fully featured saas or webapps.

UI Kits & Components

A UI kit provides developers with a set of reusable components that can be easily integrated into a website or application. These components are pre-designed with consistent styling and functionality, allowing developers to save time and effort in the design and development process. UI kits can be either custom-built or third-party, and often include components for buttons, forms, typography, icons, and more.

Material Design

Material Design is a design system developed by Google that provides a set of guidelines, components, and tools for creating visually appealing and functional user interfaces. Material Design is designed to be flexible and customizable, making it a great choice for a wide range of applications and use cases.

Prism JS

PrismJS is an open-source, lightweight, and extensible syntax highlighting library that supports a wide range of programming languages and markup formats.


TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.