Overview

BuilderKit Components is not a component library in the traditional sense. It provides custom styles and a theming system that refine and modernize Angular Material components. You are still using the standard Angular Material components, but with a visual layer that enhances their appearance while preserving their behavior.

Why They Exist

BuilderKit brings a clean and modern look to Angular Material while keeping its functionality and accessibility untouched. Custom styles and theming are layered on top of the base components to provide a stronger visual foundation that works immediately in real applications.

Design Philosophy

The design is influenced by modern web user interfaces, with a focus on simplicity, clarity, and density. Components are more compact and visually balanced compared to their Angular Material counterparts. This makes them better suited for real applications where screen space and layout precision matter.

BuilderKit use opinionated visual defaults to ensure consistency across your project. These defaults are not meant to be customized extensively. Instead, they give you a cohesive and polished experience with minimal setup.

Styling

BuilderKit uses custom twelve-step color palettes instead of the default Tailwind palette. The default palette lacks the range needed for expressive design without relying on transparency, which often results in washed-out or muddy colors.

The extended color scale used in BuilderKit offers better control for surfaces, shadows, and interactive states. While using your own palette is possible, we recommend using the BuilderKit palette throughout your project to ensure visual consistency and design coherence.