@frame-kit/ui-ng-patterns

Opinionated, dashboard-ready Angular components composed from @frame-kit/ui-ng primitives. Where ui-ng is deliberately unstyled (structure, accessibility, behavior), this layer adds the composition, layout, and sensible defaults you'd otherwise rebuild on every dashboard — while staying fully themeable through the same --fk-* token contract.

@frame-kit/tokens        design variables (--fk-*)
        ↓
@frame-kit/ui-ng         unstyled primitives (button, card, icon, …)
        ↓
@frame-kit/ui-ng-patterns  ← you are here: composed, styled patterns
        ↓
   your app              domain-specific glue only

Install

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

@frame-kit/ui-ng and the Angular packages are peer dependencies. Load the @frame-kit/tokens stylesheets (and any brand overrides) as described in the theming guide.

Usage

Patterns use the fk- selector prefix, the same as ui-ng primitives. Each layer ships as its own entry point for tree-shaking:

import { PageHeaderComponent } from '@frame-kit/ui-ng-patterns/dashboard';
import { EndpointLinkComponent } from '@frame-kit/ui-ng-patterns/docs';

What belongs here

A component is promoted into this package when it:

• Composes two or more ui-ng primitives/layouts,
• Would be reused across two or more apps/dashboards,
• Carries no domain data (no app APIs, enums, or business concepts),
• Is token-driven (--fk-* plus component-scoped --fk-<component>-* with two-tier fallbacks).

Domain-specific UI (auth banners, business cards, feature-flagged screens) stays in the consuming app.

Building components

See the Component Development Guide for this package's conventions. It inherits the ui-ng guide and documents the package-specific differences (layers, one entry point per layer, selector prefix, story/token rules) plus the ui-ng rules that do not apply here.

Status

Early — components are being added one at a time. See the patterns catalog and the ui-ng primitive catalog.

License

MIT