Quick Start

# all-in-one
npm install @bloc-ui/kit

# or pick what you need
npm install @bloc-ui/core @bloc-ui/modal

import { BlocButtonComponent } from '@bloc-ui/core/button';

<button blocButton variant="primary" [loading]="saving">Save</button>

Optional theming - adds light/dark mode, colour tokens, and consistent typography:

npm install @bloc-ui/theme

@use '@bloc-ui/theme/styles/bloc-theme';

Development

Prerequisites: Node 24, npm

npm install          # install dependencies
ng serve             # start demo app → http://localhost:4200
npm run build        # build all libraries
ng test              # run tests

Design Principles

• Barebone - minimal structural styles, neutral grey fallbacks
• No hard-coded colours - everything through var() CSS custom properties
• Cascade-friendly - :where() zero specificity + @layer so your styles always win
• Accessible - ARIA roles, keyboard navigation, focus management
• Tree-shakeable - secondary entry points (@bloc-ui/core/button) and standalone packages
• Forms-ready - ControlValueAccessor on checkbox, toggle, radio, date picker

☕ Ko-fi · ⭐ Star on GitHub · License: MIT