About the project
Nmorph UI Kit
Nmorph UI Kit is a Vue 3 and Nuxt component library for building tactile interfaces with soft shadows, clear states, and consistent component APIs.
What it is
The project provides ready-made building blocks for product interfaces: form controls, data display components, navigation, feedback elements, theme utilities, and documentation examples. The same package can be used in regular Vue applications and in Nuxt projects through the Nuxt module.
What it provides
Component set
Reusable components for forms, tables, overlays, navigation, feedback, and common UI patterns.
Lightweight bundle
The package is intentionally small and tree-shakable: import only the components, icons, and style entrypoints you use, and modern bundlers can drop unused exports.
Theme system
CSS variables, light and dark themes, dynamic shadows, and utility classes for consistent styling.
Vue and Nuxt support
Direct Vue plugin setup plus a Nuxt module for integration with Nuxt applications.
Typed API
Typed props, exported option objects, helper types, and examples that document the public component API.
How the library works
Plugin lifecycle
NmorphLibrary installs the common styles, merges i18n messages, prepares theme variables, watches browser dimensions, and provides the shared Nmorph instance used by components.
Theme engine
Theme colors are written as CSS variables on the document, switched with the nmorph-data-theme attribute, and can be generated dynamically from the main color when shade tokens are not provided.
Nuxt module
The Nuxt entry transpiles the package, registers the universal plugin for SSR and client rendering, optionally adds the full stylesheet, and merges Nmorph messages into an existing Nuxt i18n setup.
Styles and sizes
Component styles share the same height scale, typography classes, radius tokens, shadow utilities, and color variables, so controls can be mixed without manual visual tuning.
Overlay layer
Dropdown, overlay, dialog, select, autocomplete, date picker, and image preview use a shared layering model with Teleport, z-index allocation, outside click handling, and placement helpers.
Form model
Form components integrate with NmorphForm and validation hooks, supporting text, numeric, boolean, and array fields while still allowing direct v-model usage.
Virtualization
Large-option and large-row scenarios are handled through virtual list mechanics for table, select, and autocomplete, with controlled item height, overscan, and scroll positioning.
Accessibility baseline
Inputs keep native form elements where possible, expose focusable controls, preserve disabled and loading states, and keep icon-only actions inside semantic buttons.
Design approach
Nmorph uses a neumorphic and skeuomorphic visual language: soft shadows, inset states, restrained surfaces, and accent colors that make controls feel tactile without hiding their function.
Project status
The library is actively developed and tested. Breaking visual issues, integration problems, and component API gaps are tracked through the project issue board.