@maz-ui/mcp 5.0.0 → 5.1.0-beta.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +61 -228
- package/bin/maz-ui-mcp.mjs +2 -5
- package/dist/cli.d.mts +7 -0
- package/dist/cli.d.ts +7 -0
- package/dist/cli.mjs +14 -0
- package/dist/index.d.mts +340 -0
- package/dist/index.d.ts +340 -0
- package/dist/index.mjs +14 -0
- package/dist/shared/mcp.DzqVbCaL.mjs +2346 -0
- package/docs/README.md +207 -0
- package/docs/agents/agents-md.md +52 -0
- package/docs/agents/claude-rule.md +52 -0
- package/docs/components/maz-accordion.md +76 -0
- package/docs/{src/components → components}/maz-alert.md +31 -164
- package/docs/components/maz-animated-counter.md +87 -0
- package/docs/components/maz-animated-element.md +46 -0
- package/docs/components/maz-animated-text.md +53 -0
- package/docs/components/maz-avatar.md +193 -0
- package/docs/components/maz-backdrop.md +178 -0
- package/docs/{src/components → components}/maz-badge.md +26 -67
- package/docs/components/maz-bottom-sheet.md +257 -0
- package/docs/{src/components → components}/maz-btn-group.md +26 -189
- package/docs/{src/components → components}/maz-btn.md +60 -245
- package/docs/components/maz-card-spotlight.md +84 -0
- package/docs/{src/components → components}/maz-card.md +67 -192
- package/docs/components/maz-carousel.md +153 -0
- package/docs/{src/components → components}/maz-chart.md +17 -161
- package/docs/components/maz-checkbox.md +138 -0
- package/docs/components/maz-checklist.md +251 -0
- package/docs/components/maz-circular-progress-bar.md +109 -0
- package/docs/{src/components → components}/maz-code-highlight.md +15 -93
- package/docs/components/maz-container.md +241 -0
- package/docs/{src/components → components}/maz-date-picker.md +85 -454
- package/docs/components/maz-dialog-confirm.md +215 -0
- package/docs/components/maz-dialog.md +143 -0
- package/docs/components/maz-drawer.md +106 -0
- package/docs/components/maz-dropdown.md +419 -0
- package/docs/{src/components → components}/maz-dropzone.md +80 -221
- package/docs/components/maz-expand-animation.md +82 -0
- package/docs/components/maz-fullscreen-loader.md +58 -0
- package/docs/components/maz-gallery.md +79 -0
- package/docs/{src/components → components}/maz-icon.md +32 -83
- package/docs/components/maz-input-code.md +73 -0
- package/docs/components/maz-input-number.md +79 -0
- package/docs/components/maz-input-phone-number.md +536 -0
- package/docs/components/maz-input-price.md +68 -0
- package/docs/components/maz-input-tags.md +112 -0
- package/docs/{src/components → components}/maz-input.md +74 -221
- package/docs/components/maz-lazy-img.md +113 -0
- package/docs/components/maz-link.md +146 -0
- package/docs/components/maz-loading-bar.md +38 -0
- package/docs/{src/components → components}/maz-markdown-editor.md +72 -125
- package/docs/components/maz-pagination.md +82 -0
- package/docs/components/maz-popover.md +794 -0
- package/docs/{src/components → components}/maz-pull-to-refresh.md +59 -45
- package/docs/components/maz-radio-buttons.md +313 -0
- package/docs/components/maz-radio.md +119 -0
- package/docs/{src/components → components}/maz-read-more.md +31 -122
- package/docs/components/maz-reading-progress-bar.md +96 -0
- package/docs/{src/components → components}/maz-select-country.md +80 -340
- package/docs/{src/components → components}/maz-select.md +76 -206
- package/docs/components/maz-sidebar-content.md +25 -0
- package/docs/components/maz-sidebar-footer.md +25 -0
- package/docs/components/maz-sidebar-group.md +27 -0
- package/docs/components/maz-sidebar-header.md +25 -0
- package/docs/components/maz-sidebar-menu-button.md +41 -0
- package/docs/components/maz-sidebar-menu-item.md +25 -0
- package/docs/components/maz-sidebar-menu-sub.md +32 -0
- package/docs/components/maz-sidebar-menu.md +25 -0
- package/docs/components/maz-sidebar-separator.md +21 -0
- package/docs/components/maz-sidebar-trigger.md +25 -0
- package/docs/{src/components → components}/maz-sidebar.md +117 -329
- package/docs/{src/components → components}/maz-skeleton.md +27 -156
- package/docs/{src/components → components}/maz-slider.md +33 -66
- package/docs/components/maz-spinner.md +84 -0
- package/docs/{src/components → components}/maz-stepper.md +43 -185
- package/docs/components/maz-switch.md +86 -0
- package/docs/components/maz-table-cell.md +27 -0
- package/docs/components/maz-table-row.md +28 -0
- package/docs/components/maz-table-title.md +27 -0
- package/docs/components/maz-table-virtualizer.md +31 -0
- package/docs/components/maz-table.md +426 -0
- package/docs/components/maz-tabs-bar.md +43 -0
- package/docs/components/maz-tabs-content-item.md +27 -0
- package/docs/components/maz-tabs-content.md +27 -0
- package/docs/{src/components → components}/maz-tabs.md +89 -126
- package/docs/components/maz-textarea.md +255 -0
- package/docs/components/maz-ticker.md +427 -0
- package/docs/components/maz-timeline.md +304 -0
- package/docs/components/maz-ui-provider.md +26 -0
- package/docs/{src/components → components}/maz-window-mockup.md +38 -105
- package/docs/composables/use-aos.md +41 -0
- package/docs/composables/use-breakpoints.md +42 -0
- package/docs/composables/use-dialog.md +58 -0
- package/docs/{src/composables → composables}/use-display-names.md +12 -59
- package/docs/{src/composables → composables}/use-drag.md +14 -68
- package/docs/{src/composables → composables}/use-form-validator.md +22 -696
- package/docs/{src/composables → composables}/use-idle-timeout.md +13 -97
- package/docs/{src/composables → composables}/use-pull-to-refresh.md +14 -7
- package/docs/{src/composables → composables}/use-reading-time.md +20 -56
- package/docs/composables/use-string-matching.md +41 -0
- package/docs/{src/composables → composables}/use-swipe.md +14 -81
- package/docs/{src/composables → composables}/use-timer.md +12 -38
- package/docs/composables/use-toast.md +50 -0
- package/docs/{src/composables → composables}/use-user-visibility.md +14 -56
- package/docs/composables/use-wait.md +50 -0
- package/docs/composables/use-window-size.md +25 -0
- package/docs/{src/directives → directives}/click-outside.md +13 -99
- package/docs/{src/directives → directives}/fullscreen-img.md +10 -28
- package/docs/{src/directives → directives}/lazy-img.md +14 -49
- package/docs/{src/directives → directives}/tooltip.md +12 -217
- package/docs/{src/directives → directives}/zoom-img.md +11 -38
- package/docs/{src/ecosystem → ecosystem}/eslint-config.md +37 -29
- package/docs/ecosystem/icons/icon-set.md +25 -0
- package/docs/{src/ecosystem → ecosystem}/icons/index.md +22 -16
- package/docs/ecosystem/mcp.md +165 -0
- package/docs/{src/ecosystem → ecosystem}/node/exec-promise.md +12 -6
- package/docs/ecosystem/node/index.md +53 -0
- package/docs/{src/ecosystem → ecosystem}/node/logger.md +12 -6
- package/docs/{src/ecosystem → ecosystem}/node/print-banner.md +12 -4
- package/docs/ecosystem/node/setup-agents.md +102 -0
- package/docs/{src/ecosystem → ecosystem}/nuxt.md +46 -19
- package/docs/{src/ecosystem → ecosystem}/stylelint-config.md +33 -25
- package/docs/{src/ecosystem → ecosystem}/themes.md +72 -235
- package/docs/{src/ecosystem → ecosystem}/translations.md +25 -23
- package/docs/ecosystem/utils/camel-case.md +37 -0
- package/docs/ecosystem/utils/capitalize.md +37 -0
- package/docs/{src/ecosystem → ecosystem}/utils/check-availability.md +14 -8
- package/docs/{src/ecosystem → ecosystem}/utils/cookie.md +18 -12
- package/docs/ecosystem/utils/country-code-to-unicode-flag.md +128 -0
- package/docs/{src/ecosystem → ecosystem}/utils/currency.md +12 -26
- package/docs/{src/ecosystem → ecosystem}/utils/date.md +10 -24
- package/docs/ecosystem/utils/debounce-callback.md +44 -0
- package/docs/{src/ecosystem → ecosystem}/utils/debounce-id.md +14 -8
- package/docs/{src/ecosystem → ecosystem}/utils/debounce.md +14 -8
- package/docs/ecosystem/utils/fetch-locale-ip.md +39 -0
- package/docs/{src/ecosystem → ecosystem}/utils/format-json.md +11 -5
- package/docs/{src/ecosystem → ecosystem}/utils/format-phone-number.md +12 -6
- package/docs/ecosystem/utils/get-browser-locale.md +35 -0
- package/docs/ecosystem/utils/get-country-flag-url.md +67 -0
- package/docs/{src/ecosystem → ecosystem}/utils/get-error-message.md +10 -4
- package/docs/{src/ecosystem → ecosystem}/utils/idle-timeout.md +15 -9
- package/docs/{src/ecosystem → ecosystem}/utils/index.md +10 -13
- package/docs/{src/ecosystem → ecosystem}/utils/is-client.md +11 -5
- package/docs/{src/ecosystem → ecosystem}/utils/is-equal.md +14 -8
- package/docs/{src/ecosystem → ecosystem}/utils/is-ios.md +12 -6
- package/docs/ecosystem/utils/is-server.md +37 -0
- package/docs/ecosystem/utils/is-standalone-mode.md +49 -0
- package/docs/{src/ecosystem → ecosystem}/utils/kebab-case.md +10 -4
- package/docs/{src/ecosystem → ecosystem}/utils/normalize-string.md +10 -4
- package/docs/{src/ecosystem → ecosystem}/utils/number.md +10 -24
- package/docs/{src/ecosystem → ecosystem}/utils/pascal-case.md +11 -5
- package/docs/{src/ecosystem → ecosystem}/utils/prevent-ios-input-zoom.md +14 -8
- package/docs/{src/ecosystem → ecosystem}/utils/script-loader.md +16 -8
- package/docs/{src/ecosystem → ecosystem}/utils/sleep.md +10 -4
- package/docs/{src/ecosystem → ecosystem}/utils/snake-case.md +10 -4
- package/docs/{src/ecosystem → ecosystem}/utils/swipe-handler.md +14 -8
- package/docs/{src/ecosystem → ecosystem}/utils/textarea-autogrow.md +12 -6
- package/docs/{src/ecosystem → ecosystem}/utils/throttle-id.md +13 -7
- package/docs/{src/ecosystem → ecosystem}/utils/throttle.md +14 -8
- package/docs/ecosystem/utils/truthy-filter.md +37 -0
- package/docs/{src/ecosystem → ecosystem}/utils/types/deep-key-of.md +11 -5
- package/docs/{src/ecosystem → ecosystem}/utils/types/deep-partial.md +10 -4
- package/docs/ecosystem/utils/types/deep-required.md +45 -0
- package/docs/ecosystem/utils/types/flatten-object-keys.md +50 -0
- package/docs/{src/ecosystem → ecosystem}/utils/types/generic-instance-type.md +10 -4
- package/docs/{src/ecosystem → ecosystem}/utils/types/infer-maybe-ref.md +10 -4
- package/docs/ecosystem/utils/upper-first.md +38 -0
- package/docs/{src/ecosystem → ecosystem}/utils/user-visibility.md +12 -6
- package/docs/guide/ai-agents.md +237 -0
- package/docs/{src/guide → guide}/browser-support.md +22 -15
- package/docs/{src/guide → guide}/getting-started.md +34 -139
- package/docs/{src/guide → guide}/global-defaults.md +12 -11
- package/docs/{src/guide → guide}/maz-ui-provider.md +17 -16
- package/docs/{src/guide → guide}/migration-v5.md +95 -88
- package/docs/{src/guide → guide}/resolvers.md +33 -100
- package/docs/guide/tailwind.md +483 -0
- package/docs/{src/guide → guide}/vue.md +33 -39
- package/docs/manifest.json +1 -0
- package/docs/{src/plugins → plugins}/aos.md +20 -55
- package/docs/{src/plugins → plugins}/dialog.md +14 -161
- package/docs/plugins/toast.md +221 -0
- package/docs/plugins/wait.md +78 -0
- package/docs/reference/icons.md +46 -0
- package/docs/reference/tailwind-tokens.md +191 -0
- package/docs/rules.md +57 -0
- package/package.json +84 -22
- package/dist/mcp.d.mts +0 -153
- package/dist/mcp.d.ts +0 -153
- package/dist/mcp.mjs +0 -1511
- package/docs/generated-docs/maz-accordion.doc.md +0 -21
- package/docs/generated-docs/maz-alert.doc.md +0 -20
- package/docs/generated-docs/maz-animated-counter.doc.md +0 -17
- package/docs/generated-docs/maz-animated-element.doc.md +0 -14
- package/docs/generated-docs/maz-animated-text.doc.md +0 -17
- package/docs/generated-docs/maz-avatar.doc.md +0 -45
- package/docs/generated-docs/maz-backdrop.doc.md +0 -55
- package/docs/generated-docs/maz-badge.doc.md +0 -16
- package/docs/generated-docs/maz-bottom-sheet.doc.md +0 -24
- package/docs/generated-docs/maz-btn-group.doc.md +0 -20
- package/docs/generated-docs/maz-btn.doc.md +0 -33
- package/docs/generated-docs/maz-card-spotlight.doc.md +0 -16
- package/docs/generated-docs/maz-card.doc.md +0 -39
- package/docs/generated-docs/maz-carousel.doc.md +0 -17
- package/docs/generated-docs/maz-chart.doc.md +0 -10
- package/docs/generated-docs/maz-checkbox.doc.md +0 -33
- package/docs/generated-docs/maz-checklist.doc.md +0 -30
- package/docs/generated-docs/maz-circular-progress-bar.doc.md +0 -27
- package/docs/generated-docs/maz-code-highlight.doc.md +0 -11
- package/docs/generated-docs/maz-container.doc.md +0 -26
- package/docs/generated-docs/maz-date-picker.doc.md +0 -56
- package/docs/generated-docs/maz-dialog-confirm.doc.md +0 -24
- package/docs/generated-docs/maz-dialog.doc.md +0 -22
- package/docs/generated-docs/maz-drawer.doc.md +0 -25
- package/docs/generated-docs/maz-dropdown.doc.md +0 -45
- package/docs/generated-docs/maz-dropzone.doc.md +0 -82
- package/docs/generated-docs/maz-expand-animation.doc.md +0 -12
- package/docs/generated-docs/maz-fullscreen-loader.doc.md +0 -13
- package/docs/generated-docs/maz-gallery.doc.md +0 -17
- package/docs/generated-docs/maz-icon.doc.md +0 -16
- package/docs/generated-docs/maz-input-code.doc.md +0 -25
- package/docs/generated-docs/maz-input-number.doc.md +0 -33
- package/docs/generated-docs/maz-input-phone-number.doc.md +0 -62
- package/docs/generated-docs/maz-input-price.doc.md +0 -26
- package/docs/generated-docs/maz-input-tags.doc.md +0 -24
- package/docs/generated-docs/maz-input.doc.md +0 -54
- package/docs/generated-docs/maz-lazy-img.doc.md +0 -49
- package/docs/generated-docs/maz-link.doc.md +0 -31
- package/docs/generated-docs/maz-loading-bar.doc.md +0 -6
- package/docs/generated-docs/maz-markdown-editor.doc.md +0 -65
- package/docs/generated-docs/maz-pagination.doc.md +0 -21
- package/docs/generated-docs/maz-popover.doc.md +0 -79
- package/docs/generated-docs/maz-pull-to-refresh.doc.md +0 -50
- package/docs/generated-docs/maz-radio-buttons.doc.md +0 -34
- package/docs/generated-docs/maz-radio.doc.md +0 -33
- package/docs/generated-docs/maz-read-more.doc.md +0 -18
- package/docs/generated-docs/maz-reading-progress-bar.doc.md +0 -18
- package/docs/generated-docs/maz-select-country.doc.md +0 -45
- package/docs/generated-docs/maz-select.doc.md +0 -32
- package/docs/generated-docs/maz-sidebar-content.doc.md +0 -5
- package/docs/generated-docs/maz-sidebar-footer.doc.md +0 -5
- package/docs/generated-docs/maz-sidebar-group.doc.md +0 -11
- package/docs/generated-docs/maz-sidebar-header.doc.md +0 -5
- package/docs/generated-docs/maz-sidebar-menu-button.doc.md +0 -27
- package/docs/generated-docs/maz-sidebar-menu-item.doc.md +0 -5
- package/docs/generated-docs/maz-sidebar-menu-sub.doc.md +0 -16
- package/docs/generated-docs/maz-sidebar-menu.doc.md +0 -5
- package/docs/generated-docs/maz-sidebar-separator.doc.md +0 -0
- package/docs/generated-docs/maz-sidebar-trigger.doc.md +0 -5
- package/docs/generated-docs/maz-sidebar.doc.md +0 -36
- package/docs/generated-docs/maz-skeleton.doc.md +0 -12
- package/docs/generated-docs/maz-slider.doc.md +0 -20
- package/docs/generated-docs/maz-spinner.doc.md +0 -6
- package/docs/generated-docs/maz-stepper.doc.md +0 -30
- package/docs/generated-docs/maz-switch.doc.md +0 -31
- package/docs/generated-docs/maz-table-cell.doc.md +0 -5
- package/docs/generated-docs/maz-table-row.doc.md +0 -12
- package/docs/generated-docs/maz-table-title.doc.md +0 -5
- package/docs/generated-docs/maz-table-virtualizer.doc.md +0 -20
- package/docs/generated-docs/maz-table.doc.md +0 -72
- package/docs/generated-docs/maz-tabs-bar.doc.md +0 -29
- package/docs/generated-docs/maz-tabs-content-item.doc.md +0 -11
- package/docs/generated-docs/maz-tabs-content.doc.md +0 -5
- package/docs/generated-docs/maz-tabs.doc.md +0 -20
- package/docs/generated-docs/maz-textarea.doc.md +0 -46
- package/docs/generated-docs/maz-ticker.doc.md +0 -25
- package/docs/generated-docs/maz-timeline.doc.md +0 -32
- package/docs/generated-docs/maz-ui-provider.doc.md +0 -12
- package/docs/generated-docs/maz-window-mockup.doc.md +0 -23
- package/docs/src/blog/v4.md +0 -276
- package/docs/src/blog/v5.md +0 -184
- package/docs/src/changelog.md +0 -7
- package/docs/src/components/index.md +0 -8
- package/docs/src/components/maz-accordion.md +0 -80
- package/docs/src/components/maz-animated-counter.md +0 -124
- package/docs/src/components/maz-animated-element.md +0 -36
- package/docs/src/components/maz-animated-text.md +0 -36
- package/docs/src/components/maz-avatar.md +0 -227
- package/docs/src/components/maz-backdrop.md +0 -250
- package/docs/src/components/maz-bottom-sheet.md +0 -533
- package/docs/src/components/maz-card-spotlight.md +0 -163
- package/docs/src/components/maz-carousel.md +0 -231
- package/docs/src/components/maz-checkbox.md +0 -168
- package/docs/src/components/maz-checklist.md +0 -414
- package/docs/src/components/maz-circular-progress-bar.md +0 -145
- package/docs/src/components/maz-container.md +0 -363
- package/docs/src/components/maz-dialog-confirm.md +0 -240
- package/docs/src/components/maz-dialog.md +0 -164
- package/docs/src/components/maz-drawer.md +0 -181
- package/docs/src/components/maz-dropdown.md +0 -691
- package/docs/src/components/maz-expand-animation.md +0 -99
- package/docs/src/components/maz-fullscreen-loader.md +0 -58
- package/docs/src/components/maz-gallery.md +0 -85
- package/docs/src/components/maz-input-code.md +0 -61
- package/docs/src/components/maz-input-number.md +0 -81
- package/docs/src/components/maz-input-phone-number.md +0 -942
- package/docs/src/components/maz-input-price.md +0 -67
- package/docs/src/components/maz-input-tags.md +0 -114
- package/docs/src/components/maz-lazy-img.md +0 -88
- package/docs/src/components/maz-link.md +0 -178
- package/docs/src/components/maz-loading-bar.md +0 -26
- package/docs/src/components/maz-pagination.md +0 -79
- package/docs/src/components/maz-popover.md +0 -1416
- package/docs/src/components/maz-radio-buttons.md +0 -462
- package/docs/src/components/maz-radio.md +0 -142
- package/docs/src/components/maz-reading-progress-bar.md +0 -74
- package/docs/src/components/maz-spinner.md +0 -93
- package/docs/src/components/maz-switch.md +0 -92
- package/docs/src/components/maz-table.md +0 -732
- package/docs/src/components/maz-textarea.md +0 -400
- package/docs/src/components/maz-ticker.md +0 -692
- package/docs/src/components/maz-timeline.md +0 -478
- package/docs/src/composables/use-aos.md +0 -34
- package/docs/src/composables/use-breakpoints.md +0 -35
- package/docs/src/composables/use-dialog.md +0 -88
- package/docs/src/composables/use-string-matching.md +0 -63
- package/docs/src/composables/use-toast.md +0 -71
- package/docs/src/composables/use-wait.md +0 -62
- package/docs/src/composables/use-window-size.md +0 -18
- package/docs/src/ecosystem/icons/icon-set.md +0 -123
- package/docs/src/ecosystem/mcp.md +0 -210
- package/docs/src/ecosystem/node/index.md +0 -53
- package/docs/src/ecosystem/utils/camel-case.md +0 -31
- package/docs/src/ecosystem/utils/capitalize.md +0 -50
- package/docs/src/ecosystem/utils/country-code-to-unicode-flag.md +0 -213
- package/docs/src/ecosystem/utils/debounce-callback.md +0 -38
- package/docs/src/ecosystem/utils/fetch-locale-ip.md +0 -33
- package/docs/src/ecosystem/utils/get-browser-locale.md +0 -29
- package/docs/src/ecosystem/utils/get-country-flag-url.md +0 -156
- package/docs/src/ecosystem/utils/is-server.md +0 -31
- package/docs/src/ecosystem/utils/is-standalone-mode.md +0 -43
- package/docs/src/ecosystem/utils/truthy-filter.md +0 -31
- package/docs/src/ecosystem/utils/types/deep-required.md +0 -39
- package/docs/src/ecosystem/utils/types/flatten-object-keys.md +0 -44
- package/docs/src/ecosystem/utils/upper-first.md +0 -32
- package/docs/src/guide/cli.md +0 -144
- package/docs/src/guide/migration-v4.md +0 -925
- package/docs/src/guide/tailwind.md +0 -158
- package/docs/src/index.md +0 -603
- package/docs/src/made-with-maz-ui.md +0 -58
- package/docs/src/plugins/toast.md +0 -349
- package/docs/src/plugins/wait.md +0 -109
- package/docs/src/theme-editor.md +0 -21
|
@@ -0,0 +1,237 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: "AI agents"
|
|
3
|
+
description: "Make Claude Code, Cursor, GitHub Copilot, Codex and the other AI coding agents use maz-ui and its ecosystem instead of re-implementing it - project rules, MCP server, version-matched docs, llms.txt and automatic code review."
|
|
4
|
+
package: "maz-ui"
|
|
5
|
+
url: "https://maz-ui.com/guide/ai-agents"
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
# AI agents
|
|
9
|
+
|
|
10
|
+
> Make Claude Code, Cursor, GitHub Copilot, Codex and the other AI coding agents use maz-ui and its ecosystem instead of re-implementing it - project rules, MCP server, version-matched docs, llms.txt and automatic code review.
|
|
11
|
+
|
|
12
|
+
- Package: `maz-ui`
|
|
13
|
+
- Web: https://maz-ui.com/guide/ai-agents
|
|
14
|
+
|
|
15
|
+
## Why
|
|
16
|
+
|
|
17
|
+
Left alone, coding agents rebuild what maz-ui already provides: native buttons instead of `MazBtn`, lodash instead of `@maz-ui/utils`, inline SVG instead of `@maz-ui/icons`, `bg-blue-500` instead of the theme colors. They also guess APIs from outdated training data.
|
|
18
|
+
|
|
19
|
+
maz-ui gives them four things:
|
|
20
|
+
|
|
21
|
+
| | What | Where |
|
|
22
|
+
| --- | --- | --- |
|
|
23
|
+
| **Rules** | How to use maz-ui in your project, loaded automatically by the agent | `.claude/rules/maz-ui.md`, `AGENTS.md` |
|
|
24
|
+
| **Version-matched docs** | Agent-ready markdown of the installed version: guides, component APIs, icons, Tailwind tokens | `node_modules/maz-ui/docs/` |
|
|
25
|
+
| **MCP server** | Search by need, exact component APIs, icons, theme tokens, setup guides, code review | `npx @maz-ui/mcp` |
|
|
26
|
+
| **Code review** | Static checks against the real maz-ui APIs, in the agent loop and in CI | `review_code` tool, `npx @maz-ui/mcp review` |
|
|
27
|
+
|
|
28
|
+
## Quick start
|
|
29
|
+
|
|
30
|
+
Run this command at the root of your project:
|
|
31
|
+
|
|
32
|
+
```bash
|
|
33
|
+
npx @maz-ui/mcp init
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
It detects the agents you use and configures them, using the docs of the maz-ui version installed in the project:
|
|
37
|
+
|
|
38
|
+
| Agent | Rules | MCP server |
|
|
39
|
+
| --- | --- | --- |
|
|
40
|
+
| Claude Code | `.claude/rules/maz-ui.md` (always loaded) | `.mcp.json` |
|
|
41
|
+
| Cursor | `AGENTS.md` | `.cursor/mcp.json` |
|
|
42
|
+
| GitHub Copilot (VS Code) | `AGENTS.md` | `.vscode/mcp.json` |
|
|
43
|
+
| Codex, Windsurf, Zed, Gemini CLI... | `AGENTS.md` | global config of the agent (see [MCP](../ecosystem/mcp.md)) |
|
|
44
|
+
|
|
45
|
+
When no agent is detected, it configures Claude Code and `AGENTS.md`. Commit the generated files: your whole team and your CI agents get them.
|
|
46
|
+
|
|
47
|
+
**Tip: It never overwrites your own instructions**
|
|
48
|
+
|
|
49
|
+
- Your `CLAUDE.md` is never touched: Claude Code loads `.claude/rules/maz-ui.md` on top of it.
|
|
50
|
+
- In `AGENTS.md`, maz-ui only manages the section between `<!-- BEGIN:maz-ui -->` and `<!-- END:maz-ui -->`.
|
|
51
|
+
- In the MCP config files, only the `maz-ui` entry is added, the formatting and comments of the file are preserved. An existing server running `@maz-ui/mcp` under another name is kept as is.
|
|
52
|
+
- A file you created yourself with the same path is never overwritten.
|
|
53
|
+
|
|
54
|
+
### Options
|
|
55
|
+
|
|
56
|
+
```bash
|
|
57
|
+
npx @maz-ui/mcp init --targets claude,agents-md,cursor,vscode # choose the agents
|
|
58
|
+
npx @maz-ui/mcp init --no-rules # MCP server only
|
|
59
|
+
npx @maz-ui/mcp init --no-mcp # rules only
|
|
60
|
+
npx @maz-ui/mcp init --dry-run # show the changes
|
|
61
|
+
npx @maz-ui/mcp init --remove # remove everything init added
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
Run it again after upgrading maz-ui: the rules follow the installed version.
|
|
65
|
+
|
|
66
|
+
### Nuxt: connected by default
|
|
67
|
+
|
|
68
|
+
With [`@maz-ui/nuxt`](../ecosystem/nuxt.md), the agents detected in the project are connected to the maz-ui MCP server when you start the dev server: the module only adds the `maz-ui` entry to their MCP config (`.mcp.json`, `.cursor/mcp.json`, `.vscode/mcp.json`). The instructions of the MCP server already give the maz-ui rules to the agents, so no rule file is written by default.
|
|
69
|
+
|
|
70
|
+
```ts
|
|
71
|
+
export default defineNuxtConfig({
|
|
72
|
+
modules: ['@maz-ui/nuxt'],
|
|
73
|
+
mazUi: {
|
|
74
|
+
// default: { rules: false, mcp: true }
|
|
75
|
+
agents: {
|
|
76
|
+
rules: true, // also write .claude/rules/maz-ui.md and the AGENTS.md section
|
|
77
|
+
targets: ['claude', 'agents-md'], // default: the detected agents
|
|
78
|
+
},
|
|
79
|
+
// or disable it: agents: false
|
|
80
|
+
},
|
|
81
|
+
})
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
It only runs in development (never in CI, in tests or during builds), writes nothing when no agent is detected, keeps the files in sync with the installed maz-ui version and never overwrites files it does not own.
|
|
85
|
+
|
|
86
|
+
### Without any file in the project
|
|
87
|
+
|
|
88
|
+
The MCP server carries the rules in its instructions: registering it once for your user is enough, in every project, without writing anything in them.
|
|
89
|
+
|
|
90
|
+
- Claude Code: install the plugin, or run `claude mcp add maz-ui --scope user -- npx -y @maz-ui/mcp@latest`.
|
|
91
|
+
- Cursor, Windsurf, Codex...: add the server to the global MCP config of the agent (see [MCP](../ecosystem/mcp.md#configuration)).
|
|
92
|
+
|
|
93
|
+
Write the project files (`init`, the Nuxt option) when your whole team, or agents without MCP, need the rules.
|
|
94
|
+
|
|
95
|
+
## Version-matched docs
|
|
96
|
+
|
|
97
|
+
Each `maz-ui` release ships its documentation for agents in `node_modules/maz-ui/docs/`:
|
|
98
|
+
|
|
99
|
+
```txt
|
|
100
|
+
node_modules/maz-ui/docs/
|
|
101
|
+
├── README.md # index of every page, start here
|
|
102
|
+
├── rules.md # the rules below
|
|
103
|
+
├── manifest.json # machine-readable index, component APIs, icons, tokens
|
|
104
|
+
├── components/maz-btn.md # usage, examples and full API of each component
|
|
105
|
+
├── composables/ directives/ plugins/ guide/
|
|
106
|
+
├── ecosystem/ # themes, translations, icons, nuxt, utils, node...
|
|
107
|
+
└── reference/
|
|
108
|
+
├── tailwind-tokens.md # every Tailwind class and CSS variable of the theme
|
|
109
|
+
└── icons.md # the 860+ icon names
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
The pages are the ones of this website, cleaned for agents: no live demos, every example as code, and the full API of each component (props with their accepted values, `v-model`, events, slots) generated from the TypeScript sources.
|
|
113
|
+
|
|
114
|
+
Agents read the docs of **your** version, not what they remember from their training data. The MCP server serves the same files.
|
|
115
|
+
|
|
116
|
+
## MCP server
|
|
117
|
+
|
|
118
|
+
The MCP server gives agents tools that work with the needs they have, and verify their code:
|
|
119
|
+
|
|
120
|
+
| Tool | Purpose |
|
|
121
|
+
| --- | --- |
|
|
122
|
+
| `search_docs` | Find what maz-ui provides for a need ("confirm before delete", "phone input", "debounce search") |
|
|
123
|
+
| `get_component_api` | Exact props, values, events, slots of up to 10 components |
|
|
124
|
+
| `find_icons` | Icons by meaning ("delete", "settings", "france flag") with their imports |
|
|
125
|
+
| `get_theme_tokens` | Every Tailwind class and CSS variable of the theme |
|
|
126
|
+
| `get_doc` | Any page of the docs, or only some sections |
|
|
127
|
+
| `list_docs` | The whole catalog |
|
|
128
|
+
| `get_setup_guide` | Installation in a Vue or Nuxt app, with or without Tailwind |
|
|
129
|
+
| `review_code` | Review files against the installed maz-ui |
|
|
130
|
+
|
|
131
|
+
See [MCP](../ecosystem/mcp.md) for the configuration of each agent.
|
|
132
|
+
|
|
133
|
+
## Claude Code plugin
|
|
134
|
+
|
|
135
|
+
The maz-ui plugin bundles the MCP server, a `maz-ui` skill (rules and workflow) and a hook that reviews every `.vue`, `.ts` and `.css` file Claude edits, so it fixes maz-ui mistakes before you see them.
|
|
136
|
+
|
|
137
|
+
```txt
|
|
138
|
+
/plugin marketplace add LouisMazel/maz-ui
|
|
139
|
+
/plugin install maz-ui@maz-ui
|
|
140
|
+
```
|
|
141
|
+
|
|
142
|
+
The plugin works in every project, `init` configures one project for your whole team: use both or either.
|
|
143
|
+
|
|
144
|
+
## Code review in CI
|
|
145
|
+
|
|
146
|
+
The checks of `review_code` are also available from the command line:
|
|
147
|
+
|
|
148
|
+
```bash
|
|
149
|
+
npx @maz-ui/mcp review "src/**/*.{vue,ts,css}"
|
|
150
|
+
npx @maz-ui/mcp review app --min-severity warning --max-warnings 0
|
|
151
|
+
npx @maz-ui/mcp review src --format json
|
|
152
|
+
```
|
|
153
|
+
|
|
154
|
+
The command exits with an error code when it finds errors (or more warnings than `--max-warnings`).
|
|
155
|
+
|
|
156
|
+
| Rule | Severity | Detects |
|
|
157
|
+
| --- | --- | --- |
|
|
158
|
+
| `unknown-component` | error | `<MazButton>` (did you mean `MazBtn`?) |
|
|
159
|
+
| `unknown-prop` | warning | A prop the component does not have (`colour`) |
|
|
160
|
+
| `invalid-prop-value` | error | `color="red"` on a component that accepts `primary`, `secondary`... |
|
|
161
|
+
| `boolean-prop-string` | error | `disabled="false"` (a truthy string) |
|
|
162
|
+
| `unknown-model`, `unknown-event`, `unknown-slot` | error | `v-model:foo`, `@clik`, `<template #captions>` |
|
|
163
|
+
| `unknown-icon` | error | An icon that does not exist in `@maz-ui/icons` |
|
|
164
|
+
| `prefer-maz-component` | warning | `<button>`, `<input>`, `<select>`, `<textarea>`, `<dialog>`... |
|
|
165
|
+
| `inline-svg` | warning | SVG icons written inline |
|
|
166
|
+
| `prefer-ecosystem`, `prefer-utils` | warning / info | lodash, VueUse, toast, icon, tooltip, date picker... libraries that maz-ui already covers |
|
|
167
|
+
| `theme-colors` | warning | Default Tailwind palette (`bg-blue-500`, `text-gray-600`, `bg-white`) |
|
|
168
|
+
| `hardcoded-color` | warning | `bg-[#1d90ff]`, `color: #fff` |
|
|
169
|
+
| `internal-prefix` | error | The internal `maz:` prefix |
|
|
170
|
+
| `tailwind-v3` | warning | `bg-opacity-50`, `flex-shrink-0`... |
|
|
171
|
+
| `missing-reference` | error | `@apply` in a SFC style block without `@reference` |
|
|
172
|
+
| `manual-dark-mode` | warning | Dark mode handled by hand instead of `useTheme()` |
|
|
173
|
+
| `root-import`, `internal-import` | error | Runtime imports from `maz-ui` (types only) or from `src`/`dist` |
|
|
174
|
+
| `nuxt-auto-import` | info | Imports that `@maz-ui/nuxt` already auto-imports |
|
|
175
|
+
|
|
176
|
+
When something is intended, ignore it with a comment on the line above (`<!-- maz-ui-review-ignore prefer-maz-component -->`, `// maz-ui-review-ignore theme-colors`), or `maz-ui-review-ignore-file` for a whole file.
|
|
177
|
+
|
|
178
|
+
## llms.txt
|
|
179
|
+
|
|
180
|
+
The documentation is also published for agents that browse the web:
|
|
181
|
+
|
|
182
|
+
- [maz-ui.com/llms.txt](https://maz-ui.com/llms.txt): index of every page
|
|
183
|
+
- [maz-ui.com/llms-full.txt](https://maz-ui.com/llms-full.txt): the whole documentation in one file
|
|
184
|
+
- Each page as markdown: `https://maz-ui.com/components/maz-btn.md`
|
|
185
|
+
|
|
186
|
+
## The rules
|
|
187
|
+
|
|
188
|
+
This is what `init`, the Nuxt option, the Claude Code plugin and the MCP server teach to your agents:
|
|
189
|
+
|
|
190
|
+
This project is built with **maz-ui** and its ecosystem (`@maz-ui/themes`, `@maz-ui/icons`, `@maz-ui/utils`, `@maz-ui/translations`, `@maz-ui/nuxt`). Reuse what it provides instead of re-implementing it: most UI elements, helpers, icons and styles you need already exist.
|
|
191
|
+
|
|
192
|
+
### Look it up before you write it
|
|
193
|
+
|
|
194
|
+
Before creating a component, composable, helper, icon or style, check what maz-ui offers:
|
|
195
|
+
|
|
196
|
+
- **MCP server `maz-ui`** (when available): `search_docs` (describe the need: "confirm before delete", "phone input"), `get_component_api` (exact props, events, slots), `find_icons`, `get_theme_tokens` (Tailwind classes), `get_doc`, `review_code`.
|
|
197
|
+
- **Version-matched docs** in `node_modules/maz-ui/docs/` (start with `README.md`; in a monorepo, resolve `maz-ui` from the app package). Read the relevant page before using an API.
|
|
198
|
+
|
|
199
|
+
Never guess an API: only use props, events, slots and imports that are documented.
|
|
200
|
+
|
|
201
|
+
### Components
|
|
202
|
+
|
|
203
|
+
- Use `Maz*` components instead of native elements or hand-made widgets: `MazBtn` (not `<button>`), `MazInput`, `MazSelect`, `MazCheckbox`, `MazSwitch`, `MazTextarea`, `MazDialog`, `MazDialogConfirm`, `MazDrawer`, `MazBottomSheet`, `MazPopover`, `MazDropdown`, `MazTabs`, `MazTable`, `MazCard`, `MazAvatar`, `MazBadge`, `MazAlert`, `MazSkeleton`, `MazSpinner`, `MazDatePicker`, `MazInputPhoneNumber`, `MazDropzone`, `MazStepper`, `MazSidebar`, `MazPagination`...
|
|
204
|
+
- Prop values are typed: colors are `primary | secondary | accent | info | success | warning | destructive | contrast | transparent` (plus `surface` on some components), sizes `mini | xs | sm | md | lg | xl`.
|
|
205
|
+
- Feedback and overlays: `useToast()` for notifications, `useDialog()` or `MazDialogConfirm` for confirmations, `useWait()` for loading states.
|
|
206
|
+
- Forms: `useFormValidator` / `useFormField` with your Standard Schema library (Zod, Valibot, ArkType).
|
|
207
|
+
|
|
208
|
+
### Icons
|
|
209
|
+
|
|
210
|
+
Use `@maz-ui/icons` (860+ icons: `MazTrash`, `MazXMark`, `MazMagnifyingGlass`, `MazFlagFR`, `MazLogoVue`...). Never inline SVG or add another icon library. Pass icon components to icon props: `<MazBtn :start-icon="MazTrash">`.
|
|
211
|
+
|
|
212
|
+
### Helpers and composables
|
|
213
|
+
|
|
214
|
+
Use `@maz-ui/utils` and maz-ui composables instead of lodash, VueUse or hand-written code: `debounce`, `throttle`, `sleep`, `isEqual`, `capitalize`, `formatCurrency`, `formatDate`, `formatNumber`, `formatPhoneNumber`, `getCookie`/`setCookie`, `useBreakpoints`, `useWindowSize`, `useTimer`, `useIdleTimeout`, `useSwipe`, `vClickOutside`, `vTooltip`, `vLazyImg`...
|
|
215
|
+
|
|
216
|
+
### Styling with Tailwind
|
|
217
|
+
|
|
218
|
+
The maz-ui theme is exposed to Tailwind (`@import 'maz-ui/tailwindcss/theme.css'`). Only use its tokens:
|
|
219
|
+
|
|
220
|
+
- Colors: `primary`, `secondary`, `accent`, `info`, `success`, `warning`, `destructive`, `contrast` (each with `-foreground` and `-50` to `-950`), `surface`, `foreground`, `muted`, `divider`, `overlay`, plus `bg-container` and `bg-input`. Example: `bg-surface text-foreground border-divider`, `bg-primary text-primary-foreground`, `text-muted`.
|
|
221
|
+
- Never use the default Tailwind palette (`bg-blue-500`, `text-gray-600`, `bg-white`, `text-black`) nor hard-coded colors (`#fff`, `rgb()`, `bg-[#...]`). Theme colors already adapt to dark mode: do not add `dark:` color overrides.
|
|
222
|
+
- Radius `rounded-*`, shadows `shadow-sm` to `shadow-xl` and `shadow-elevation`, spacing scale (`p-4`, `gap-2`), breakpoints `mob-*`, `tab-*`, `lap-*` (plus `sm` to `2xl`), utilities `flex-center`, `padded-container`.
|
|
223
|
+
- **No `maz:` prefix** in this project: it is internal to the maz-ui library and its documentation.
|
|
224
|
+
- In custom CSS, use the variables: `var(--maz-primary)`, `var(--maz-rounded-md)`, `calc(var(--maz-space) * 4)`.
|
|
225
|
+
|
|
226
|
+
### Theme
|
|
227
|
+
|
|
228
|
+
Brand colors, fonts, radius and spacing come from a `@maz-ui/themes` preset (`definePreset`), not from overrides scattered in CSS. Use `useTheme()` for dark mode and presets (`toggleDarkMode`, `setColorMode`, `updateTheme`), never toggle the `dark` class or store the mode yourself.
|
|
229
|
+
|
|
230
|
+
### Imports
|
|
231
|
+
|
|
232
|
+
- Deep imports: `maz-ui/components/MazBtn`, `maz-ui/composables/useToast`, `maz-ui/directives/vTooltip`, `@maz-ui/utils/helpers/debounce`, `@maz-ui/icons/static/MazTrash`. The `maz-ui` root entry only exports types. Never import from `maz-ui/src` or `maz-ui/dist`.
|
|
233
|
+
- With `@maz-ui/nuxt`, components and composables are auto-imported: do not import them.
|
|
234
|
+
|
|
235
|
+
### Before you finish
|
|
236
|
+
|
|
237
|
+
Run `review_code` (MCP) on the files you changed, or `npx @maz-ui/mcp review <files>`, and fix every finding.
|
|
@@ -1,9 +1,16 @@
|
|
|
1
1
|
---
|
|
2
|
-
title: Browser support
|
|
3
|
-
description: Maz-UI v5 browser compatibility matrix and the native CSS features it depends on.
|
|
2
|
+
title: "Browser support"
|
|
3
|
+
description: "Maz-UI v5 browser compatibility matrix and the native CSS features it depends on."
|
|
4
|
+
package: "maz-ui"
|
|
5
|
+
url: "https://maz-ui.com/guide/browser-support"
|
|
4
6
|
---
|
|
5
7
|
|
|
6
|
-
#
|
|
8
|
+
# Browser support
|
|
9
|
+
|
|
10
|
+
> Maz-UI v5 browser compatibility matrix and the native CSS features it depends on.
|
|
11
|
+
|
|
12
|
+
- Package: `maz-ui`
|
|
13
|
+
- Web: https://maz-ui.com/guide/browser-support
|
|
7
14
|
|
|
8
15
|
Maz-UI v5 is built on **Tailwind CSS v4**, which relies on modern native CSS features with no polyfill path. If your audience still uses older browsers, stay on Maz-UI v4.
|
|
9
16
|
|
|
@@ -28,32 +35,32 @@ Maz-UI v5 + Tailwind v4 uses the following native CSS features:
|
|
|
28
35
|
|
|
29
36
|
Used for every alpha modifier (`bg-primary/50`, the custom `color-mix(in srgb, var(--X) 60%, transparent)` generated by the `@maz-ui/upgrade` package for `hsl(var(--X) / 60%)`, etc.).
|
|
30
37
|
|
|
31
|
-
[Browser support · caniuse](https://caniuse.com/?search=color-mix)
|
|
38
|
+
[Browser support · caniuse](https://caniuse.com/?search=color-mix) - supported everywhere since Chromium 111 / Safari 16.4 / Firefox 128.
|
|
32
39
|
|
|
33
40
|
### `@property`
|
|
34
41
|
|
|
35
42
|
Used internally by Tailwind v4 to declare typed custom properties with default values. Powers the `--tw-translate-x`, `--tw-rotate`, etc. that back transform utilities.
|
|
36
43
|
|
|
37
|
-
[Browser support · caniuse](https://caniuse.com/?search=%40property)
|
|
44
|
+
[Browser support · caniuse](https://caniuse.com/?search=%40property) - supported everywhere since Chromium 111 / Safari 16.4 / Firefox 128.
|
|
38
45
|
|
|
39
46
|
### Native CSS nesting
|
|
40
47
|
|
|
41
48
|
Used by Tailwind v4 internally and by Maz-UI utilities like `cap-f` (`&::first-letter`). v4 does not run a CSS-nesting preprocessor; the output relies on the browser parsing nested rules directly.
|
|
42
49
|
|
|
43
|
-
[Browser support · caniuse](https://caniuse.com/css-nesting)
|
|
50
|
+
[Browser support · caniuse](https://caniuse.com/css-nesting) - supported everywhere since Chromium 112 / Safari 16.5 / Firefox 117.
|
|
44
51
|
|
|
45
52
|
### `:has()` selector
|
|
46
53
|
|
|
47
54
|
Used by a few Maz-UI utilities for parent-aware styling.
|
|
48
55
|
|
|
49
|
-
[Browser support · caniuse](https://caniuse.com/css-has)
|
|
56
|
+
[Browser support · caniuse](https://caniuse.com/css-has) - supported everywhere since Chromium 105 / Safari 15.4 / Firefox 121.
|
|
50
57
|
|
|
51
58
|
## Testing on older browsers
|
|
52
59
|
|
|
53
60
|
If you need to support a browser older than the matrix above:
|
|
54
61
|
|
|
55
|
-
1. **Stay on Maz-UI v4**
|
|
56
|
-
2. **Check your real audience** using your analytics tool before bumping to v5. "Support everything" is often outdated advice in 2026
|
|
62
|
+
1. **Stay on Maz-UI v4** - it keeps Tailwind v3 and targets Chromium 90+, Safari 14+, Firefox 90+.
|
|
63
|
+
2. **Check your real audience** using your analytics tool before bumping to v5. "Support everything" is often outdated advice in 2026 - most teams can comfortably drop anything older than Chromium 111.
|
|
57
64
|
|
|
58
65
|
## Testing on the minimum versions
|
|
59
66
|
|
|
@@ -68,14 +75,14 @@ Then run your visual tests against that matrix in CI.
|
|
|
68
75
|
|
|
69
76
|
## What happens on unsupported browsers
|
|
70
77
|
|
|
71
|
-
- **`color-mix` unsupported**
|
|
72
|
-
- **`@property` unsupported**
|
|
73
|
-
- **Cascade layers unsupported**
|
|
78
|
+
- **`color-mix` unsupported** - any utility that goes through an alpha modifier (`bg-primary/50`, the custom overlay colors in MazDialog / MazBackdrop) falls back to the base color with no transparency. Visual regression but not a crash.
|
|
79
|
+
- **`@property` unsupported** - transform, translate, rotate, scale utilities don't animate smoothly because the custom properties aren't interpolatable without `@property`.
|
|
80
|
+
- **Cascade layers unsupported** - the order of Maz-UI styles vs app styles becomes non-deterministic, so resets and utilities can override app styles (or vice versa) unpredictably.
|
|
74
81
|
|
|
75
82
|
The safe recommendation is: detect at app boot and show an "unsupported browser" screen if you can't guarantee the minimum matrix.
|
|
76
83
|
|
|
77
84
|
## See also
|
|
78
85
|
|
|
79
|
-
- [Migration v4 → v5](./migration-v5.md)
|
|
80
|
-
- [Tailwind v4 browser support](https://tailwindcss.com/blog/tailwindcss-v4#browser-support)
|
|
81
|
-
- [Tailwind CSS integration](./tailwind.md)
|
|
86
|
+
- [Migration v4 → v5](./migration-v5.md) - the full upgrade guide
|
|
87
|
+
- [Tailwind v4 browser support](https://tailwindcss.com/blog/tailwindcss-v4#browser-support) - upstream notes
|
|
88
|
+
- [Tailwind CSS integration](./tailwind.md) - how the design system plugs into your own Tailwind
|
|
@@ -1,81 +1,39 @@
|
|
|
1
1
|
---
|
|
2
|
-
title: Getting Started
|
|
3
|
-
description: Build Vue and Nuxt applications faster with Maz-UI v5 - The modern, modular component library
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
- name: keywords
|
|
7
|
-
content: vue ui library, vue components, nuxt ui, maz-ui installation, components, nuxt, vue, themes, translations, icons, mcp, maz-ui
|
|
2
|
+
title: "Getting Started"
|
|
3
|
+
description: "Build Vue and Nuxt applications faster with Maz-UI v5 - The modern, modular component library"
|
|
4
|
+
package: "maz-ui"
|
|
5
|
+
url: "https://maz-ui.com/guide/getting-started"
|
|
8
6
|
---
|
|
9
7
|
|
|
10
|
-
#
|
|
8
|
+
# Getting Started
|
|
11
9
|
|
|
12
|
-
|
|
10
|
+
> Build Vue and Nuxt applications faster with Maz-UI v5 - The modern, modular component library
|
|
13
11
|
|
|
14
|
-
|
|
12
|
+
- Package: `maz-ui`
|
|
13
|
+
- Web: https://maz-ui.com/guide/getting-started
|
|
14
|
+
|
|
15
|
+
**Tip: **Why Maz-UI?****
|
|
15
16
|
|
|
16
17
|
- 🌱 **Tree-shaking** - Import only what you need
|
|
17
18
|
- 🛠️ **TypeScript-first** - Full type safety out of the box
|
|
18
19
|
- 🚀 **Performance** - Tree-shaking benefits and maximum optimization
|
|
19
|
-
- 🎨 **Theming system** - Customizable themes and dark mode support (5 presets available) - [@maz-ui/themes](
|
|
20
|
+
- 🎨 **Theming system** - Customizable themes and dark mode support (5 presets available) - [@maz-ui/themes](../ecosystem/themes.md)
|
|
20
21
|
- 💨 **Optional Tailwind bridge** - Already have a Tailwind v4 setup? Expose your active maz-ui theme tokens (colors, radius, breakpoints, custom utilities) to your own Tailwind config - [Tailwind integration](./tailwind.md)
|
|
21
|
-
- 🌐 **Internationalization** - Locale management and tree-shakable imports - [@maz-ui/translations](
|
|
22
|
-
- 🎨 **Icon library** - Comprehensive collection of SVG icons designed for performance and flexibility (860+ icons) - [@maz-ui/icons](
|
|
23
|
-
- 🧰 **Nuxt module** - Effortless Maz-UI integration with auto-imports - [@maz-ui/nuxt](
|
|
24
|
-
- 🤖 **
|
|
22
|
+
- 🌐 **Internationalization** - Locale management and tree-shakable imports - [@maz-ui/translations](../ecosystem/translations.md)
|
|
23
|
+
- 🎨 **Icon library** - Comprehensive collection of SVG icons designed for performance and flexibility (860+ icons) - [@maz-ui/icons](../ecosystem/icons/index.md)
|
|
24
|
+
- 🧰 **Nuxt module** - Effortless Maz-UI integration with auto-imports - [@maz-ui/nuxt](../ecosystem/nuxt.md)
|
|
25
|
+
- 🤖 **AI agents** - Make Claude Code, Cursor, Copilot and Codex use maz-ui instead of re-implementing it - [AI agents](./ai-agents.md), [@maz-ui/mcp](../ecosystem/mcp.md)
|
|
25
26
|
|
|
26
|
-
|
|
27
|
+
**Tip: Migrating from v4?**
|
|
27
28
|
|
|
28
|
-
::: tip Migrating from v4?
|
|
29
29
|
Run `npx @maz-ui/upgrade ./` to handle the mechanical part of the migration (CSS subpath imports, prop renames, CSS var renames, Nuxt config keys, custom preset color keys, and `package.json` version bumps). See the [v5 migration guide](./migration-v5.md) for the rest.
|
|
30
|
-
:::
|
|
31
30
|
|
|
32
31
|
## Guides
|
|
33
32
|
|
|
34
33
|
Start by choosing your framework:
|
|
35
34
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
href="/guide/vue"
|
|
39
|
-
class="maz:flex-1"
|
|
40
|
-
:gallery="{
|
|
41
|
-
images: ['/vue.png'],
|
|
42
|
-
height: 200,
|
|
43
|
-
width: '100%',
|
|
44
|
-
}"
|
|
45
|
-
>
|
|
46
|
-
<template #content-title>
|
|
47
|
-
<h3>
|
|
48
|
-
Vue Users Guide
|
|
49
|
-
</h3>
|
|
50
|
-
</template>
|
|
51
|
-
<template #footer>
|
|
52
|
-
<MazBtn color="contrast" href="/guide/vue">
|
|
53
|
-
Vue guide
|
|
54
|
-
</MazBtn>
|
|
55
|
-
</template>
|
|
56
|
-
</MazCard>
|
|
57
|
-
<MazCard
|
|
58
|
-
href="/ecosystem/nuxt"
|
|
59
|
-
class="maz:flex-1"
|
|
60
|
-
content-title="Nuxt Users Guide"
|
|
61
|
-
:gallery="{
|
|
62
|
-
images: ['/nuxt.png'],
|
|
63
|
-
height: 200,
|
|
64
|
-
width: '100%',
|
|
65
|
-
}"
|
|
66
|
-
>
|
|
67
|
-
<template #content-title>
|
|
68
|
-
<h3>
|
|
69
|
-
Nuxt Users Guide
|
|
70
|
-
</h3>
|
|
71
|
-
</template>
|
|
72
|
-
<template #footer>
|
|
73
|
-
<MazBtn color="contrast" href="/ecosystem/nuxt">
|
|
74
|
-
Nuxt guide
|
|
75
|
-
</MazBtn>
|
|
76
|
-
</template>
|
|
77
|
-
</MazCard>
|
|
78
|
-
</div>
|
|
35
|
+
- [Install maz-ui with Vue](./vue.md)
|
|
36
|
+
- [Install maz-ui with Nuxt](../ecosystem/nuxt.md)
|
|
79
37
|
|
|
80
38
|
## Ecosystem Packages
|
|
81
39
|
|
|
@@ -94,13 +52,13 @@ npm install @maz-ui/themes
|
|
|
94
52
|
**Features:**
|
|
95
53
|
|
|
96
54
|
- 🎨 Native `light-dark()` + `color-scheme` + OKLCh scales via relative color syntax
|
|
97
|
-
- 🌓 Smart dark mode
|
|
55
|
+
- 🌓 Smart dark mode - `class` or `media` strategies, with smooth transitions on toggle
|
|
98
56
|
- ✨ Optional animated theme switch via View Transitions (`setColorMode(..., { animate: true })`)
|
|
99
57
|
- ⚡ `runtime` and `buildtime` rendering strategies
|
|
100
58
|
- 🍪 Active preset persisted across reloads (opt-out)
|
|
101
59
|
- 🛡️ Full TypeScript support
|
|
102
60
|
|
|
103
|
-
[→ View Theme Documentation](
|
|
61
|
+
[→ View Theme Documentation](../ecosystem/themes.md)
|
|
104
62
|
|
|
105
63
|
---
|
|
106
64
|
|
|
@@ -121,7 +79,7 @@ npm install @maz-ui/translations
|
|
|
121
79
|
- 📦 Tree-shakable imports
|
|
122
80
|
- 🛠️ TypeScript support
|
|
123
81
|
|
|
124
|
-
[→ View Translations Documentation](
|
|
82
|
+
[→ View Translations Documentation](../ecosystem/translations.md)
|
|
125
83
|
|
|
126
84
|
---
|
|
127
85
|
|
|
@@ -143,19 +101,26 @@ npm install @maz-ui/icons
|
|
|
143
101
|
- Multiple sizes and variants
|
|
144
102
|
- Full TypeScript definitions
|
|
145
103
|
|
|
146
|
-
[→ Browse Icon Library](
|
|
104
|
+
[→ Browse Icon Library](../ecosystem/icons/index.md)
|
|
147
105
|
|
|
148
106
|
---
|
|
149
107
|
|
|
150
108
|
### @maz-ui/mcp
|
|
151
109
|
|
|
152
|
-
**
|
|
110
|
+
**Make your AI coding agents use maz-ui**
|
|
111
|
+
|
|
112
|
+
```bash
|
|
113
|
+
npx @maz-ui/mcp init
|
|
114
|
+
```
|
|
153
115
|
|
|
154
116
|
**Features:**
|
|
155
117
|
|
|
156
|
-
-
|
|
118
|
+
- Rules for Claude Code, Cursor, GitHub Copilot, Codex... without touching your own instructions
|
|
119
|
+
- MCP server: search by need, component APIs, icons, Tailwind theme tokens, docs of the installed version
|
|
120
|
+
- Code review against the installed maz-ui, in the agent loop and in CI
|
|
121
|
+
- Claude Code plugin and automatic setup with the Nuxt module
|
|
157
122
|
|
|
158
|
-
[→ View
|
|
123
|
+
[→ View AI agents guide](./ai-agents.md)
|
|
159
124
|
|
|
160
125
|
## Performance Optimizations
|
|
161
126
|
|
|
@@ -219,78 +184,8 @@ import { debounce } from '@maz-ui/utils/helpers/debounce'
|
|
|
219
184
|
import { formatCurrency } from '@maz-ui/utils/helpers/formatCurrency'
|
|
220
185
|
```
|
|
221
186
|
|
|
222
|
-
|
|
187
|
+
**Tip: Maximum Optimization**
|
|
188
|
+
|
|
223
189
|
**Direct imports** (e.g., `import MazBtn from 'maz-ui/components/MazBtn'`) are the most optimized approach as they bypass index files completely. This ensures the smallest possible bundle size and fastest build times.
|
|
224
|
-
:::
|
|
225
190
|
|
|
226
191
|
## Next Steps
|
|
227
|
-
|
|
228
|
-
<div class="next-steps">
|
|
229
|
-
|
|
230
|
-
### Explore Components
|
|
231
|
-
|
|
232
|
-
Browse the [component library](./../components/maz-btn.md) with live examples and API documentation.
|
|
233
|
-
|
|
234
|
-
### Customize Themes
|
|
235
|
-
|
|
236
|
-
Learn about [theming and customization](./themes.md) to match your brand.
|
|
237
|
-
|
|
238
|
-
### Internationalization
|
|
239
|
-
|
|
240
|
-
Learn about [internationalization](./translations.md) to support multiple languages.
|
|
241
|
-
|
|
242
|
-
### Lazy Loading with MazUiProvider
|
|
243
|
-
|
|
244
|
-
Use [`MazUiProvider`](./maz-ui-provider.md) to defer Maz-UI initialization to lazy-loaded pages for zero entry-bundle overhead.
|
|
245
|
-
|
|
246
|
-
### Get Help
|
|
247
|
-
|
|
248
|
-
Browse [GitHub discussions](https://github.com/LouisMazel/maz-ui/discussions) or open an issue on [GitHub](https://github.com/LouisMazel/maz-ui/issues).
|
|
249
|
-
|
|
250
|
-
</div>
|
|
251
|
-
|
|
252
|
-
<style scoped>
|
|
253
|
-
@reference "../../.vitepress/theme/main.css";
|
|
254
|
-
.hero-section {
|
|
255
|
-
@apply maz:rounded-md maz:p-8 maz:my-12 maz:from-primary-400 maz:to-secondary-700 maz:bg-linear-to-br;
|
|
256
|
-
}
|
|
257
|
-
|
|
258
|
-
.features-grid {
|
|
259
|
-
display: grid;
|
|
260
|
-
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
261
|
-
gap: 2rem;
|
|
262
|
-
margin: 2rem 0;
|
|
263
|
-
|
|
264
|
-
h3 {
|
|
265
|
-
margin-top: 0;
|
|
266
|
-
}
|
|
267
|
-
ul {
|
|
268
|
-
margin-top: 0;
|
|
269
|
-
}
|
|
270
|
-
}
|
|
271
|
-
|
|
272
|
-
.next-steps {
|
|
273
|
-
display: grid;
|
|
274
|
-
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
275
|
-
gap: 1rem;
|
|
276
|
-
margin: 2rem 0;
|
|
277
|
-
|
|
278
|
-
h3 {
|
|
279
|
-
margin-top: 0;
|
|
280
|
-
}
|
|
281
|
-
p {
|
|
282
|
-
margin-top: 0;
|
|
283
|
-
}
|
|
284
|
-
}
|
|
285
|
-
|
|
286
|
-
@media (max-width: 768px) {
|
|
287
|
-
.hero-actions {
|
|
288
|
-
flex-direction: column;
|
|
289
|
-
align-items: center;
|
|
290
|
-
}
|
|
291
|
-
|
|
292
|
-
.hero-btn {
|
|
293
|
-
width: 200px;
|
|
294
|
-
}
|
|
295
|
-
}
|
|
296
|
-
</style>
|
|
@@ -1,15 +1,16 @@
|
|
|
1
1
|
---
|
|
2
|
-
title: Global component defaults
|
|
3
|
-
description: Set default prop values once for every Maz-UI component through the MazUi plugin or the Nuxt module
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
- name: keywords
|
|
7
|
-
content: maz-ui defaults, global props, default props, rounded size, component configuration, vue, nuxt
|
|
2
|
+
title: "Global component defaults"
|
|
3
|
+
description: "Set default prop values once for every Maz-UI component through the MazUi plugin or the Nuxt module"
|
|
4
|
+
package: "maz-ui"
|
|
5
|
+
url: "https://maz-ui.com/guide/global-defaults"
|
|
8
6
|
---
|
|
9
7
|
|
|
10
|
-
#
|
|
8
|
+
# Global component defaults
|
|
11
9
|
|
|
12
|
-
|
|
10
|
+
> Set default prop values once for every Maz-UI component through the MazUi plugin or the Nuxt module
|
|
11
|
+
|
|
12
|
+
- Package: `maz-ui`
|
|
13
|
+
- Web: https://maz-ui.com/guide/global-defaults
|
|
13
14
|
|
|
14
15
|
Instead of repeating the same prop on every instance (`<MazBtn rounded-size="lg" />` everywhere), you can set a default once and let every component pick it up.
|
|
15
16
|
|
|
@@ -93,10 +94,10 @@ defaults: {
|
|
|
93
94
|
| `bordered`, `elevation`, `padding`, `transparent`, `overflowHidden` | `boolean` | `MazContainer` |
|
|
94
95
|
| `bordered`, `elevation`, `padding`, `radius`, `scale`, `overflowHidden` | `boolean` | `MazCard` |
|
|
95
96
|
|
|
96
|
-
|
|
97
|
+
**Tip: Note**
|
|
98
|
+
|
|
97
99
|
Components whose `size` is a free CSS length (`MazSizeUnit`, e.g. `MazSpinner`, `MazAvatar`, `MazDrawer`, `MazSlider`, `MazCircularProgressBar`, `MazFullscreenLoader`) do not take the global `size` token - the value would not be valid for them. `MazAlert` and `MazTimeline` keep their own wider `roundedSize` scale; a `defaults.global.roundedSize` value still applies to them, and their extra steps (`2xl`, `3xl`) are reachable through their per-component entry.
|
|
98
|
-
:::
|
|
99
100
|
|
|
100
101
|
## Relation to the theme system
|
|
101
102
|
|
|
102
|
-
This is **not** a duplicate of [`@maz-ui/themes`](
|
|
103
|
+
This is **not** a duplicate of [`@maz-ui/themes`](../ecosystem/themes.md). The theme system controls *what a token looks like* (the CSS value of `rounded-md`, `shadow-elevation`, colors…). Global defaults control *which prop value a component selects by default* (whether `MazBtn` defaults to `roundedSize="lg"`). Both work together: the theme defines what `lg` renders as, the defaults decide which step a component uses.
|