# akveo/nebular architecture

> Architecture diagram of the GitHub repository akveo/nebular, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-28). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/akveo/nebular
- Repository: https://github.com/akveo/nebular

## Overview

Nebular is a customizable Angular UI library: application developers integrate its themed components and supporting services, and application users interact with those components. Its other principal capabilities are authentication strategies and security, runtime theming and Eva icons, and date utilities/adapters. The graph reflects documented capabilities and sampled authentication/search behavior; unsampled subsystem wiring is intentionally left out.

Main entry points: [`src/framework/theme/public_api.ts`](https://github.com/akveo/nebular/blob/master/src/framework/theme/public_api.ts) (UI component library), [`src/framework/auth/services/auth.service.ts`](https://github.com/akveo/nebular/blob/master/src/framework/auth/services/auth.service.ts) (Auth service), [`src/framework/theme/services/theme.service.ts`](https://github.com/akveo/nebular/blob/master/src/framework/theme/services/theme.service.ts) (Theme engine), [`src/framework/theme/services/js-themes-registry.service.ts`](https://github.com/akveo/nebular/blob/master/src/framework/theme/services/js-themes-registry.service.ts) (Theme registry)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_ui["Angular UI"]
  node_ui_package["UI component library<br/>[public_api.ts]"]
  node_controls["Form and input controls<br/>[input.module.ts]"]
  node_navigation["Navigation and layout<br/>[layout.module.ts]"]
  node_overlays["Overlays and feedback<br/>[overlay.module.ts]"]
  node_data_views["Data and date views"]
  node_search["Search events<br/>[search.service.ts]"]
end

subgraph group_theme["Themes and icons"]
  node_theme_engine["Theme engine<br/>[theme.service.ts]"]
  node_theme_registry["Theme registry"]
  node_visual_themes["Visual themes<br/>[default.theme.ts]"]
  node_eva_icons["Eva icons"]
end

subgraph group_identity["Auth and security"]
  node_auth_ui["Auth screens<br/>[auth.component.ts]"]
  node_auth_service["Auth service<br/>[auth.service.ts]"]
  node_strategies["Auth strategies<br/>[auth-strategy.ts]"]
  node_token_service["Token service<br/>[token.service.ts]"]
  node_token_storage[("Token storage<br/>[token-storage.ts]")]
  node_security["Access control<br/>[acl.service.ts]"]
end

subgraph group_date["Date utilities"]
  node_date_fns["date-fns adapter"]
  node_moment["Moment adapter"]
  node_calendar["Calendar services<br/>[date.service.ts]"]
end

node_developer(("App developer"))
node_app["Angular application"]
node_user(("Application user"))
node_sample_api["Sample auth API<br/>[app.js]"]

node_developer -->|"integrates library"| node_app
node_app -->|"uses components"| node_ui_package
node_user -->|"uses application"| node_app
node_ui_package -->|"provides controls"| node_controls
node_ui_package -->|"provides layout"| node_navigation
node_ui_package -->|"provides overlays"| node_overlays
node_ui_package -->|"provides views"| node_data_views
node_ui_package -->|"provides search"| node_search
node_app -->|"configures themes"| node_theme_engine
node_theme_engine -->|"reads themes"| node_theme_registry
node_theme_registry -->|"registers themes"| node_visual_themes
node_ui_package -->|"includes icon support"| node_eva_icons
node_app -->|"configures auth"| node_auth_ui
node_auth_ui -->|"invokes auth"| node_auth_service
node_auth_service -->|"selects strategy"| node_strategies
node_auth_service -->|"stores result token"| node_token_service
node_token_service -->|"reads and writes"| node_token_storage
node_app -->|"configures access"| node_security
node_strategies -.->|"calls sample endpoints"| node_sample_api
node_app -.->|"may use adapter"| node_date_fns
node_app -.->|"may use adapter"| node_moment
node_app -->|"uses date services"| node_calendar

click node_ui_package "https://github.com/akveo/nebular/blob/master/src/framework/theme/public_api.ts"
click node_controls "https://github.com/akveo/nebular/blob/master/src/framework/theme/components/input/input.module.ts"
click node_navigation "https://github.com/akveo/nebular/blob/master/src/framework/theme/components/layout/layout.module.ts"
click node_overlays "https://github.com/akveo/nebular/blob/master/src/framework/theme/components/cdk/overlay/overlay.module.ts"
click node_data_views "https://github.com/akveo/nebular/blob/master/src/framework/theme/components/tree-grid/tree-grid.module.ts"
click node_search "https://github.com/akveo/nebular/blob/master/src/framework/theme/components/search/search.service.ts"
click node_theme_engine "https://github.com/akveo/nebular/blob/master/src/framework/theme/services/theme.service.ts"
click node_theme_registry "https://github.com/akveo/nebular/blob/master/src/framework/theme/services/js-themes-registry.service.ts"
click node_visual_themes "https://github.com/akveo/nebular/blob/master/src/framework/theme/services/js-themes/default.theme.ts"
click node_eva_icons "https://github.com/akveo/nebular/blob/master/src/framework/eva-icons/eva-icons.module.ts"
click node_auth_ui "https://github.com/akveo/nebular/blob/master/src/framework/auth/components/auth.component.ts"
click node_auth_service "https://github.com/akveo/nebular/blob/master/src/framework/auth/services/auth.service.ts"
click node_strategies "https://github.com/akveo/nebular/blob/master/src/framework/auth/strategies/auth-strategy.ts"
click node_token_service "https://github.com/akveo/nebular/blob/master/src/framework/auth/services/token/token.service.ts"
click node_token_storage "https://github.com/akveo/nebular/blob/master/src/framework/auth/services/token/token-storage.ts"
click node_security "https://github.com/akveo/nebular/blob/master/src/framework/security/services/acl.service.ts"
click node_sample_api "https://github.com/akveo/nebular/blob/master/src/backend/app.js"
click node_date_fns "https://github.com/akveo/nebular/blob/master/src/framework/date-fns/services/date-fns-date.service.ts"
click node_moment "https://github.com/akveo/nebular/blob/master/src/framework/moment/services/moment-date.service.ts"
click node_calendar "https://github.com/akveo/nebular/blob/master/src/framework/theme/components/calendar-kit/services/date.service.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_ui_package,node_controls,node_navigation,node_overlays,node_data_views,node_search,node_user toneBlue
class node_theme_engine,node_theme_registry,node_visual_themes,node_eva_icons toneAmber
class node_auth_ui,node_auth_service,node_strategies,node_token_service,node_token_storage,node_security,node_sample_api toneMint
class node_date_fns,node_moment,node_calendar toneRose
class node_developer,node_app toneIndigo
```

## Components

### Angular UI

- [UI component library](https://github.com/akveo/nebular/blob/master/src/framework/theme/public_api.ts): `src/framework/theme/public_api.ts`
- [Form and input controls](https://github.com/akveo/nebular/blob/master/src/framework/theme/components/input/input.module.ts): `src/framework/theme/components/input/input.module.ts`
- [Navigation and layout](https://github.com/akveo/nebular/blob/master/src/framework/theme/components/layout/layout.module.ts): `src/framework/theme/components/layout/layout.module.ts`
- [Overlays and feedback](https://github.com/akveo/nebular/blob/master/src/framework/theme/components/cdk/overlay/overlay.module.ts): `src/framework/theme/components/cdk/overlay/overlay.module.ts`
- [Data and date views](https://github.com/akveo/nebular/blob/master/src/framework/theme/components/tree-grid/tree-grid.module.ts): `src/framework/theme/components/tree-grid/tree-grid.module.ts`
- [Search events](https://github.com/akveo/nebular/blob/master/src/framework/theme/components/search/search.service.ts): `src/framework/theme/components/search/search.service.ts`

### Themes and icons

- [Theme engine](https://github.com/akveo/nebular/blob/master/src/framework/theme/services/theme.service.ts): `src/framework/theme/services/theme.service.ts`
- [Theme registry](https://github.com/akveo/nebular/blob/master/src/framework/theme/services/js-themes-registry.service.ts): `src/framework/theme/services/js-themes-registry.service.ts`
- [Visual themes](https://github.com/akveo/nebular/blob/master/src/framework/theme/services/js-themes/default.theme.ts): `src/framework/theme/services/js-themes/default.theme.ts`
- [Eva icons](https://github.com/akveo/nebular/blob/master/src/framework/eva-icons/eva-icons.module.ts): `src/framework/eva-icons/eva-icons.module.ts`

### Auth and security

- [Auth screens](https://github.com/akveo/nebular/blob/master/src/framework/auth/components/auth.component.ts): `src/framework/auth/components/auth.component.ts`
- [Auth service](https://github.com/akveo/nebular/blob/master/src/framework/auth/services/auth.service.ts): `src/framework/auth/services/auth.service.ts`
- [Auth strategies](https://github.com/akveo/nebular/blob/master/src/framework/auth/strategies/auth-strategy.ts): `src/framework/auth/strategies/auth-strategy.ts`
- [Token service](https://github.com/akveo/nebular/blob/master/src/framework/auth/services/token/token.service.ts): `src/framework/auth/services/token/token.service.ts`
- [Token storage](https://github.com/akveo/nebular/blob/master/src/framework/auth/services/token/token-storage.ts): `src/framework/auth/services/token/token-storage.ts`
- [Access control](https://github.com/akveo/nebular/blob/master/src/framework/security/services/acl.service.ts): `src/framework/security/services/acl.service.ts`

### Date utilities

- [date-fns adapter](https://github.com/akveo/nebular/blob/master/src/framework/date-fns/services/date-fns-date.service.ts): `src/framework/date-fns/services/date-fns-date.service.ts`
- [Moment adapter](https://github.com/akveo/nebular/blob/master/src/framework/moment/services/moment-date.service.ts): `src/framework/moment/services/moment-date.service.ts`
- [Calendar services](https://github.com/akveo/nebular/blob/master/src/framework/theme/components/calendar-kit/services/date.service.ts): `src/framework/theme/components/calendar-kit/services/date.service.ts`

### Other components

- **App developer**
- **Angular application**
- **Application user**
- [Sample auth API](https://github.com/akveo/nebular/blob/master/src/backend/app.js): `src/backend/app.js`

## Connections

- App developer → Angular application: integrates library
- Angular application → UI component library: uses components
- Application user → Angular application: uses application
- UI component library → Form and input controls: provides controls
- UI component library → Navigation and layout: provides layout
- UI component library → Overlays and feedback: provides overlays
- UI component library → Data and date views: provides views
- UI component library → Search events: provides search
- Angular application → Theme engine: configures themes
- Theme engine → Theme registry: reads themes
- Theme registry → Visual themes: registers themes
- UI component library → Eva icons: includes icon support
- Angular application → Auth screens: configures auth
- Auth screens → Auth service: invokes auth
- Auth service → Auth strategies: selects strategy
- Auth service → Token service: stores result token
- Token service → Token storage: reads and writes
- Angular application → Access control: configures access
- Auth strategies → Sample auth API: calls sample endpoints
- Angular application → date-fns adapter: may use adapter
- Angular application → Moment adapter: may use adapter
- Angular application → Calendar services: uses date services