A 53-component mobile UI library for Solid.js
Theme system · i18n · Dark mode · Tree-shakable · Fully typed
🖥️ Live Docs → | 📱 Docs site includes a phone simulator — preview every component on a virtual device
npm install solid-mobile # or pnpm / yarnimport { render } from 'solid-js/web';
import { ProviderConfig, Button, Toast } from 'solid-mobile';
function App() {
return (
<ProviderConfig>
<Button type="primary" onClick={() => Toast.success('Hello!')}>
Click Me
</Button>
</ProviderConfig>
);
}
render(() => <App />, document.getElementById('root')!);| Category | Components |
|---|---|
| Basic | Button Icon Center Divider Card Layout SafeArea ScrollBar |
| Display | Avatar Badge Tag Image Empty Lazyload List SwipeCell Swiper Ellipsis Tooltip FloatingBall BackTop Marquee PullRefresh |
| Navigation | Tabs TabBar NavBar Cell |
| Picker | Picker Calendar Cascader DatePicker CityPicker TimePicker Select |
| Feedback | Toast Notify Dialog Overlay ActionSheet Loading |
| Form | Form Input Textarea Radio Checkbox Switch Rate Stepper Slider Upload |
Full API reference, interactive demos, and a phone simulator are available on the documentation site →.
| 📱 Mobile-first | Every component is designed for touch — tap-friendly sizes, safe area support, slide gestures |
| 🎨 Theme System | CSS variables + ProviderConfig. Light/dark mode, custom brand colors, auto-derived hover/active states |
| 🌍 i18n Built-in | zh-CN & en-US out of the box. Extensible via localeMessages |
| 📦 Tree-shakable | import { Button } from 'solid-mobile' — only what you use lands in your bundle |
| ⌨️ Fully Typed | Every prop, callback, and config option has TypeScript definitions |
| ⚡ Zero VDOM | Built on Solid.js — components compile to real DOM, no diff overhead |
import { ProviderConfig } from 'solid-mobile';
const theme = { colors: { light: { primary: '#6366f1' } } };
<ProviderConfig config={theme}>
<App />
</ProviderConfig>
// Dark mode: toggle 'dark' class on <html>
document.documentElement.classList.toggle('dark');import { setGlobalLocale } from 'solid-mobile';
setGlobalLocale('en-US'); // 'zh-CN' | 'en-US' built-in
// Custom locale
<ProviderConfig config={{ locale: 'ja-JP' }} localeMessages={{
'ja-JP': { component: { picker: { cancel: 'キャンセル', confirm: '確認' } } }
}}>
<App />
</ProviderConfig>import { setEventBusHandler } from 'solid-mobile';
// Intercept component events for analytics / logging
setEventBusHandler(({ component, type, payload }) => {
console.log(`[${component}] ${type}`, payload);
});git clone https://github.com/LXG19961206/SolidMobile.git
cd SolidMobile && npm install
npm run dev:docs # Docs site at localhost:3000
npm run build # Library → dist/
npm test # 480+ testsMIT © LXG19961206