Solid Material

Solid-js high quality components built with Tailwindcss and Kobalte following Material You guidelines.

Features

• A11y
• Tailwind CSS
• Automatic dark mode based on system settings

Get Started

Install @solidjs-material/core and @solidjs-material/tailwind:

npm install @solidjs-material/core && npm install --save-dev @solidjs-material/tailwind
yarn add @solidjs-material/core && yarn add -D @solidjs-material/tailwind
pnpm add @solidjs-material/core && pnpm add -D @solidjs-material/tailwind

Setup tailwindcss preset:

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

module.exports = {
  content: [
    "./node_modules/@solidjs-material/core/dist/*.{js,cjs}", // You must specify solid material core components
    "./src/**/*.{ts,tsx}", // Your app components
  ],
  presets: [designSystem({ baseColor: "#FACADA" })], // Try to change baseColor
};

Start using the components:

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

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

Roadmap

Components

• Button
• Card
• Checkbox
• Chip
• Date Pickers
• Divider
• Dialog
• List
• Menu
• FAB
• Extended FAB
• Icon Button
• Navigation Drawer
• Navigation Drawer Item
• Navigation Rail
• Navigation Item
• Progress Indicator
• Radio Button
• Search
• Side Sheet
• Slider
• Snackbar
• Switch
• Tabs
• Text Field
• Time Fields
• Top App Bar

Library related

• Changesets
• Tests
• Docs