Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/mwiraszka/eagami-design-system

Lightweight, accessible Angular UI component library built on CSS custom properties
https://github.com/mwiraszka/eagami-design-system

Last synced: 2 months ago
JSON representation

Lightweight, accessible Angular UI component library built on CSS custom properties

Awesome Lists containing this project

README 

          


  eagami design system — elegant web design




A lightweight, accessible Angular component library built on CSS custom properties. Ready to use out of the box — install, import, and start building.



Every component is standalone, signal-based, and fully themed via design tokens. No wrapping modules, no complex setup, no runtime style conflicts. Designed to be AI-friendly with clear APIs, consistent patterns, and comprehensive documentation that makes it easy for both developers and AI assistants to work with.



## Why @eagami/ui?



**Approx. component sizes (gzipped)¹**



| Component | **@eagami/ui** | Angular Material | PrimeNG | ng-bootstrap | ng-zorro |

|---|---|---|---|---|---|

| Button | ~2 KB | ~12 KB | ~8 KB | ~10 KB | ~18 KB |

| Input | ~4 KB | ~25 KB | ~14 KB | ~20 KB | ~35 KB |

| Checkbox | ~2 KB | ~15 KB | ~9 KB | ~12 KB | ~22 KB |

| Dropdown / Select | ~4 KB | ~30 KB | ~20 KB | ~25 KB | ~40 KB |

| Dialog / Modal | ~2 KB | ~20 KB | ~15 KB | ~18 KB | ~30 KB |



> ¹ Approximate — depends on configuration, tree-shaking, and Angular version. @eagami/ui sizes measured from production build.



| | **@eagami/ui** | Angular Material | PrimeNG | ng-bootstrap | ng-zorro |

|---|---|---|---|---|---|

| External CSS dependency | No | No | Optional | Bootstrap (~30 KB) | No |

| CSS custom property theming | Yes | Partial (MDC) | Yes | No (Sass vars) | No |

| Signals-first API | Yes | Partial | No | No | No |

| `OnPush` by default | Yes | Partial | No | No | No |

| Runtime dependencies | 0 | CDK + animations | PrimeIcons² | Bootstrap CSS | CDK |

> ² PrimeNG components are tree-shakable but PrimeIcons font (~50 KB) is typically included globally.



## Features



- **Zero configuration** — works immediately after install with sensible defaults

- **Standalone components** — no `NgModule` boilerplate, just import and use

- **Signal-based** — built on Angular's modern reactivity primitives (`input()`, `model()`, `output()`, `effect()`)

- **Full theming via CSS custom properties** — override any design token on `:root` or scope overrides to individual components

- **Dark mode built in** — automatic via `prefers-color-scheme`, no extra setup

- **Accessible** — ARIA attributes, keyboard navigation, focus management, and screen reader support throughout

- **Form-ready** — `ControlValueAccessor` on all form components (Input, Textarea, Checkbox, Switch, Radio, Dropdown)

- **Lightweight** — zero runtime dependencies beyond Angular

- **Tree-shakeable** — only the components you import end up in your bundle



## Installation



```bash

npm install @eagami/ui

# or

pnpm add @eagami/ui

```



Add the global stylesheet to your `angular.json` (or import it in your root SCSS):



```json

"styles": ["node_modules/@eagami/ui/src/styles/eagami-ui.scss"]

```



Load the fonts in your `index.html`:



```html



```



## Quick start



```typescript

import { ButtonComponent } from '@eagami/ui';



@Component({

  imports: [ButtonComponent],

  template: `Save`,

})

export class MyComponent {

  save() { /* ... */ }

}

```



No modules to register, no providers to configure. Every component works the same way — import it, drop it in your template.



## Components



Accordion — expandable content sections



Supports single or `multi` expand mode. Built-in chevron animation and disabled state.



```html



  Content for section 1

  Content for section 2



```



Accordion component



Alert — semantic alert banners with optional dismiss



Variants: `default` | `success` | `warning` | `error` | `info`. Two-way `visible` binding.



```html

Changes saved successfully.

Something went wrong.

```



Alert component



Autocomplete — text input with filtered suggestion dropdown



Arrow key navigation, case-insensitive substring matching, configurable `minLength` and `maxResults`. Full `ControlValueAccessor` support.



```html



```



Autocomplete component



Avatar — image with initials or icon fallback



Sizes: `xs` | `sm` | `md` | `lg` | `xl`. Shapes: `circle` | `square`.



```html



  

```



Avatar component



Avatar Editor — canvas-based image editor with pan, zoom, and crop



Drag-and-drop upload, zoom via slider or scroll wheel. Outputs a `Blob` and data URL.



```html



```



Avatar editor component



Badge — semantic status indicators



Variants: `default` | `success` | `warning` | `error` | `info`. Sizes: `sm` | `md` | `lg`.



```html

Active

Failed

```



Badge component



Breadcrumbs — navigation trail with chevron or slash separators



Separators: `chevron` | `slash`. Items can be links (`href`), buttons (no `href`), or disabled. The last item is automatically rendered as the current page.



```html



```



Breadcrumbs component



Button — primary, secondary, ghost, danger variants with loading state



Sizes: `sm` | `md` | `lg`. Supports `loading`, `disabled`, and `fullWidth` states.



```html



  Save changes



```



Button component



Card — content container with elevated, outlined, and filled variants



Padding: `none` | `sm` | `md` | `lg` | `xl`. Customizable shadow via `--ea-card-shadow`.



```html



  Card Title

  Card body content goes here.

  

    Cancel

    Save

  



```



Card component



Checkbox — with indeterminate state and ControlValueAccessor



Sizes: `sm` | `md` | `lg`.



```html



```



Checkbox component



Code Input — verification code entry with auto-advance and paste support



Configurable `length` (default 6). Full `ControlValueAccessor` support.



```html



```



Code input component



Data Table — sortable columns, sticky headers, density modes



Striped, bordered, and hoverable rows. Custom cell templates via `ng-template`. Density: `compact` | `comfortable` | `spacious`. Two-way `sort` binding.



```html



```



Data table component



Dialog — native dialog element with focus trapping



Sizes: `sm` | `md` | `lg` | `full`. Two-way `open` binding.



```html

Open



  Confirm

  
Are you sure?


  

    Cancel

    Confirm

  



```



Dialog component



Divider — visual separator with optional label



Orientation: `horizontal` | `vertical`.



```html



```



Divider component



Drawer — side panel using native dialog with focus trapping



Positions: `left` | `right` | `top` | `bottom`. Sizes: `sm` | `md` | `lg` | `full`. Two-way `open` binding.



```html

Open



  Details

  
Drawer body content…


  

    Cancel

    Save

  



```



Drawer component



Dropdown — select with ControlValueAccessor and keyboard navigation



Arrow keys, Enter/Space to select, Escape to close. Sizes: `sm` | `md` | `lg`.



```html



```



Dropdown component



Eagami Wordmark — branded logo wordmark linking to eagami.com



Variants: `logo` (icon only) | `signature` (handcrafted by eagami) | `brand` (eagami with tagline). Three discrete sizes (`sm`, `md`, `lg`) scale both the logo and the text proportionally.



```html



```



Eagami Wordmark component



Input — text field with ControlValueAccessor and password toggle



Types: `text` | `email` | `password` | `number` | `search` | `tel` | `url`. Sizes: `sm` | `md` | `lg`.



```html



```



Input component



Menu — popup action menu with trigger slot and menu items



Placements: `bottom-start` | `bottom-end` | `top-start` | `top-end`. Menu items support icons, disabled state, and a `danger` variant. Closes on outside click or Escape.



```html



  Actions

  

    

    Edit

  

  

    

    Delete

  



```



Menu component



Paginator — page navigation with configurable page sizes



Placement: `left` | `center` | `right`. Emits `pageChange` events with current page, page size, and total.



```html



```



Paginator component



Progress Bar — determinate and indeterminate linear indicator



Variants: `default` | `success` | `warning` | `error` | `info`. Sizes: `sm` | `md` | `lg`. Optional `label` and `showValue` display.



```html



```



Progress bar component



Radio Group — composite pattern with ControlValueAccessor



Supports `vertical` and `horizontal` orientation. Sizes: `sm` | `md` | `lg`.



```html



  

  

  



```



Radio group component



Skeleton — loading placeholder with animated pulse



Variants: `text` | `circle` | `rect`. Custom `width` and `height`. Respects `prefers-reduced-motion`.



```html



```



Skeleton component



Spinner — SVG loading indicator with accessible role



Sizes: `sm` | `md` | `lg`.



```html



```



Spinner component



Switch — toggle with ControlValueAccessor



Sizes: `sm` | `md` | `lg`.



```html



```



Switch component



Tabs — tab navigation with keyboard support



Variants: `underline` | `filled`. Sizes: `sm` | `md` | `lg`.



```html



  Account content

  Security content



```



Tabs component



Tag — inline label with optional remove button



Variants: `default` | `primary` | `success` | `warning` | `error` | `info`. Sizes: `sm` | `md` | `lg`.



```html

TypeScript

Active

```



Tag component



Textarea — multiline text with ControlValueAccessor



Mirrors the Input API. Configurable `rows`, `resize` (`none` | `vertical` | `horizontal` | `both`), and `maxlength`.



```html



```



Textarea component



Toast — notification system via injectable ToastService



Variants: `default` | `success` | `warning` | `error` | `info`. Auto-dismiss with configurable duration. Full-width on mobile, independent widths on desktop.



```typescript

import { ToastService } from '@eagami/ui';



export class MyComponent {

  private toast = inject(ToastService);



  save() {

    this.toast.success('Changes saved');

  }



  handleError() {

    this.toast.error('Something went wrong');

  }

}

```



Add the toast outlet once in your root template:



```html



```



Toast component



Tooltip — positioned tooltip on hover and focus



Positions: `top` | `bottom` | `left` | `right`.



```html

Save

```



Tooltip component



## Icons



52 built-in SVG icon components — Feather-style (24x24, stroke-based, inherits currentColor)



| Tag | Preview |

|---|---|

| `` | alert-circle |

| `` | alert-triangle |

| `` | apple |

| `` | arrow-down |

| `` | arrow-left |

| `` | arrow-right |

| `` | arrow-up |

| `` | bell |

| `` | calendar |

| `` | camera |

| `` | check |

| `` | check-circle |

| `` | chevron-down |

| `` | chevron-left |

| `` | chevron-right |

| `` | chevron-up |

| `` | chevrons-up-down |

| `` | clock |

| `` | copy |

| `` | download |

| `` | eagami |

| `` | external-link |

| `` | eye |

| `` | eye-off |

| `` | facebook |

| `` | file |

| `` | filter |

| `` | github |

| `` | google |

| `` | heart |

| `` | image |

| `` | info |

| `` | link |

| `` | loader |

| `` | log-out |

| `` | mail |

| `` | menu |

| `` | microsoft |

| `` | minus |

| `` | more-horizontal |

| `` | pencil |

| `` | plus |

| `` | rotate-ccw |

| `` | search |

| `` | settings |

| `` | star |

| `` | trash |

| `` | upload |

| `` | user |

| `` | x |

| `` | x-circle |

| `` | x-twitter |



## Theming



All visual properties are controlled through CSS custom properties defined on `:root`. Override any token to customize the entire library:



```css

:root {

  --color-primary-600: #2563eb;

  --font-family-sans: 'Inter', sans-serif;

  --radius-md: 0.5rem;

}

```



Component-level overrides are available where useful:



```css

.my-card {

  --ea-card-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);

  --ea-button-font-weight: 600;

}

```



See [`src/styles/tokens/`](src/styles/tokens/) for the full token reference.



## Peer dependencies



| Package | Version |

|---------|---------|

| `@angular/common` | `^21.0.0` |

| `@angular/core` | `^21.0.0` |

| `@angular/forms` | `^21.0.0` |



## Development



```bash

pnpm install       # Install dependencies

pnpm sandbox       # Run sandbox dev app

pnpm storybook     # Run Storybook

pnpm test          # Run tests

pnpm build         # Build the library

pnpm lint          # Lint

```



## License



MIT