solid-mobile

v0.2.2

Published

15 hours ago

50+ mobile UI components for Solid.js — theme system, i18n, dark mode, tree-shakable, TypeScript.

Downloads

1,991

Installation

npm install solid-mobile   # or pnpm / yarn

Quick Start

import { render } from 'solid-js/web';
import { ProviderConfig, Button, Toast } from 'solid-mobile';
import 'solid-mobile/styles.css';

function App() {
  return (
    <ProviderConfig>
      <Button type="primary" onClick={() => Toast.success('Hello!')}>
        Click Me
      </Button>
    </ProviderConfig>
  );
}

render(() => <App />, document.getElementById('root')!);

Components

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

Stability

From v0.2.1 through 1.0.0, the library will not undergo large-scale feature expansion. Our focus is on thorough testing and more approachable documentation.

Props and APIs are additive-only going forward — they may grow, but existing APIs will not be removed or broken (except to fix genuine design bugs). What works now will keep working in every subsequent release.

Why Solid Mobile?

| | | |---|---| | 📱 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 |

Usage Examples

Theme & Dark Mode

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');

i18n

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>

Event Bus

import { setEventBusHandler } from 'solid-mobile';

// Intercept component events for analytics / logging
setEventBusHandler(({ component, type, payload }) => {
  console.log(`[${component}] ${type}`, payload);
});

Development

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+ tests

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme