Getting Started

Quick guide to start using Solid Material.

Installation

Install the base package which contains every component:

npm install @solidjs-material/core

Install tailwind package which contains the design system:

npm install @solidjs-material/tailwind --save-dev

Adding Tailwindcss preset

Tailwindcss need to find Solid Material components in package dist folder.

const { designSystem } = require("@solidjs-material/tailwind");

module.exports = {
  content: ["./node_modules/@solidjs-material/core/dist/*.{js,cjs}", "./src/**/*.tsx"],
  presets: [designSystem({ baseColor: "#FACADA" })], // Try another colors!
};

Adding icons

You can use any icon library that you want.

Using Solid Icons

Start adding solid-icons to your project:

npm install solid-icons

Import some icons to your source code:

import { Button } from "@solidjs-material/core";
import { FiHeart } from "solid-icons/fi";

function App() {
  return <Button startIcon={() => <FiHeart />}>Sponsor</Button>;
}

Using Unplugin Icons

Follow unplugin guides to add support to your bundler/framework.

Install you desired icon pack:

npm install @iconify-json/iconoir --save-dev

Use compiler: solid option in plugin:

icons({ compiler: "solid" });

If you use typescript, add the following configuration on your tsconfig.json:

{
  "compilerOptions": {
    "types": ["unplugin-icons/types/solid"]
  }
}

Import some icons to your source code:

import { Button } from "@solidjs-material/core";
import Heart from "virtual:icons/iconoir/heart";

function App() {
  return <Button startIcon={() => <Heart />}>Sponsor</Button>;
}

Adding custom webfonts

Solid Material is designed to use any google font that you may want. You can install them using Fontsource.

npm install @fontsource/poppins

Import font variants in your source code:

import "@fontsource/poppins";

Modify Tailwindcss configuration to use the installed webfont:

const { designSystem } = require("@solidjs-material/tailwind");
const defaultTheme = require("tailwindcss/defaultTheme");

module.exports = {
  content: ["./node_modules/@solidjs-material/core/dist/*.{js,cjs}", "./src/**/*.tsx"],
  presets: [designSystem({ baseColor: "#FACADA" })], // Try another colors!
  theme: {
    extend: {
      fontFamily: {
        sans: ["Poppins", ...defaultTheme.fontFamily.sans],
      },
    },
  },
};

---