Installation

Basic guide to install the library with your favorite package manager:

Auto-installation

Initialize the project with the starter kit.

npm init suid

Manual installation

Install the dev dependencies.

npm install typescript vite vite-plugin-solid @suid/vite-plugin

Install the SUID dependencies.

npm install @suid/material @suid/icons-material

Create the

tsconfig.json

file:

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "jsx": "preserve",
    "jsxImportSource": "solid-js",
    "types": ["vite/client"],
    "noEmit": true,
    "isolatedModules": true
  }
}

Add the

vite.config.ts

file with the SolidJS and SUID plugins:

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

export default defineConfig({
  plugins: [suidPlugin(), solidPlugin()],
  build: {
    target: "esnext",
  },
});

Create the

index.html

file with the Roboto font:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"
      rel="stylesheet"
    />
    <title>Suid App</title>
  </head>

  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <script src="/src/index.tsx" type="module"></script>
  </body>
</html>

Add the

src/index.tsx

entry file:

/* @refresh reload */
import { render } from "solid-js/web";
import App from "./App";

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

And finally add your

src/App.tsx

import { Button } from "@suid/material";

export default function App() {
  return <Button variant="contained">Hello world</Button>;
}

Usage