Angular Liquid Glass

angular-liquid-glass is a standalone Angular component library for liquid glass and glassmorphism interfaces.

• Live docs: https://thiagopac.github.io/angular-liquid-glass-docs/
• npm package: https://www.npmjs.com/package/angular-liquid-glass
• Repository: https://github.com/thiagopac/angular-liquid-glass

Install

npm install angular-liquid-glass

Expected peer dependencies in the host application:

• @angular/core ^21.2.0
• @angular/common ^21.2.0

Quick Start

import { Component } from '@angular/core';
import { LiquidGlassButtonComponent, LiquidGlassCardComponent } from 'angular-liquid-glass';

@Component({
  selector: 'app-demo',
  standalone: true,
  imports: [LiquidGlassCardComponent, LiquidGlassButtonComponent],
  template: `
    <angular-liquid-glass-card width="320px" height="220px">
      <h2>Angular Liquid Glass</h2>
      <p>Standalone glassmorphism components for Angular.</p>
      <angular-liquid-glass-button> Explore </angular-liquid-glass-button>
    </angular-liquid-glass-card>
  `,
})
export class DemoComponent {}

Public API (Components & Services)

• LiquidGlassAccordionComponent
• LiquidGlassButtonComponent
• LiquidGlassCardComponent
• LiquidGlassDividerComponent
• LiquidGlassDropdownComponent
• LiquidGlassDropdownItemComponent
• LiquidGlassIconComponent
• LiquidGlassNavComponent
• LiquidGlassNavItemComponent
• LiquidGlassSpinnerComponent
• LiquidGlassToggleComponent
• LiquidGlassFilterService

More Information

For full examples, contribution guides, release flow, and project status, see:

https://github.com/thiagopac/angular-liquid-glass