@eagami/ui is a lightweight, accessible Angular component library. Sensible defaults out of the box, with a fully customizable design to fit any brand.

Live documentation: eagami.com/ui

Design principles

• Accessible. Keyboard navigation, focus management, screen-reader support, and reduced-motion handling are built into every component.
• Lightweight. Each component imports independently and the bundle only ships what you use.
• Themeable. Fully customizable with design tokens while maintaining a unified look across every page. Light and dark variants ship together and default to the user's system preference.
• Localized. Built-in component text ships in English, French, Greek, Polish, and Spanish.
• Modern. Regularly updated with the latest Angular features and modern web standards.
• Unlocked. Every component is plain Angular and CSS with no vendor lock-in, so the source can be read, copied, or modified like any other code in your project.

Installation

npm install @eagami/ui
# or
pnpm add @eagami/ui
# or
yarn add @eagami/ui

Add the global stylesheet to your angular.json:

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

See the Setup page for fonts and your first component import.

What's included

• Form controls: Input, Textarea, Checkbox, Switch, Radio, Dropdown, Autocomplete, Date picker, Slider, Code input, Segmented, Avatar editor
• Overlays: Dialog, Drawer, Tooltip, Menu, Toast
• Navigation: Tabs, Breadcrumbs, Paginator, Accordion
• Display: Card, Badge, Tag, Alert, Avatar, Skeleton, Spinner, Progress bar, Empty state, Divider, Eagami wordmark, Data table

Full API and live demos at eagami.com/ui/components.

Icons

Standalone Angular components (<ea-icon-*>) that inherit their color and scale with font-size, so they render at any size. The library ships the full Feather Icons set (287 icons at their canonical slugs) by Cole Bemis, used under the MIT License, plus a set of original Eagami UI additions (basic shapes, household objects, the Eagami brand mark) and a small coloured brand-icon set for nominative use.

Each icon component exposes static readonly metadata so consumers can build catalogues, search indices, or doc tables without importing every icon:

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

GithubIconComponent.slug;     // 'github'
GithubIconComponent.category; // 'feather'
GithubIconComponent.isBrand;  // true
GithubIconComponent.tags;     // ['github', 'git', 'repository', ...]

The shape of this metadata is described by the exported IconCategory, IconMeta, and IconComponentType types. Every icon component extends the abstract IconComponentBase directive, which contributes the shared display: inline-flex; width: 1em; height: 1em host bindings.

For catalogue-style use cases, import the ICONS array (a slug-sorted, ReadonlyArray<IconComponentType> of every non-deprecated icon) and the iconDisplayName(iconOrSlug) helper that resolves the human-readable label with the correct casing for acronyms and brand marks (GitHub, npm, CodePen, X (Twitter), etc.). Importing ICONS pulls every icon into the bundle, so apps that only render a handful should keep importing the components they use directly.

See icons for the full set, per-brand guideline links, and a searchable filter.

Theming

Every visual property is a CSS custom property on :root, so overriding any token retunes the whole library. See design tokens for the full reference and theming examples.

Internationalization

Built-in strings ship in English, French (France), Greek, Polish, and Spanish (Spain), with runtime switching via EagamiI18nService. See internationalization for setup and per-string overrides.

Framework integration

@eagami/ui is Angular-only, but its design tokens are framework-agnostic. Copy-and-paste guides for non-Angular targets:

• eagami-ui-flutter.md for Flutter projects
• eagami-ui-react.md for React projects

Compatibility

| | | |---|---| | Angular | ^21.0.0 (peer dep) | | Node | >= 20 for build/dev tooling | | Browsers | Last 2 stable versions of Chrome, Edge, Firefox (plus current ESR), Safari |

Upgrading from v0.x? See MIGRATION.md.