@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-solid

Requirements: 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), including the --smui-* design tokens it reads — nothing else to import for the default theme except the Roboto webfont (see Styles).

Icons

<Icon> renders one of two icon sets under the same name, so switching sets never touches component code:

• smwb SVG set — ~250 contour icons shipped inside the package, one ES module each.
• Google Material Symbols — the webfont this library has always used (<link> it yourself).

import { Icon } from "@smwb/ui-solid";

<Icon name="arrow_right_alt" size={24} color="primary" />;

Names are the canonical Material Symbols names, and lookup is forgiving: arrow_right_alt, arrowRightAlt and arrow-right-alt all resolve, as do per-icon aliases (trash → delete, cog → settings, magnifier → search).

Bundling only the icons you use

Icons are not registered by default. Register the handful you render — every other icon is dropped by your bundler:

import { registerIcons } from "@smwb/ui-solid";
import { add, close, search } from "@smwb/ui-solid/icons";

registerIcons([add, close, search]);

Three icons in, three icons bundled (~0.4 kB). Or skip the registry entirely and pass the definition straight to the prop:

import { arrowRightAlt } from "@smwb/ui-solid/icons";

<Icon name={arrowRightAlt} />;

Deep imports work too (@smwb/ui-solid/icons/arrowRightAlt), and @smwb/ui-solid/icons/all exports registerAllIcons() for docs sites and icon pickers — that one pulls in the whole set on purpose.

Choosing the source

| source | Behaviour | | ---------------- | ------------------------------------------------------------------------ | | auto (default) | smwb SVG when the name is registered, Material Symbols otherwise. | | smwb | Always the SVG set; an unregistered name renders an empty box and warns. | | google | Always the Material Symbols font. |

Set it per icon (<Icon source="google" …>), per subtree, or app-wide:

import { configureIcons, IconProvider } from "@smwb/ui-solid";
import { add, close } from "@smwb/ui-solid/icons";

configureIcons({ source: "smwb" }); // app-wide default

<IconProvider source="smwb" icons={[add, close]}>
  <App />
</IconProvider>;

Because auto falls back to the font, upgrading changes nothing until you register icons.

Appearance

size takes a pixel number or any CSS length (size="1.5rem"). color takes a semantic token (primary, error, …) and otherwise inherits currentColor. For the SVG set weight maps to the stroke width (400 → 2px, 700 → 3px); fill and grade are Material Symbols axes and are ignored by the contour set.

Custom and overridden icons

An icon is plain data, so your own artwork registers the same way — and re-registering a shipped name replaces it everywhere:

registerIcons({ name: "logo", body: '<circle cx="12" cy="12" r="9"/>' });
registerIcons({ name: "delete", body: "<path d='…'/>" }); // overrides the shipped one

Browse the whole set in Storybook under UI/Base/Icon → All Icons — click any icon to copy its name. The set is generated from icons/data/*.json in the repo (npm run icons:generate).

Styles

Three ways to get the CSS, pick one:

1. Auto-injected per-component CSS (default, ESM) — tree-shaken, only what you use, plus one shared sheet that defines the --smui-* tokens. The Roboto webfont is not included (@smwb/ui-css loads it from Google Fonts): <link> it yourself, or set --smui-fontFamily to your own font.
2. Full prebuilt stylesheet — import "@smwb/ui-css"; (recommended for a fixed global cascade). Optional reset: import "@smwb/ui-styles/normalize.css";.
3. 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.

TanStack Table adapter

import { Table } from "@smwb/ui-solid/solid-table";

<Table data={rows} columns={columns} sortable withPagination limit={10} />;

Binds @tanstack/solid-table v8 to the smwb table components: columns are plain ColumnDefs, cells go through flexRender, and the adapter adds the sort affordance, the pagination footer and the loading / error rows. Column definitions written for the react-table adapter work unchanged.

@tanstack/solid-table is an optional peer — install it in your app; it ships with this subpath only. Column dragging and resizing are not ported yet. See Storybook → Connects / solid-table.

Charts (ECharts)

import { Chart } from "@smwb/ui-solid/chart";

<Chart
  label="Works opened by week"
  summary="12 works opened last week, 9 the week before."
  height={240}
  option={(palette) => ({
    xAxis: { type: "category", data: weeks },
    yAxis: { type: "value" },
    series: [{ type: "bar", data: opened, itemStyle: { color: palette.primary } }],
  })}
/>;

A separate entry point: echarts (5.4+ or 6) is an optional peer — install it in your app; the root package never reaches it. ECharts loads in the browser when the first chart mounts; until then, and on the server, a skeleton of the chart's height holds its place. The colours come from the theme's CSS variables (series from --smwb-chart-series-1 … -12), and the chart redraws when the theme switches (data-theme on <html>) or its box resizes; at zero size (a hidden tab) it waits. For a smaller bundle pass loader={() => import("./my-echarts")}, a module that registers only the charts you use with echarts/core. See Storybook → Data Display / Chart.

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-* (see Runtime overrides for how your values take precedence).

Runtime overrides (no rebuild)

:root {
  --smui-primaryColor: #00695c;
  --smui-radius-md: 2px;
}

How an override meets the library's own value depends on where the tokens come from:

• Auto-injected CSS declares them at zero specificity (:where(:root), :where(:root[data-theme="dark"])): your override wins whatever order the stylesheets load in, and a :root override holds in dark mode too.
• @smwb/ui-css or your own LESS compile declares them on :root and :root[data-theme="dark"]: load your overrides after that stylesheet. In dark mode the library's dark values still beat a plain :root override.

Either way, :root[data-theme="dark"] { … } sets dark-only values.

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"]
    }
  }
}

License

MIT