@awdlab/jig
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 next dist-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.
Why
- 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), and material (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.
One app, both schemes
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 →
Install
Controls and themes are installed together — the controls hold behavior, the themes hold
styling:
pnpm add @awdlab/jig @awdlab/jig-themes
See the Installation guide for the full installation
instructions including peer dependencies.
Quick start
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 {}
Documentation
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.
Requirements
| Requirement | Version |
|---|
| Angular | 22.2+ |
| 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.
Packages
Ten minutes on the site beats ten minutes in this README
Contributing
Issues and pull requests are welcome. CONTRIBUTING.md covers the repo
layout, the eight parts a control spans, and the conventions we enforce.
License
MIT © awdlab
