Mivix UI
Multi-selection, bulk moves, undo, pagination, forms, responsive panes, and complete keyboard navigation.
Build AI-ready apps with framework-neutral Web Components.
Mivix UI gives product teams a component ecosystem for dashboards, admin tools, assistant workspaces, and dense product UI across JavaScript, TypeScript, Next.js, React, Angular, Vue, Blazor, and plain HTML.
Quickstart
npm install mivix-ui@alpha
137 component folders
0 runtime dependencies
8 supported app stacks
SSR JSON helpers
Use the same `mvx-*` elements in JavaScript, TypeScript, Next.js, React, Angular, Vue, Blazor, or plain HTML.
Components emit DOM events like `mvx-change`, `mvx-select`, `mvx-submit`, and `mvx-close`.
Install once, compose product screens, and expose predictable attributes for agents and automation runtimes.
Latest release · 0.1.0-alpha.6
More complete workflows and clearer component APIs.
This release focuses on production-ready transfer workflows, reliable feedback, keyboard access, and a more useful documentation experience.
Updated components
Stacked notifications, collision-aware guidance, managed async actions, lifecycle events, and accessible labels.
Updated autocomplete, combobox, select, switch, checkbox group, dropdown menu, and menu behavior with more consistent examples.
Magnification, notification states, selection events, and categorized search across components, docs, and APIs.
Categorized controls, searchable API references, synchronized copied code, and safer live previews.
This release introduces a distinct, recognizable icon for Mivix and its growing component ecosystem. It becomes the official Mivix identity from this release onward.
import 'mivix-ui/styles';
import 'mivix-ui/auto';
Admin dashboard, SaaS marketing, AI workspace, CRM pipeline, analytics, ecommerce, settings, and support.
Attributes, properties, CSS parts, and `mvx-*` events make components easier for agents to inspect and operate.
Graphite, light, aurora, terminal, typography presets, per-component overrides, logical CSS, and localized labels.
Get started
Install only what your app uses.
Use the auto bundle for prototypes and docs, or import individual components for production bundles that stay light.
npm install mivix-ui@alpha
import 'mivix-ui/styles';
import { define } from 'mivix-ui/core';
import { MvxButton } from 'mivix-ui/components/button';
define('mvx-button', MvxButton);
import 'mivix-ui/auto';
Use the component catalog for live playgrounds, API controls, and copyable source snippets.
Every detail page lists attributes, properties, JSON options, events, slots, and playground controls.
Grouped from MUI Button/Button Group/FAB, DaisyUI Button/Speed Dial, shadcn Button/Button Group, and Flowbite action patterns.
Combines common form controls from Preline, MUI, DaisyUI, and shadcn with explicit labels and emitted change events.
Dialog/sheet/drawer/popover/collapse style components are grouped by interaction model and ARIA state.
Preline timeline variations, MUI data display, DaisyUI table/timeline, and shadcn data table patterns inform this family.
Actions
Button
Use buttons for primary, secondary, destructive, ghost, and loading actions.
Where to use
Use for explicit user actions such as save, create, deploy, approve, or cancel.
Playground
<mvx-button>
Chart demos
Explore every chart type
Icon gallery
Browse canonical Mivix icons
Features
Universal support
i18n/globalization
RTL/LTR
AAA-oriented access
per-component theme
font presets
radius API
Example
Component snippet
buttonicongroupfab
toolbarpressedcompact
statusactionlabel
badgechipstatus
Surface
Interactive card shell
Compact raised surface with graphite bevels and focused content density.
alertstatusclosable
switchtogglesetting
checkboxindeterminatehelper
multi-selectmin/maxdescriptions
radiosingle choicehorizontal
selectoptgroupmultiple
textareahelper slotcount
sliderrangevalue
daterangenative
label helperauto placementtones
inputtextareafield
accordioncollapsefaq
tabssegmentedpanels
breadcrumbspathhierarchy
paginationpagertable nav
navbarapp barlinks
sidebarnestedrail
dropdownnestedsearch
stepperwizardlinear
dialogalert dialogmodal
Focused dialog surface with backdrop close and Escape handling.
drawersheetoffcanvas
Side panel for tokens, settings, and object details.
toastsnackbarsonner
Positioned, timed notifications with motion and optional stacking.
progressmeterloading
skeletonplaceholderloading
spinnerdotsbusy
tooltiphover cardpopover
dropdownmenushortcuts
popoverfloatingdialog
avatarinitialsprofile
listlistboxmeta
shellsidebarapp bar
Toolbar
Main content area
dividerseparatorlabel
Before
data gridtree tablepinned
linebarpieheatmapfinancial
dashboardreport packchart panes
commandcomboboxsearchbox
Command search for AI and power-user workflows.
hotkeyscommandsnavigation
Declarative keyboard commands for pages built with Mivix.
assistantchatmessage
Summarize component events and recommend integration snippets.
chatbotmodel pickergateway API
kanbanboardworkflow
defaultcompactactivity
themecontrollertokens
Theme state is stored on `data-mvx-theme`.
variantshapematerial
Variant state is stored on `data-mvx-variant`.