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],
},
},
},
};