Mivix UI

mivix-ui

Alpha

Reactive components, ready for agentic interfaces.

Graphite surfaces, cobalt focus states, framework-neutral custom elements, and workflow patterns designed for assistants, dashboards, and product tools. This demo is an alpha preview while components are being hardened.

Browse components

Theme tokens

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`.

Actions Buttons, icon buttons, groups, FAB patterns

Grouped from MUI Button/Button Group/FAB, DaisyUI Button/Speed Dial, shadcn Button/Button Group, and Flowbite action patterns.

Forms Input, textarea, switch, select-ready controls

Combines common form controls from Preline, MUI, DaisyUI, and shadcn with explicit labels and emitted change events.

Disclosure & Overlays Accordion, modal, drawer, command, tooltip

Dialog/sheet/drawer/popover/collapse style components are grouped by interaction model and ARIA state.

Data & Workflow Table, timeline, kanban, progress, skeleton

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>

Features

Universal support

i18n/globalization RTL/LTR AAA-oriented access per-component theme radius API

API

Name	Type	Default	Description

Example

Component snippet

buttonicongroupfab

Primary

Neutral

Ghost

Danger

Syncing

toolbarpressedcompact

＋

↻

⚙

badgechipstatus

Agentic

Stable

Beta

Risk

Surface Interactive card shell

Compact raised surface with graphite bevels and focused content density.

alertstatusclosable

The package is ready for framework consumers.

Keyboard and theme states stay visible.

switchtogglesetting

checkboxindeterminaterequired

radiosingle choicehorizontal

selectoptgroupmultiple

textareaauto growcount

sliderrangevalue

daterangenative

inputtextareafield

accordioncollapsefaq

tabssegmentedpanels

breadcrumbspathhierarchy

paginationpagertable nav

navbarapp barlinks

sidebarnestedrail

stepperwizardlinear

dialogalert dialogmodal

Focused dialog surface with backdrop close and Escape handling.

drawersheetoffcanvas

Side panel for tokens, settings, and object details.

Open drawer

toastsnackbarsonner

Transient notification with tone and duration control.

Show toast

progressmeterloading

skeletonplaceholderloading

spinnerdotsbusy

tooltiphover cardpopover

Hover or focus

dropdownmenushortcuts

popoverfloatingdialog

Agent-readable attributes, events, and copyable snippets.

avatarinitialsprofile

listlistboxmeta

shellsidebarapp bar

Toolbar

Main content area

dividerseparatorlabel

Before

After

data gridtree tablepinned

linebarpieheatmapfinancial

commandcomboboxsearchbox

Command search for AI and power-user workflows.

Open command palette

hotkeyscommandsnavigation

Declarative keyboard commands for pages built with Mivix.

Mod+K

assistantchatmessage

Run

Summarize component events and recommend integration snippets.

chatbotmodel pickergateway API

kanbanboardworkflow

defaultcompactactivity

themecontrollertokens

Theme state is stored on `data-mvx-theme`.