@frame-kit/ui-ng

A style-agnostic, token-driven Angular UI component library. Components own structure, layout, accessibility, and behavior; their entire appearance comes from --fk-* CSS custom properties, so you theme the whole library by supplying tokens — never by overriding component CSS.

• Standalone + OnPush + signal inputs throughout (Angular 21+).
• Tree-shakeable — every component is its own entry point, so you only ship what you import.
• Themeable via @frame-kit/tokens and your own --fk-* overrides.

Install

npm i @frame-kit/ui-ng @frame-kit/tokens

Peer dependencies: @angular/{core,common,forms,router,platform-browser,cdk} ^21.2 and rxjs ^7.

Quick start

1. Load the default theme (in angular.json → styles, order matters):

"styles": [
  "node_modules/@frame-kit/tokens/base.css",
  "node_modules/@frame-kit/tokens/dark.css", // optional dark mode
  "src/styles.css" // your overrides last
]

2. Register the icons your app uses (the library ships none):

import { provideIcons } from '@frame-kit/ui-ng';
import { searchIcon, lockIcon } from 'your-icon-source';

export const appConfig = {
  providers: [provideIcons({ search: searchIcon, lock: lockIcon })],
};

3. Import components where you use them (standalone):

import { Component } from '@angular/core';
import { ButtonComponent } from '@frame-kit/ui-ng';

@Component({
  selector: 'app-example',
  imports: [ButtonComponent],
  template: `<fk-button variant="primary">Save</fk-button>`,
})
export class ExampleComponent {}

Both forms work and tree-shake identically — the barrel @frame-kit/ui-ng or the per-component entry point @frame-kit/ui-ng/ui/button. Use the barrel unless you have a reason not to.

Documentation

• Component catalog — every component, with a link to its full README.
• Theming guide — the --fk-* token contract and how to override appearance.
• Development guide — for contributing components.

Each component also ships its own README.md inside the package.

License

MIT