A signal-based component library for Angular 22+
60+ accessible, themeable, tree-shakeable controls — built the way Angular is heading:
signals everywhere, zoneless, standalone. No NgModules, no @Input()/@Output()
decorators, no ControlValueAccessor boilerplate.
Twelve of them. All 60+ are interactive on the site.
Beta. Published under the
nextdist-tag. The API is close to stable, but inputs may still be renamed between pre-releases — every change ships with a changelog entry. Feedback and bug reports are very welcome.
- 60+ controls — inputs, actions, overlays, data display (incl. a full-featured table), layout, feedback, and navigation.
- Headless behavior, swappable skin. Controls ship zero component CSS. Behavior,
accessibility, and named style scopes live in the control; all styling lives in a
separate theme that the engine injects into
<head>at runtime — no stylesheet to import, no Tailwind required. - Accessible by default. WAI-ARIA roles, keyboard interaction, and focus management are built in.
- Three theme presets —
nova(fully themed, dark-mode aware),shade(a shadcn-style theme), andmaterial(Material Design 3) — plus a token-driven engine for authoring your own. - Tree-shakeable. Every control has its own import subpath; you bundle only what you use.
The same chat app, same markup — list box, avatars, badges, progress, switch, tooltip,
input, buttons. Dark mode is a theme concern, not a per-control one: no dark: variants in
your templates, no per-control branching.
Drive it yourself →
Controls and themes are installed together — the controls hold behavior, the themes hold styling:
pnpm add @awdlab/jig @awdlab/jig-themesSee the Installation guide for the full installation instructions including peer dependencies.
Register the provider with a theme preset (the preset is a Theme object, not a string):
import { ApplicationConfig } from '@angular/core';
import { provideJigControls, withAutoColorScheme } from '@awdlab/jig/api/ng';
import { withDefaultIcons } from '@awdlab/jig/default-icons';
import { nova } from '@awdlab/jig-themes/nova';
export const appConfig: ApplicationConfig = {
providers: [
provideJigControls(
{ theme: { preset: nova } },
withDefaultIcons(), // opt-in built-in Tabler icon set
withAutoColorScheme() // opt-in automatic light/dark mode
),
],
};Then import a control from its subpath and use it — some are elements, some are attribute directives on native elements:
import { Component } from '@angular/core';
import { JigButton } from '@awdlab/jig/button';
@Component({
selector: 'app-example',
imports: [JigButton],
template: `<button jigButton kind="primary">Save</button>`,
})
export class ExampleComponent {}
Configuration, forms, theming, styling, accessibility, SSR, testing and migration guides all live on the site, next to a runnable example and a props table for every control — always matching the released version.
| Requirement | Version |
|---|---|
| Angular | 22.0+ |
| TypeScript | 6.0+ |
| Node (build only) | 22+ |
| Browsers | Chrome/Edge 120+, Firefox 129+, Safari 17.5+ |
The browser floors come from the platform features the controls use directly — the popover
API, @starting-style, cascade layers and CSS nesting. See
Browser Support for the full matrix.
| Package | Description |
|---|---|
@awdlab/jig |
The control components and directives. |
@awdlab/jig-themes |
Theme presets (Nova, Shade, Material) and the engine. |
@awdlab/jig-custom-types |
Shared TypeScript type contracts. |
@awdlab/jig-mcp |
MCP server exposing the docs/API to AI coding agents. |
@awdlab/jig-playwright |
Playwright testing harness with page-object helpers. |
Issues and pull requests are welcome. CONTRIBUTING.md covers the repo layout, the eight parts a control spans, and the conventions we enforce.
- 🐛 Report a bug
- 💡 Request a feature
- 🔒 Security policy — please report vulnerabilities privately
- 🤝 Code of Conduct
MIT © awdlab