Suid

screenshot of Suid
solid
vite
material-ui

A port of Material-UI (MUI) built with SolidJS.

Overview:

SolidJS User Interface Design (SUID) is a port of Material-UI (MUI) built with SolidJS. It includes a set of utils and components that have been ported from MUI Core and more. MUI has a large development community, a long history, and is used by large corporations. However, the main issue with MUI is that it is built on React, and this is where SUID comes in. The project aims to bridge the gap between MUI and SUID by syncing incoming changes using tools like codemod, which is a React to Solid transformer. The goal is to avoid creating another library that could become obsolete and instead develop under the shadow of MUI.

Features:

  • @suid/material: A port of Material-UI (MUI) built with SolidJS.
  • @suid/icons-material: Material Design icons as SVG SolidJS components.
  • @suid/codemod: Tool for migrating MUI React code to SUID SolidJS.
  • @suid/vite-plugin: SUID integration plugin for Vite.
  • @suid/styled-engine: Styled engine used by @suid/system.
  • @suid/system: Styles system used by SUID packages.
  • @suid/base: Unstyled base components used by @suid/material.
  • @suid/css: CSS render in JS.
  • @suid/types: Types used by SUID packages.
  • @suid/site: SUID website.
  • create-suid: CLI tool for creating a SUID project easily.
solid
Solid

SolidJS is a declarative JavaScript library for building user interfaces, offering a reactive programming model for efficient updates. It stands out for its reactivity system that minimizes unnecessary re-renders and its small bundle size, making it a performant choice for developing lightweight and reactive web applications.

vite
Vite

Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects

material-ui
Material UI

material-ui adds classes to Tailwind CSS for all common UI components. Classes like btn, card, etc. This allows us to focus on important things instead of making basic elements for every project.

eslint
Eslint

ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.

material-design
Material Design

Material Design is a design system developed by Google that provides a set of guidelines, components, and tools for creating visually appealing and functional user interfaces. Material Design is designed to be flexible and customizable, making it a great choice for a wide range of applications and use cases.

typescript
Typescript

TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.