BlueprintX

A modern, accessible Angular component library — standalone components, signal inputs, CSS-variable theming, and Angular CDK under the hood.

• Angular 19+ · standalone · OnPush · signals
• Runtime theming — light/dark via CSS custom properties, swappable without a rebuild
• Accessible by default — native semantics, focus-visible rings, ARIA wiring

Installation

npm install blueprintx @angular/cdk

@angular/cdk, @angular/core, @angular/common, and @angular/platform-browser are peer dependencies.

Setup

Load a theme once, at your application root. Pick one:

/* styles.scss */
@use 'blueprintx/themes/auto';   // light, switches to dark with the OS
// or 'blueprintx/themes/light' · 'blueprintx/themes/dark'

Prefer plain CSS? Reference the prebuilt stylesheet instead:

// angular.json → architect.build.options.styles
["node_modules/blueprintx/themes/auto.css", "src/styles.scss"]

Usage

Components are standalone — import the ones you use directly:

import { Component } from '@angular/core';
import { Button, Icon } from 'blueprintx';

@Component({
  selector: 'app-demo',
  imports: [Button, Icon],
  template: `
    <button bpx-button color="primary" (click)="save()">
      <bpx-icon name="check" /> Save
    </button>
    <button bpx-button variant="soft" color="danger" [loading]="deleting()">Delete</button>
  `,
})
export class Demo { /* ... */ }

Button

| Input | Type | Default | |---|---|---| | variant | solid \| soft \| outline \| ghost \| link | solid | | color | primary \| neutral \| success \| warning \| danger \| info | primary | | size | sm \| md \| lg | md | | disabled / loading / fullWidth / iconOnly | boolean | false |

Works on <button> or <a> — native semantics are preserved either way.

Icon

<bpx-icon name="warning" size="lg" label="Warning" />

Register your own glyphs (24×24 viewBox, currentColor):

import { IconRegistry } from 'blueprintx';
inject(IconRegistry).register('star', '<path d="…" fill="currentColor"/>');

Theming

Every visual value is a CSS custom property (--bpx-color-*, --bpx-space-*, …). Override any token under any scope:

.brand { --bpx-color-primary: #7c3aed; }

Build a fully custom theme from the SCSS API:

@use 'blueprintx/styles' as bpx;
:root { @include bpx.core-tokens; @include bpx.light-theme; }

License

MIT