@bract/ui

Headless, minimal Angular layout & UI primitives (stack, flex, grid, regions, button) with zero runtime dependencies beyond Angular. Provides ergonomic gap handling and responsive utilities without imposing design tokens.

Install

npm install @bract/ui

Angular 20+ is required.

Usage

Import standalone components/directives directly:

import { BrStackComponent, BrFlexDirective, BrGridComponent } from '@bract/ui';

@Component({
  standalone: true,
  imports: [BrStackComponent, BrFlexDirective, BrGridComponent],
  template: `
    <br-stack gap="1rem">
      <div brFlex gap="0.5rem" justify="between">
        <div>Left</div>
        <div>Right</div>
      </div>
      <br-grid minColWidth="12rem" gap="1rem">
        <div *ngFor="let item of items">{{ item }}</div>
      </br-grid>
    </br-stack>
  `,
})
export class ExampleComponent {
  items = [1, 2, 3, 4];
}

Styles

Global utility styles (if desired) can be added automatically via the schematic:

ng add @bract/ui --style=css   # or --style=scss

Manual import (CSS): add to your global styles list:

"styles": ["node_modules/@bract/ui/styles/bract.css"]

SCSS (for variables / future theming):

@use '@bract/ui/styles/bract';

Schematic (ng-add)

Runs a minimal workspace modification adding the chosen global stylesheet if not already present.

SSR

All primitives are SSR-safe (no direct DOM access at construction).

Tree Shaking

All exports are standalone; import only what you need. Package is built with Angular partial compilation and marked sideEffects: false.

Contributing / Development

Run tests: nx test bract Build: nx build bract && nx run bract:styles

Releasing

Releases are performed via GitHub workflow (manual dispatch) using semantic-release.

License

MIT