Learn the basics of working with Solid Material components.


Start importing a component from @solidjs-material/core:

import { Button } from "@solidjs-material/core";

export function App() {
  return <Button>Hello</Button>;

Global styles

Solid Material automatically apply global styles such as body background and foreground colors. Every single color is a css variable too! You could use like so:

.some-component {
  background-color: rgb(var(--primary) / 1); /* Plain css */

.some-component {
  @apply bg-primary; /* Tailwindcss */

Released under the MIT License.

Copyright © 2023-PRESENT Carlos Paludetto and Solid Material contributors