@smwb/ui-solid
v0.5.0
Published
SolidJS port of summer-ui: strict, tree-shakeable Material-style component library sharing the @smwb/ui-styles design system.
Readme
@smwb/ui-solid
TypeScript SolidJS component library based on Material Design, with
runtime light/dark theming and LESS-based customization. SolidJS port of
@smwb/ui-react — same design system, class names,
and @smwb/ui-styles source.
The @smwb packages
| Package | What it is |
| --- | --- |
| @smwb/ui-solid | This package — SolidJS components. |
| @smwb/ui-react | React version, same design system. |
| @smwb/ui-styles | Framework-agnostic LESS source + design tokens. |
| @smwb/ui-css | Prebuilt aggregate stylesheet (import "@smwb/ui-css"). |
| @smwb/ui-mcp-solid | MCP server exposing this catalog to AI tools. |
Component catalog
- Storybook (production): https://summerweb.ru/ui-solid/
- Storybook (dev): https://summerweb.ru/ui-dev-solid/
- Local Storybook:
npm run storybook→ http://localhost:6006
Installation
npm install @smwb/ui-solidRequirements: Node.js ≥ 20, solid-js ≥ 1.8 (peer dependency).
Getting started
import { Button } from "@smwb/ui-solid";
function App() {
return <Button>Hello World</Button>;
}In ESM builds each imported component pulls in its own CSS automatically (tree-shakeable) — nothing else to import for the default theme.
Styles
Three ways to get the CSS, pick one:
- Auto-injected per-component CSS (default, ESM) — tree-shaken, only what you use.
- Full prebuilt stylesheet —
import "@smwb/ui-css";(recommended for a fixed global cascade). Optional reset:import "@smwb/ui-styles/normalize.css";. - Custom LESS bundle compiled from
@smwb/ui-styles(see Theming).
Headless entry (compile one LESS bundle yourself)
import "@smwb/ui-styles/normalize.css";
import "@smwb/ui-styles/components.less";
import { Button, TextField } from "@smwb/ui-solid/headless";Selective LESS bundle (only the components you use)
@import (less) "node_modules/@smwb/ui-styles/less/headless-base.less";
@import (less) "node_modules/@smwb/ui-styles/less/components/button/button.entry.less";
@import (less) "node_modules/@smwb/ui-styles/less/components/textField/textField.entry.less";Each component's required entries (and their dependencies) are listed by the MCP tool
get_component_props (see @smwb/ui-mcp-solid). Import <name>.entry.less, never the bare
components/<name>/<name>.less.
Customization and theming
| Goal | Approach | Rebuild CSS? |
| --- | --- | --- |
| Toggle light/dark, tweak a few colors live | --smui-* CSS variables + data-theme | No |
| One component instance looks different | Component props (color, size, variant, …) | No |
| New brand, density, or defaults library-wide | LESS overrides via theme.config on @smwb/ui-styles | Yes |
Light and dark mode
createTheme() returns a reactive theme accessor + setter; it persists the choice in
localStorage and syncs <html data-theme>:
import { createTheme, Theme } from "@smwb/ui-solid";
function ThemeToggle() {
const { theme, setTheme } = createTheme();
return (
<button type="button" onClick={() => setTheme(theme() === Theme.dark ? Theme.light : Theme.dark)}>
{theme() === Theme.dark ? "Light" : "Dark"}
</button>
);
}Or set <html data-theme="dark"> yourself. Tokens are exposed on :root /
:root[data-theme="dark"] as --smui-*.
Runtime overrides (no rebuild)
:root {
--smui-primaryColor: #00695c;
--smui-radius-md: 2px;
}Prefer --smui-* tokens over targeting internal .smwb-* classes.
Per-component appearance (props)
<Button variant="outlined" color="primary" size="large">Save</Button>
<FloatingButton color="success" size="large" />Compile-time overrides
Add a theme.config and compile @smwb/ui-styles/components.less — see
@smwb/ui-styles for the token catalog and rules.
MCP server (component catalog for AI tools)
The catalog is exposed to AI assistants by a separate package,
@smwb/ui-mcp-solid — a stdio MCP server.
npx -y @smwb/ui-mcp-solid{
"mcpServers": {
"smwb-ui-solid": {
"command": "npx",
"args": ["-y", "@smwb/ui-mcp-solid"]
}
}
}