Component overview

minidev-components is the Web Components library built into MiniDev Studio, using the Material Design 3 design language and implemented with Custom Elements.

Features

• 28 components across basics, forms, display, layout, and media
• Web Components standard, works with Vue and React
• CSS variable themes with a full MD3 design token system
• Bridge integration — some components support SDK-driven control
• rpx responsiveness — compiled to vw automatically

Basic components

Component	Tag	Description
View	<m-view>	View container with hover feedback
Text	<m-text>	Text container
Button	<m-button>	Button
Icon	<m-icon>	SVG icon
Image	<m-image>	Image display
Divider	<m-divider>	Divider

Form components

Component	Tag	Description
Input	<m-input>	Single-line input
Textarea	<m-textarea>	Multi-line input
Switch	<m-switch>	Switch
Slider	<m-slider>	Slider
Radio	<m-radio-group> <m-radio>	Radio
Checkbox	<m-checkbox-group> <m-checkbox>	Checkbox
Picker	<m-picker>	Picker
Calendar	<m-calendar>	Calendar
Cascader	<m-cascader>	Cascader
Form	<m-form>	Form container

Display components

Component	Tag	Description
Progress	<m-progress>	Progress bar
Circle	<m-circle>	Circular progress
Loading	<m-loading>	Loading indicator
Skeleton	<m-skeleton>	Skeleton
Steps	<m-steps> <m-step>	Steps
Collapse	<m-collapse>	Collapse

Layout components

Component	Tag	Description
ScrollView	<m-scroll-view>	Scroll view
Swiper	<m-swiper>	Swiper
Popup	<m-popup>	Popup

Media components

Component	Tag	Description
Video	<m-video>	Video player

Theming

Override global theme with CSS variables:

:root {
  --m-color-primary: #6366f1;
  --m-color-on-primary: #ffffff;
  --m-color-surface: #ffffff;
  --m-color-error: #b3261e;
  --m-radius-md: 12rpx;
  --m-font-size-md: 28rpx;
}

For the full list, see Theming.