Glint UI

Angular Style Zone UI component library — 80+ themeable components built on Angular CDK with signal-based cascading style customization.

Live Demo · Getting Started · Contributing · Changelog

• Style Zones — Nest <glint-style-zone> components to cascade theme overrides through your component tree. Each zone inherits from its parent and overlays its own tokens.
• 80+ Components — Forms, data display, navigation, overlays, layout, and feedback — everything you need for production apps.
• Signal-based Theming — Built on Angular signals for reactive, synchronous theme propagation with no zone.js dependency.
• Zone-aware Overlays — Dialogs, menus, tooltips, and drawers automatically inherit the theme of their trigger zone.
• Type-safe Tokens — Branded types (CSSColor, CSSLength, CSSBorderRadius) catch theming mistakes at compile time.
• Angular CDK Foundation — Accordion, Stepper, Dialog, Overlay, Drag & Drop, and Virtual Scrolling powered by @angular/cdk.
• Tree-shakeable — Import only what you use. Unused components are eliminated from production builds.

npm install @glint-ng/core @angular/cdk lucide

import { provideGlintUI } from '@glint-ng/core';

export const appConfig: ApplicationConfig = {
  providers: [
    provideGlintUI(),
  ],
};

<glint-button severity="primary">Click me</glint-button>

<glint-style-zone [theme]="{ colorPrimary: GlintColor.Blue.S500 }">
  <glint-button severity="primary">Blue button</glint-button>
</glint-style-zone>

Style Zones let you override theme tokens for any section of your app. Zones nest and inherit:

<!-- Root zone: blue primary -->
<glint-style-zone [theme]="{ colorPrimary: GlintColor.Blue.S500 }">
  <glint-button severity="primary">Blue</glint-button>

  <!-- Nested zone: green primary, inherits everything else -->
  <glint-style-zone [theme]="{ colorPrimary: GlintColor.Green.S500 }">
    <glint-button severity="primary">Green</glint-button>
  </glint-style-zone>
</glint-style-zone>

Use built-in presets for common configurations:

import { DARK_ZONE, COMPACT_ZONE } from '@glint-ng/core';

<glint-style-zone [theme]="DARK_ZONE">
  <!-- Dark-themed section -->
</glint-style-zone>

npm install                  # Install dependencies
npx nx serve demo           # Launch demo app
npx nx test ui              # Run library tests (Vitest)
npx nx lint ui              # Lint library
npx nx build ui             # Build library (ng-packagr)
npx nx build demo           # Build demo app
npx nx graph                # Visualize dependency graph

See ARCHITECTURE.md for detailed architecture documentation, including:

• Style Zone cascading model
• Token registration and CSS custom properties
• Zone-aware overlay system
• Signal-based DI patterns

We welcome contributions! See CONTRIBUTING.md for:

• Development setup instructions
• Coding standards and component conventions
• Testing requirements
• Pull request process

MIT — Copyright (c) 2026 Anthony Muccio