🌟 Overview

Foundry UI is the visual orchestration layer and design system of the Foundry suite. Designed from the ground up for modern Angular applications, it completely abandons monolithic frameworks (100% Material-free) in favor of a strictly decoupled, highly performant, and reactive architecture.

It provides a comprehensive set of UI components, form controls, advanced widgets (like data tables and drag & drop), and layout orchestrators—all seamlessly tied together by a robust CSS Design Token system.

🚀 Key features & philosophy

• Zero dependencies: No third-party libraries bloating your bundle. Everything is built natively.

• Strictly atandalone: Modern Angular architecture. Import exactly what you need, where you need it.

• Maximum oerformance: Every component utilizes ChangeDetectionStrategy.OnPush to guarantee fluid rendering even in complex, data-heavy enterprise dashboards.

• Composition over inheritance: Uses <ng-content> heavily to allow flexible UI compositions rather than rigid, hardcoded layouts.

• Native CSS tokens: A completely SCSS/CSS variables-driven design system. Change a variable globally, and the entire suite adapts instantly without compiling overhead.

• Reactive orchestration: Layouts and widgets communicate through reactive state services, eliminating prop drilling.

📦 Installation

Install the package via npm:

npm install @antoniocorraliza/foundry-ui

Setup styles

Foundry UI relies on a robust set of CSS variables and SCSS mixins. Import the global styles into your application's root styles.scss (or styles.css):

/* src/styles.scss */
@use "@antoniocorraliza/foundry-ui/styles" as *;

Note: The suite automatically imports standard fonts (Inter, Urbanist) and Google Material Symbols Outlined for its internal iconography.

🧩 Architecture & ecosystem

The library is meticulously structured into 8 core architectural pillars, ensuring extreme modularity and scalability:

• Constants: Static configuration, enums, and predefined behaviors used across the suite to maintain consistency.

• Core elements: Foundational UI building blocks (buttons, typography, chips) built for absolute reusability and seamless design token integration.

• Directives: Powerful DOM manipulators and behavior modifiers (drag & drop APIs, tooltips, click-outside detection, portals).

• Forms: Highly configurable inputs implementing ControlValueAccessor and Validator for native integration with Angular Reactive Forms, driven by strict TypeScript option objects.

• Layouts: Structural orchestrators that manage space, scrolling, and visual distribution natively.

• Managers: Reactive state services tailored to orchestrate UI behavior without prop drilling across deeply nested components.

• Pipes: Utilities for data transformation and secure rendering (e.g., safe XSS HTML sanitization).

• Widgets: Complex, compound components with advanced internal logic (data tables, responsive sidebars, custom calendars, option menus).

💻 Integration examples

For comprehensive documentation, advanced use cases, and fully developed integration examples across the entire component ecosystem, please visit our official site:

🌐 https://www.foundry-suite.com

🎨 Theming & customization

Foundry UI is completely customizable overriding its CSS Custom Properties globally or locally. Define these in your :root or inside specific container components to adapt the suite to your brand in seconds:

:root {
  /* Colors */
  --foundry-background-main: #020617;
  --foundry-background-card: #0f172a;
  --foundry-accent: #a3e635; /* Change primary accent color */
  --foundry-text-primary: #f8fafc;
  --foundry-error: #ef4444;

  /* Typography */
  --foundry-font-heading: "Urbanist", sans-serif;
  --foundry-font-body: "Inter", sans-serif;

  /* Geometry */
  --foundry-radius-small: 8px;
  --foundry-radius-big: 16px;
}

🛡️ Peer pependencies

This suite is built on top of the latest Angular features. Make sure your environment satisfies the following:

• @angular/core: >=19.2.0

• @angular/common: >=19.2.0

• @angular/forms: >=19.2.0

• @angular/animations: >=19.2.0

📄 License

Property of Antonio Corraliza León as part of the Foundry development suite. All rights reserved.