SUID (SolidJS User Interface Design)

SUID is a port of Material-UI (MUI) Core 5.5.0 built specifically for SolidJS. It consists of several specialized packages:

• @suid/material: The main port of Material-UI components.
• @suid/icons-material: Material Design icons provided as SVG SolidJS components.
• @suid/codemod: A migration tool to help convert existing MUI React code to SUID SolidJS.
• @suid/vite-plugin: Integration plugin for Vite users.
• @suid/system: The styling system used across SUID packages.
• @suid/styled-engine: The underlying engine used by @suid/system.
• @suid/base: Unstyled base components used by @suid/material.
• @suid/css: CSS-in-JS utilities.
• @suid/types: TypeScript definitions used by the ecosystem.
• create-suid: CLI tool for project initialization.

The plugin automatically transforms SUID barrel imports into direct path imports. This optimization helps improve build performance and tree-shaking by preventing the loading of entire library modules when only a single component or icon is needed.

Example Transformation:

Input:

import { Wifi } from "@suid/material-icons";
import { Button } from "@suid/material";

Output (Optimized):

import Wifi from "@suid/material-icons/Wifi";
import Button from "@suid/material/Button";

// Input
import { Wifi } from "@suid/material-icons";
import { Button } from "@suid/material";
// Output
import Wifi from "@suid/material-icons/Wifi";
import Button from "@suid/material/Button";

To use the core base components of SUID in your project, install the @suid/base package using npm.

npm install @suid/base

To quickly scaffold a new project using SUID, use the create-suid CLI tool via npm. This is the recommended way to set up a new SolidJS project with SUID pre-configured.

npm init suid

You can scaffold a new SolidJS User Interface Design (SUID) project using the create-suid CLI tool. This tool automates the setup process for starting a new application or library using the SUID ecosystem.

Depending on your preferred package manager, use one of the following commands:

# Using npm
npm init suid

# Using pnpm
pnpm create suid

To use the Material Design icons in your SUID project, install the @suid/icons-material package via npm.

npm install @suid/icons-material

To install the @suid/site package, use the following npm command:

npm install @suid/site

To use the plugin, add suidPlugin() to your plugins array in vite.config.ts. It is typically used alongside vite-plugin-solid or solid-start/vite configurations.

// vite.config.ts
import suidPlugin from "@suid/vite-plugin";
import { defineConfig } from "vite";
import solidPlugin from "vite-plugin-solid";

export default defineConfig({
  plugins: [suidPlugin(), solidPlugin()],
});

Install the @suid/styled-engine package using npm to use it as the styling engine for SUID components.

npm install @suid/styled-engine

To use @suid/css in your project, install it via npm:

npm install @suid/css

Install the @suid/codemod package via npm to use the automated migration tools provided by SUID.

npm install @suid/codemod

If you are moving from a React-based Material-UI project to SolidJS, you can use the @suid/codemod package to automate the migration of your code. Additionally, SUID provides a web-based tool for manual React-to-SolidJS conversion assistance.

https://suid.dev/tools/react-to-solid