About Bloc UI
The philosophy behind the library.
Why Bloc UI exists
Building a production Angular app typically forces a choice between two uncomfortable options. You either reach for a heavy, opinionated library that decides your colours, your spacing, your motion, and your layout for you, then spend the next six months fighting its specificity. Or you wire everything up from Angular CDK primitives, which gives you the control you want but buries you in boilerplate for focus traps, overlays, and accessibility plumbing before you have shipped a single feature.
Bloc UI exists because neither of those trade-offs should be necessary. The CDK provides an excellent platform layer. What was missing was a thin, production-ready component layer sitting on top of it, handling structure, keyboard navigation, ARIA semantics, and form integration without touching a single design decision.
Every component in Bloc UI ships with neutral grey fallbacks and zero brand colour. Your design system lives in your stylesheet, not ours. Bloc UI is the skeleton; you provide the skin.
What makes it different
Lightweight
No runtime dependencies beyond Angular itself. Each component is a separate entry point. Import only what you use and let your bundler tree-shake the rest.
Signal-based inputs
Every input is declared with Angular's signal input() API, not decorator-based @Input(). That means change detection stays fine-grained and component templates stay reactive by default.
Zero CSS opinion
Base styles use :where() (zero specificity) and @layer so your own classes, Tailwind utilities, or a custom theme always win without !important.
Modular packages
Each feature ships as its own npm package: @bloc-ui/modal, @bloc-ui/table, and so on. Take the kit for everything, or pick exactly what your project needs.
Support the project
Bloc UI is built and maintained in spare time. If it saves you time at work or on a side project, any of the following goes a long way.
