Installation
Learn how to install and integrate the BeigeUI library into your Angular application in minutes.
1. Install Package & Dependencies
Add @saarcmaststech/beige-ui and @angular/cdk (for headless accessibility & overlays) to your project:
npm install @saarcmaststech/beige-ui @angular/cdk2. Import Design Tokens
Import the global design tokens into your root stylesheet (src/styles.scss). This provides CSS variables for surfaces, colors, borders, shadows, and radii:
// In your src/styles.scss
@import '@saarcmaststech/beige-ui/styles/tokens.scss';3. Add Recommended Typography
BeigeUI is designed to look best with Plus Jakarta Sans for body/headings and JetBrains Mono for code blocks:
<!-- In your src/index.html <head> -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">4. Quick Start Example
Import standalone components directly into your Angular component:
import { Component } from '@angular/core';
import { BeButtonComponent, BeBadgeComponent } from '@saarcmaststech/beige-ui';
@Component({
selector: 'app-root',
standalone: true,
imports: [BeButtonComponent, BeBadgeComponent],
template: `
<div class="welcome-container">
<be-badge variant="primary">BeigeUI Ready</be-badge>
<h1>Welcome to BeigeUI</h1>
<be-button variant="primary" (clicked)="onAction()">
Get Started
</be-button>
</div>
`
})
export class AppComponent {
onAction() {
console.log('Button clicked!');
}
}