angular-liquid-glass is a standalone Angular component library for liquid glass and glassmorphism interfaces. It is designed for Angular applications that want expressive translucent UI primitives without depending on custom design-system infrastructure first.

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

The library is public and ready for adoption, but still pre-1.0.0. Expect the API to evolve while the component set and naming stabilize.

• Standalone Angular components with no NgModule setup required
• Liquid glass visual treatment built into the components
• Small, composable primitives instead of one large UI framework
• Suitable for demos, landing pages, internal tools, and experimental product interfaces

npm install angular-liquid-glass

Expected peer dependencies in the host application:

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

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 {}

The current public entrypoint exports include:

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

Import only what you need:

import {
  LiquidGlassAccordionComponent,
  LiquidGlassButtonComponent,
  LiquidGlassCardComponent,
  LiquidGlassDropdownComponent,
  LiquidGlassDropdownItemComponent,
  LiquidGlassIconComponent,
  LiquidGlassNavComponent,
  LiquidGlassNavItemComponent,
  LiquidGlassSpinnerComponent,
  LiquidGlassToggleComponent,
} from 'angular-liquid-glass';

Use the card as a general-purpose glass container with content projection.

<angular-liquid-glass-card
  width="320px"
  height="280px"
  blur="20px"
  borderRadius="24px"
  background="rgba(255, 255, 255, 0.08)"
  [scale]="120"
>
  <h2>Liquid Glass Card</h2>
  <p>Content is projected into the card body.</p>
</angular-liquid-glass-card>

Main inputs:

Use the button for projected text or inline content with hover highlight behavior.

<angular-liquid-glass-button
  blur="7px"
  borderRadius="12px"
  background="rgba(255, 255, 255, 0.1)"
  [scale]="120"
>
  Continue
</angular-liquid-glass-button>

Main inputs:

Use the accordion when each item can manage its own open or closed state.

<angular-liquid-glass-accordion label="What is this?" blur="7px" borderRadius="12px" [scale]="120">
  <p>A standalone glass accordion with animated open and close behavior.</p>
</angular-liquid-glass-accordion>

Main inputs:

Use the dropdown container with one or more dropdown items. The container provides the shared filter and style context.

<angular-liquid-glass-dropdown blur="7px" borderRadius="12px" [scale]="120">
  <angular-liquid-glass-dropdown-item label="Features">
    <ul>
      <li>Liquid distortion effect</li>
      <li>Smooth open and close animation</li>
      <li>Reactive inputs</li>
    </ul>
  </angular-liquid-glass-dropdown-item>

  <angular-liquid-glass-dropdown-item label="Documentation">
    <p>Import both components and nest items inside the container.</p>
  </angular-liquid-glass-dropdown-item>
</angular-liquid-glass-dropdown>

Dropdown inputs:

Dropdown item inputs:

Use the icon component as a glass container for projected SVGs and the divider to separate groups.

<angular-liquid-glass-icon size="64px" blur="7px" borderRadius="16px" [scale]="120">
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
    <path d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2" />
  </svg>
</angular-liquid-glass-icon>

<angular-liquid-glass-divider orientation="vertical" />

Icon inputs:

Divider inputs:

Use the nav container with projected icon tabs. The active tab index is emitted through activeTabChange.

<angular-liquid-glass-nav
  blur="20px"
  borderRadius="40px"
  [scale]="120"
  (activeTabChange)="activeTab = $event"
>
  <angular-liquid-glass-nav-item label="Home">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
      <path d="M3 12l2-2m0 0l7-7 7 7M5 10v10" />
    </svg>
  </angular-liquid-glass-nav-item>

  <angular-liquid-glass-nav-item label="Search">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
      <circle cx="11" cy="11" r="8" />
      <path d="M21 21l-4.35-4.35" />
    </svg>
  </angular-liquid-glass-nav-item>
</angular-liquid-glass-nav>

Nav inputs:

Nav item inputs:

Outputs:

Use the spinner when you need a loading state with the same glass treatment as the rest of the UI.

<angular-liquid-glass-spinner
  size="80px"
  blur="7px"
  ringColor="rgba(255,255,255,0.9)"
  [scale]="120"
  [speed]="50"
/>

Main inputs:

Use the toggle with one-way or two-way checked state binding.

<angular-liquid-glass-toggle
  label="Dark Mode"
  offColor="rgba(255,255,255,0.08)"
  onColor="rgba(255,255,255,0.30)"
  blur="7px"
  [scale]="120"
  [(checked)]="isDarkMode"
/>

Main inputs:

The full showcase and usage examples are published at:

https://thiagopac.github.io/angular-liquid-glass-docs/

The docs app includes component pages for:

• card
• button
• dropdown
• accordion
• icons
• nav
• spinner
• toggle

Install dependencies and run the normal verification flow:

npm install
npm run lint
npm run test
npm run build

Useful scripts:

npm run pack:lib
npm run release:check

The publishable package is generated in dist/angular-liquid-glass/.

If you are also working on the docs app locally, the docs project can resolve the local package build from a sibling workspace and run against dist/angular-liquid-glass.

• main is the protected branch for releasable code
• semantic versioning is used
• commits follow Conventional Commits
• releases are tag-driven through GitHub Actions

Examples:

• feat(button): add hover distortion input
• fix(card): clean up generated svg filters
• docs(readme): add quick start example

External contributions are welcome. Start with:

• CONTRIBUTING.md for workflow, branch naming, commits, and release steps
• CODE_OF_CONDUCT.md for participation expectations
• SECURITY.md for vulnerability reporting

If you change public behavior or API shape, update docs and tests in the same pull request.

MIT. See LICENSE.