UIsuite

Enterprise-grade Angular UI component library designed for ERP SaaS applications and enterprise software. Built with a focus on consistency, accessibility, and designer-friendly customization.

🚀 Features

• ✨ Modern & Clean Design — Professional UI components that look great out of the box
• 🎨 Runtime Theming — Configure your brand colors in app.config.ts — no SCSS edits needed
• ♿ Accessible — WCAG compliant with proper ARIA attributes and keyboard navigation
• 📦 Tree-shakeable — Only import what you need
• 🔧 Reactive Forms Support — Full integration with Angular reactive forms
• 📱 Responsive — Mobile-first design approach
• 🎯 TypeScript — Full type safety and IntelliSense support

📦 Installation

npm install uisuite

⚡ Quick Start

1. Register the library in app.config.ts

// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideRouter }   from '@angular/router';
import { provideUiSuite }  from 'uisuite';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideUiSuite(), // ← add this (uses default colors out of the box)
  ]
};

2. Import the stylesheet

Add to your angular.json styles array:

"styles": [
  "node_modules/uisuite/styles/ui.scss",
  "src/styles.scss"
]

Or import in your global styles.scss:

@use 'uisuite/styles/ui';

3. Use components

import { ButtonComponent } from 'uisuite';

@Component({
  standalone: true,
  imports: [ButtonComponent],
  template: `<uButton variant="default" color="primary">Click Me</uButton>`
})
export class AppComponent {}

🎨 Theme Configuration

provideUiSuite() accepts an optional config object so you can set your brand colors once in app.config.ts — every component picks them up automatically.

Quick mode — single hex per color group

provideUiSuite({
  colors: {
    primary: '#7C3AED',   // violet  → full 9-shade scale auto-generated
    success: '#16A34A',   // green
    warning: '#D97706',   // amber
    danger:  '#DC2626',   // red
    accent:  '#0EA5E9',   // sky blue
  }
})

Precise mode — partial or full scale

provideUiSuite({
  colors: {
    primary: {
      100: '#EDE9FE',
      200: '#DDD6FE',
      500: '#8B5CF6',
      600: '#7C3AED',  // main interactive shade
      700: '#6D28D9',
      800: '#5B21B6',
      900: '#4C1D95',
    },
    danger: { 600: '#DC2626', 700: '#B91C1C' },  // only override what you need
  }
})

Note: You can mix both — use a string for some groups and a scale object for others.

How it works

At startup, provideUiSuite() writes CSS custom properties onto :root:

--uicolor-primary-600: #7C3AED
--uicolor-primary-700: #6D28D9
...

All UIsuite components reference these variables, so the entire UI re-themes instantly.

CSS-only alternative

If you prefer not to use the provider, you can override variables directly in your global CSS:

/* styles.css */
:root {
  --uicolor-primary-600: #7C3AED;
  --uicolor-primary-700: #6D28D9;
}

Full color variable reference

| Group | CSS variable pattern | Default | |-------|---------------------|---------| | Primary | --uicolor-primary-{100–900} | Blue | | Success | --uicolor-success-{100–900} | Green | | Warning | --uicolor-warning-{100–900} | Amber | | Danger | --uicolor-danger-{100–900} | Red | | Accent | --uicolor-accent-{100–900} | Purple | | Slate | --uicolor-slate-{100–900} | Grey (neutral) |

📚 Components

Button (uButton)

<uButton>Default</uButton>
<uButton variant="outline" color="primary">Outline</uButton>
<uButton variant="ghost">Ghost</uButton>
<uButton variant="destructive">Delete</uButton>
<uButton variant="secondary">Secondary</uButton>
<uButton variant="link">Link</uButton>
<uButton size="sm">Small</uButton>
<uButton size="lg">Large</uButton>
<uButton [disabled]="true">Disabled</uButton>

Inputs:

| Input | Type | Default | Description | |-------|------|---------|-------------| | variant | 'default' \| 'outline' \| 'ghost' \| 'destructive' \| 'secondary' \| 'link' | 'default' | Visual style | | size | 'default' \| 'sm' \| 'lg' \| 'icon' \| 'icon-sm' \| 'icon-lg' | 'default' | Size | | color | 'primary' \| 'success' \| 'warning' \| 'danger' \| 'accent' \| 'white' \| 'info' | 'primary' | Color palette | | disabled | boolean | false | Disables the button | | type | 'button' \| 'submit' \| 'reset' | 'button' | HTML button type | | ariaLabel | string | — | ARIA label |

Card (uCard)

<uCard>
  <uCardHeader>
    <uCardTitle>Card Title</uCardTitle>
    <uCardDescription>Card description goes here.</uCardDescription>
  </uCardHeader>
  <uCardContent>
    <p>Main content area</p>
  </uCardContent>
  <uCardFooter>
    <uButton>Action</uButton>
  </uCardFooter>
</uCard>

Alert Dialog (uAlertDialog)

<uAlertDialog [(isOpen)]="dialogOpen" (action)="onAction($event)">
  <u-alert-dialog-header>
    <u-alert-dialog-title>Are you sure?</u-alert-dialog-title>
    <u-alert-dialog-description>
      This action cannot be undone.
    </u-alert-dialog-description>
  </u-alert-dialog-header>
  <u-alert-dialog-footer>
    <uButton variant="outline" (click)="dialogOpen = false">Cancel</uButton>
    <uButton variant="destructive" (click)="confirm()">Delete</uButton>
  </u-alert-dialog-footer>
</uAlertDialog>

Dropdown ([uDropdown])

<div [uDropdown]="menuRef" placement="bottom-start">
  <uButton>Open Menu</uButton>
</div>

<uDropdownMenu #menuRef>
  <button uDropdownItem>Profile</button>
  <button uDropdownItem>Settings</button>
  <hr uDropdownSeparator />
  <button uDropdownItem variant="destructive">Logout</button>
</uDropdownMenu>

Tooltip ([uTooltip])

<uButton uTooltip="Save your work" tooltipPlacement="top">Save</uButton>

Datepicker ([uDatepicker])

<input [uDatepicker]="picker" [(ngModel)]="date" placeholder="Pick a date" />
<uDatepicker #picker></uDatepicker>

Text (uText)

<uText size="lg" weight="semibold">Heading text</uText>
<uText size="sm" color="muted">Secondary text</uText>

🔧 TypeScript API

import {
  // Provider function
  provideUiSuite,

  // Config interfaces
  UiSuiteConfig,
  UiSuiteColors,
  UiSuiteColorScale,

  // Injection token (advanced)
  UISUITE_CONFIG,

  // Theme service (advanced)
  UiSuiteThemeService,

  // Components
  ButtonComponent,
  CardComponent,
  AlertDialogComponent,
  DropdownMenuComponent,
  TooltipComponent,
  DatepickerComponent,
  TextComponent,
} from 'uisuite';

🌐 SSR / Server-Side Rendering

The theme service automatically detects the platform using isPlatformBrowser() and skips DOM manipulation during SSR. CSS variables are applied on the client after hydration — no configuration needed.

📖 Documentation & Examples

Visit https://github.com/ksindhi/uisuite for full docs, live examples, and Storybook.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

🙏 Support

If you find this project useful, please give it a ⭐ on GitHub!