# louismazel/maz-ui architecture

> Architecture diagram of the GitHub repository louismazel/maz-ui, 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/louismazel/maz-ui
- Repository: https://github.com/louismazel/maz-ui
- Video tour (about a minute): https://gitdiagram.com/louismazel/maz-ui/video

## Overview

Maz UI is a Vue/Nuxt component library and toolkit. The main workflow is that an application installs the library, configures its provider/theme and optional plugins, then consumes components and supporting composables, directives, and helpers to build an interactive UI. The README also identifies themes, translations, icons, and Nuxt auto-imports as product capabilities. The supplied tree and excerpts are selective: paths and links for unsampled modules are kept broad, and unsupported implementation wiring is omitted.

Main entry points: [`packages/lib/src`](https://github.com/louismazel/maz-ui/tree/master/packages/lib/src) (UI Components), [`apps/vue-app/src/main.ts`](https://github.com/louismazel/maz-ui/blob/master/apps/vue-app/src/main.ts) (Vue App), [`packages/lib/src/composables`](https://github.com/louismazel/maz-ui/tree/master/packages/lib/src/composables) (Composables), [`apps/nuxt-app/src/app.vue`](https://github.com/louismazel/maz-ui/blob/master/apps/nuxt-app/src/app.vue) (Nuxt Example)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_integration["App Integration"]
  node_vue_app["Vue App<br/>[main.ts]"]
  node_nuxt_app["Nuxt Example<br/>[app.vue]"]
end

subgraph group_ui["UI Toolkit"]
  node_provider["UI Provider"]
  node_components["UI Components"]
  node_plugins["UI Plugins"]
  node_composables["Composables"]
  node_directives["Image Directives"]
  node_helpers["Helpers"]
end

subgraph group_shared["Shared Packages"]
  node_icons["Icon Package<br/>[index.ts]"]
  node_translations["Translations"]
  node_display_names["Display Names<br/>[useDisplayNames.ts]"]
  node_swipe["Swipe Handler<br/>[swipeHandler.ts]"]
end

subgraph group_theme["Theme System"]
  node_themes["Theme Package"]
  node_theme_state["Theme State<br/>[useTheme.ts]"]
  node_cookie["Cookie Storage<br/>[cookie-storage.ts]"]
end

subgraph group_search["Documentation Search"]
  node_docs["Documentation"]
  node_unified_search["Unified Search"]
  node_search_engine["Search Engine<br/>[SearchEngine.ts]"]
end

node_consumer(("Application Developer"))

node_consumer -->|"uses Vue"| node_vue_app
node_consumer -->|"uses Nuxt"| node_nuxt_app
node_vue_app -->|"configures"| node_provider
node_vue_app -->|"installs"| node_plugins
node_vue_app -->|"renders"| node_components
node_nuxt_app -.->|"auto-imports"| node_components
node_provider -->|"configures theme"| node_themes
node_provider -->|"configures locale"| node_translations
node_components -->|"uses"| node_composables
node_components -->|"uses"| node_directives
node_composables -->|"uses"| node_helpers
node_themes -->|"exposes"| node_theme_state
node_theme_state -.->|"persists mode"| node_cookie
node_icons -->|"provides icons"| node_components
node_composables -->|"includes"| node_display_names
node_helpers -->|"includes"| node_swipe
node_docs -->|"searches"| node_unified_search
node_unified_search -->|"indexes and queries"| node_search_engine

click node_vue_app "https://github.com/louismazel/maz-ui/blob/master/apps/vue-app/src/main.ts"
click node_nuxt_app "https://github.com/louismazel/maz-ui/blob/master/apps/nuxt-app/src/app.vue"
click node_provider "https://github.com/louismazel/maz-ui/tree/master/packages/lib/src"
click node_components "https://github.com/louismazel/maz-ui/tree/master/packages/lib/src"
click node_plugins "https://github.com/louismazel/maz-ui/tree/master/packages/lib/src"
click node_composables "https://github.com/louismazel/maz-ui/tree/master/packages/lib/src/composables"
click node_directives "https://github.com/louismazel/maz-ui/tree/master/packages/lib/src/directives"
click node_helpers "https://github.com/louismazel/maz-ui/tree/master/packages/utils/src"
click node_themes "https://github.com/louismazel/maz-ui/tree/master/packages/themes/src"
click node_theme_state "https://github.com/louismazel/maz-ui/blob/master/packages/themes/src/composables/useTheme.ts"
click node_cookie "https://github.com/louismazel/maz-ui/blob/master/packages/themes/src/utils/cookie-storage.ts"
click node_icons "https://github.com/louismazel/maz-ui/blob/master/packages/icons/src/index.ts"
click node_display_names "https://github.com/louismazel/maz-ui/blob/master/packages/lib/src/composables/useDisplayNames.ts"
click node_swipe "https://github.com/louismazel/maz-ui/blob/master/packages/utils/src/helpers/swipeHandler.ts"
click node_unified_search "https://github.com/louismazel/maz-ui/blob/master/packages/mcp/src/UnifiedSearchService.ts"
click node_search_engine "https://github.com/louismazel/maz-ui/blob/master/packages/mcp/src/SearchEngine.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_vue_app,node_nuxt_app toneBlue
class node_provider,node_components,node_plugins,node_composables,node_directives,node_helpers toneAmber
class node_icons,node_translations,node_display_names,node_swipe toneMint
class node_themes,node_theme_state,node_cookie toneRose
class node_docs,node_unified_search,node_search_engine,node_consumer toneIndigo
```

## Components

### App Integration

- [Vue App](https://github.com/louismazel/maz-ui/blob/master/apps/vue-app/src/main.ts): `apps/vue-app/src/main.ts`
- [Nuxt Example](https://github.com/louismazel/maz-ui/blob/master/apps/nuxt-app/src/app.vue): `apps/nuxt-app/src/app.vue`

### UI Toolkit

- [UI Provider](https://github.com/louismazel/maz-ui/tree/master/packages/lib/src): `packages/lib/src`
- [UI Components](https://github.com/louismazel/maz-ui/tree/master/packages/lib/src): `packages/lib/src`
- [UI Plugins](https://github.com/louismazel/maz-ui/tree/master/packages/lib/src): `packages/lib/src`
- [Composables](https://github.com/louismazel/maz-ui/tree/master/packages/lib/src/composables): `packages/lib/src/composables`
- [Image Directives](https://github.com/louismazel/maz-ui/tree/master/packages/lib/src/directives): `packages/lib/src/directives`
- [Helpers](https://github.com/louismazel/maz-ui/tree/master/packages/utils/src): `packages/utils/src`

### Shared Packages

- [Icon Package](https://github.com/louismazel/maz-ui/blob/master/packages/icons/src/index.ts): `packages/icons/src/index.ts`
- **Translations**
- [Display Names](https://github.com/louismazel/maz-ui/blob/master/packages/lib/src/composables/useDisplayNames.ts): `packages/lib/src/composables/useDisplayNames.ts`
- [Swipe Handler](https://github.com/louismazel/maz-ui/blob/master/packages/utils/src/helpers/swipeHandler.ts): `packages/utils/src/helpers/swipeHandler.ts`

### Theme System

- [Theme Package](https://github.com/louismazel/maz-ui/tree/master/packages/themes/src): `packages/themes/src`
- [Theme State](https://github.com/louismazel/maz-ui/blob/master/packages/themes/src/composables/useTheme.ts): `packages/themes/src/composables/useTheme.ts`
- [Cookie Storage](https://github.com/louismazel/maz-ui/blob/master/packages/themes/src/utils/cookie-storage.ts): `packages/themes/src/utils/cookie-storage.ts`

### Documentation Search

- **Documentation**
- [Unified Search](https://github.com/louismazel/maz-ui/blob/master/packages/mcp/src/UnifiedSearchService.ts): `packages/mcp/src/UnifiedSearchService.ts`
- [Search Engine](https://github.com/louismazel/maz-ui/blob/master/packages/mcp/src/SearchEngine.ts): `packages/mcp/src/SearchEngine.ts`

### Other components

- **Application Developer**

## Connections

- Application Developer → Vue App: uses Vue
- Application Developer → Nuxt Example: uses Nuxt
- Vue App → UI Provider: configures
- Vue App → UI Plugins: installs
- Vue App → UI Components: renders
- Nuxt Example → UI Components: auto-imports
- UI Provider → Theme Package: configures theme
- UI Provider → Translations: configures locale
- UI Components → Composables: uses
- UI Components → Image Directives: uses
- Composables → Helpers: uses
- Theme Package → Theme State: exposes
- Theme State → Cookie Storage: persists mode
- Icon Package → UI Components: provides icons
- Composables → Display Names: includes
- Helpers → Swipe Handler: includes
- Documentation → Unified Search: searches
- Unified Search → Search Engine: indexes and queries