Top Angular Components Libraries

Filters

Top 5 Projects Compared

storybook
87,105

Storybook is an open-source tool for building UI components and pages in isolation, making it easier to develop, test, and document UI components.

Code Example

import { Button } from './Button';

export default {
  component: Button,
  title: 'Components/Button',
};

export const Primary = () => <Button primary>Button</Button>;

Pros

Storybook provides a comprehensive development environment for UI components, unlike more specialized libraries like tsparticles or angular-calendar.
It supports multiple frontend frameworks, making it more versatile than framework-specific solutions like angular/components or ng-zorro-antd.
Storybook offers extensive documentation and testing capabilities, surpassing many of the listed projects in this aspect.

Cons

Storybook has a steeper learning curve compared to simpler component libraries like ngx-bootstrap or ng-select.
It requires more setup and configuration than lightweight alternatives such as tagify or selecto.
Storybook may be overkill for small projects or teams that don't need its full range of features, unlike more focused tools like angular-google-maps or ngx-quill.

components
24,739

Angular Material is a UI component library for Angular applications, providing a set of reusable, well-tested, and accessible components.

Code Example

import { MatButtonModule } from '@angular/material/button';

@NgModule({
  imports: [MatButtonModule],
})

Pros

Seamless integration with Angular, offering a cohesive development experience
Extensive set of pre-built, customizable components following Material Design principles
Strong focus on accessibility and performance optimization

Cons

Steeper learning curve compared to some lightweight alternatives like ng-select or ngx-bootstrap
Less flexibility in design customization compared to more generic libraries like Storybook or Bit
Larger bundle size than minimal libraries like Stencil or Mitosis

bit
18,126

Bit is a platform for component-driven software development, enabling teams to build and collaborate on components across projects and applications.

Code Example

import { createComponent } from '@teambit/react';

export const MyComponent = createComponent({
  name: 'MyComponent',
  render: () => <div>Hello, Bit!</div>
});

Pros

Offers a comprehensive component management system, unlike many other projects that focus solely on UI components
Provides a collaborative platform for sharing and reusing components across projects and teams
Supports multiple frameworks and languages, making it more versatile than framework-specific solutions

Cons

Has a steeper learning curve compared to simpler component libraries or UI frameworks
Requires more setup and infrastructure compared to standalone component libraries
May be overkill for smaller projects or teams that don't need extensive component management

mitosis
13,260

BuilderIO/mitosis is a tool for writing components once and compiling them to multiple frameworks.

Code Example

import { useState } from '@builder.io/mitosis';

export default function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}

Pros

Enables writing components once and generating code for multiple frameworks, reducing development time and effort.
Supports a wide range of popular frameworks, including React, Vue, Angular, and Svelte.
Provides a unified API for state management and component lifecycle across different frameworks.

Cons

May introduce an additional layer of abstraction, potentially making debugging more challenging.
Limited ecosystem compared to framework-specific solutions like Angular Components or PrimeNG.
Learning curve for developers who are already proficient in specific frameworks.

core
12,818

StencilJS is a compiler for building fast, reusable web components and progressive web apps.

Code Example

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css'
})
export class MyComponent {
  @Prop() name: string;
  render() {
    return <div>Hello, {this.name}</div>;
  }
}

Pros

Framework-agnostic: StencilJS components can be used with any major framework or no framework at all.
Performance-focused: StencilJS generates highly optimized components with a small footprint.
TypeScript support: Built-in TypeScript support enhances developer experience and code quality.

Cons

Learning curve: Developers may need to learn StencilJS-specific concepts and syntax.
Limited ecosystem: Compared to some other projects, StencilJS has a smaller ecosystem of pre-built components and plugins.
Build complexity: Setting up and configuring StencilJS projects can be more complex than some alternatives.

All Top Projects

storybook

87,105

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation

components

24,739

Component infrastructure and Material Design components for Angular

bit

18,126

AI-powered development workspaces with reusable components, architectural clarity and zero overhead.

mitosis

13,260

Write components once, run everywhere. Compiles to React, Vue, Qwik, Solid, Angular, Svelte, and more.

core

12,818

A toolchain for building scalable, enterprise-ready component systems on top of TypeScript and Web Component standards. Stencil components can be distributed natively to React, Angular, Vue, and traditional web developers from a single, framework-agnostic codebase.

primeng

11,722

The Most Complete Angular UI Component Library

ng-zorro-antd

9,037

Angular UI Component Library based on Ant Design

OnsenUI

8,861

Mobile app development framework and SDK using HTML5 and JavaScript. Create beautiful and performant cross-platform mobile apps. Based on Web Components, and provides bindings for Angular 1, 2, React and Vue.js.

tsparticles

8,304

tsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.

clarity

6,419

Clarity is a scalable, accessible, customizable, open source design system built with web components. Works with any JavaScript framework, built for enterprises, and designed to be inclusive.