MVUI Componentes

Avatar

An image element with a fallback for representing the user.

Preview Code

Falback

Indicator

Preview Code

Status

Preview Code

Badge

Preview Code

5

2

Size

Preview Code

Group

Preview Code

+7

Users

Preview Code

Trusted by 100K+ useers.

Basic Usage

Mono

Outline

Light

Size

Actions

Basic Usage

Solid

Outline

Light

Circle

Square

Dot

Icon

Removable

Size

Basic Usage

Icon

Separator

Dropdown

Card

BASIC

CIRCLE

GHOST

WITH ICONS

CIRCLE

Icon Only

SIZE

Basic Usage

Preview Code

Recent Users

Kathryn Campbell

kathryn@apple.com

Active

Robert Smith

robert@openai.com

Inactive

Sophia Johnson

sophia@meta.com

Active

Lucas Walker

lucas@tesla.com

Inactive

Emily Davis

emily@sap.com

Active

Learn more

Accent

Preview Code

Recent Users

Kathryn Campbell

kathryn@apple.com

Active

Robert Smith

robert@openai.com

Inactive

Sophia Johnson

sophia@meta.com

Active

Lucas Walker

lucas@tesla.com

Inactive

Emily Davis

emily@sap.com

Active

Learn more

Simple Content

Media and Meta

Preview Code

Product Roadmap Review

Align design, engineering, and growth priorities for Q3 planning.

Tue, 10:00 AM8 attendees

Loading Skeleton

Stats Grid

Action List

Basic usage

Root holds a viewport (scroll container) and slides (data-mv-carousel-item). Add tabIndex={0} (or tabindex="0" in HTML) so ArrowLeft / ArrowRight work when the carousel is focused.

Preview Code

Previous Next

Keyboard

Put tabindex="0" (or tabIndex={0}) on the carousel root so it can receive focus, then use ArrowLeft / ArrowRight to go to the previous or next slide while focus is inside the carousel (including on the root). The handler skips arrow keys when focus is in an input, textarea, or contenteditable node. In RTL, arrows follow visual next/previous.

Scrollbar visible

By default the viewport and thumbnail strip use hidden native scrollbars (scrolling still works). Set data-mv-carousel-show-scrollbar="true" on the root—or pass showScrollbar: true to getOrCreateInstance—to show them. This example also adds mv-scrollable on the viewport for MVUI’s thin scrollbar styling.

Overlay arrows

Add prev/next buttons as overlay controls inside a relative carousel wrapper so they stay visible and easy to click.

Pagination

Place data-mv-carousel-pagination on a wrapper; each dot is data-mv-carousel-pagination-item in slide order. Active item gets aria-current="true".

Autoplay

Autoplay respects prefers-reduced-motion: reduce (timer is not started). Hover and focus-in pause autoplay when data-mv-carousel-pause-on-hover is true (default).

Infinite loop

At the last slide, Next wraps to the first; at the first, Previous wraps to the last.

RTL

Set dir="rtl" on the root (or rely on document direction). Arrow keys follow visual next / previous in RTL.

Multiple slides

Use CSS (min-w-[45%], etc.) so several slides peek into the viewport; the component still advances one slide index per next/prev.

Centered

data-mv-carousel-centered="true" scrolls the active slide with inline: "center".

Draggable

Pointer-drag on the viewport scrolls horizontally. Not combined with snap in this API: when data-mv-carousel-snap="true", draggable behavior is disabled.

Auto height

data-mv-carousel-auto-height="true" sets the viewport height from the active slide (see ResizeObserver in implementation).

Snap

Add Tailwind snap-x / snap-mandatory on the viewport and snap-center on items; enable data-mv-carousel-snap="true" so drag is not attached.

Info

data-mv-carousel-current and data-mv-carousel-total show 1-based current index and slide count.

Thumbnails (horizontal)

data-mv-carousel-thumbnails wraps controls; each data-mv-carousel-thumbnail maps to a slide by DOM order.

Thumbnails (vertical)

Same behavior with a column layout.

Destroy & reinitialize

Use MVCarousel.getInstance(root)?.dispose() then MVCarousel.getOrCreateInstance(root) after dynamic updates.

Copy value (input)

Copy value (inline)

Predefined text (text wins over target)

Predefined text (icon swap)

Cut value (input/textarea only)

Copy from arbitrary target

Code block

// Click to copy this block (plain text)
const answer = 42;
console.log(answer);

Tooltip feedback

Basic Usage

Checked

Disabled

Indeterminate

Mono

Size

Form

Basic Usage

Click on the toggle button to expand the additional information in the collapsed content.

Show/Hide

Click on the toggle button to expand the additional information with show and hide indicator.

Basic usage

Local HTML rows with search, sort, pagination, and toolbar controls.

Remote data

Rows from an API. See the demo.js tab for apiEndpoint, mapResponse, and custom columns.render. Default request query parameters: page, size, sortField, sortOrder, search, filters.

' +
              row.statusLabel +
              ''
            );
          },
        },
        lastSession: {
          render: function (value) {
            return '' + value + '';
          },
        },
        ipAddress: {
          title: 'IP Address',
        },
      },

      // Core configuration
      pageSize: 5,
      stateSave: true,

      // Add callbacks for pagination events
      callbacks: {
        afterDraw: function () {
          // Add any custom behavior after drawing the table
        },
      },
    });

    // Mark as initialized and store instance
    isInitialized = true;
    instance = datatable;

    return instance;
  };

  // Public API
  return {
    init: function () {
      return init();
    },
  };
})();

/**
 * Initialize the datatable when the page loads
 */
// Function to safely initialize only once
function safeInitialize() {
  var element = document.getElementById('mv_datatable_remote_source');
  if (!element) {
    return;
  }

  var instance = MVDatatableRemoteDataDemo.init();
  if (instance) {
    window.datatableInstance = instance;
  }
}

// Only attach the event listener once
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', safeInitialize, { once: true });
} else {
  // DOM is already loaded, initialize immediately
  setTimeout(safeInitialize, 1);
}
 '>

Row selection

Header checkbox plus per-row checkboxes.

Locked columns

Keep critical left and right columns visible while horizontally scrolling wide tables.

 '>

Locked rows

Keep the header and selected top/bottom rows fixed while vertically scrolling.

 '>

DEFAULT

DEFAULT

DEFAULT

DEFAULT

DEFAULT

DEFAULT

DEFAULT

DEFAULT

DEFAULT

DEFAULT

DEFAULT

DEFAULT

DEFAULT

DEFAULT

DEFAULT

DEFAULT

DEFAULT

DEFAULT

DEFAULT

Basic Usage

Dismiss the element with a smooth transition, ensuring it is removed from the DOM.

Hide Mode

Dismiss the element with a smooth transition, ensuring it is hidden with .hidden Tailwind Class.

DEFAULT

DEFAULT

DEFAULT

Basic Usage

Disabled

Readonly

File

Icon

Group

Error

Size

Form

Basic

Initialize on a wrapper that contains one input[type="number"], or put data-mv-input-number on the input itself.

Min, max, and step

Use native min, max, and step on the number input. Optional + / − controls use the browser’s stepUp() / stepDown() so behavior matches native constraints.

With buttons

Pair data-mv-input-number-decrement and data-mv-input-number-increment with accessible names (aria-label or visible text) on the buttons.

Disabled

Use the native disabled attribute on the input. Decrement/increment handlers no-op while disabled.

Basic Usage

Outline

Size

Basic Usage

Underline

Underlined

Dashed

Inverse

Mono

Disabled

Size

DEFAULT

DEFAULT

Icon

Card

Basic

Placeholder

Gray variant

Underline variant

Focus scale

Lengths (3, 5, 7)

Regex subset (digits 0–3)

Telephone number

Ten numeric cells with type="tel" and inputMode="numeric" so mobile browsers show the phone-style keypad. Paste distributes digits across cells.

Alphanumeric (10 characters)

Ten cells with data-mv-pin-input-available-chars="[0-9a-zA-Z]" and inputMode="text" for mixed codes (e.g. product keys). Letters are normalized to uppercase in this demo via CSS.

Masked (type="password")

iOS OTP hint

Disabled

Sizes

Hidden field (forms)

In modal

Basic Usage

Variants

Basic Usage

Disabled

Mono

Size

Form

Basic

Initialize on a wrapper that contains one input[type="range"]. The component stores --mv-range-fill on the root (0–1) so you can drive a visual track or theme styles.

With output

Point data-mv-range-slider-output at a selector for an element whose text updates on input and change (searched under the root first, then document).

Disabled

Use the native disabled attribute on the range input. The control stays a real form field; avoid replacing it with a non-focusable custom thumb.

Stepped bounds

Define explicit min, max, and step values to constrain user input to predictable increments.

Datalist ticks

Use native list and

Form integration

Keep the range input in a standard form so submission and readout work with native semantics.

Programmatic update

Use external controls to set preset values while keeping slider output in sync.

Basic Usage

Use data-MV-rating to render an interactive star rating. The selected value is available for form submission and via the MV.rating.change event.

Readonly

Display a fixed rating (e.g. 3 of 5 stars) with data-MV-rating-readonly="true" and data-MV-rating-value="3".

Custom Symbol

Use data-MV-rating-symbol="heart" to show hearts instead of stars.

Basic Usage

Resize your browser or the preview panel to see content switch parents based on breakpoint-prefixed data-mv-reparent-target and data-mv-reparent-mode values (or matching CSS custom properties).

Responsive

Mobile Menu

Basic Usage

Click "Add item" to clone the input block into the container. A limit of 3 is set so the trigger disables after three clones.

Predefined Markup

The template lives in a hidden container; only clones appear in the wrapper when you click "Add row".

With Delete

Each cloned block includes a remove control. Use data-MV-repeater-delete on the element that should remove its block.

On Modal

Use a repeater inside a modal to collect multiple items (e.g. guests) before submitting. Open the modal, add or remove rows, then submit or cancel.

Basic

To implement a custom scrollable content with a fixed height, simply utilize the mv-scrollable custom class. This class is designed to create a improved scrollable area within your HTML document.

Horizontal

Below example demonstrates horizontally scrollable content.

Both Scrollbars

Below example demonstrates a scrollable content with bith horizontal and vertical scrollbars.

Auto Height

Use data-mv-scrollable="true" to auto initialize the Tailwind MVScrollable component that dynamically calculates the height of the scrollable content by subtracting the the total heights of specific elements defined via data-mv-scrollable-dependencies="#header, #footer" the total spacings of specific elements defined via data-mv-scrollable-wrappers="#header, #footer" within the HTML document.

With modal

Custom

Customize the scrollbar thumb color to match your design requirements using the CSS variable for default and dark demos using [--tw-scrollbar-thumb-color:red] and [--tw-scrollbar-thumb-color-dark:yellow] classes.

Basic

Nested

Basic

Scroll To Target

Basic Usage

The most common use case - selecting one option from a dropdown.

DEFAULT

DEFAULT

DEFAULT

DEFAULT

DEFAULT

DEFAULT

DEFAULT

DEFAULT

DEFAULT

DEFAULT

DEFAULT

DEFAULT

DEFAULT

DEFAULT

DEFAULT

DEFAULT

DEFAULT

DEFAULT

DEFAULT

DEFAULT

DEFAULT

Basic Usage

Vertical

With Label

With Label Left

Inset

List Divider

In Card

Section Divider

Basic Usage

Card

List

Table

Paragraph

Avatar Row

Gallery

Profile

With Content

Demonstrates a realistic skeleton-to-content swap pattern.

Media Object

Stats KPI

Comment Thread

Form Section

Basic Usage