Projetos relacionados

Uma lista cuidadosamente selecionada de bibliotecas que valem a pena dar uma olhada.

Como o escopo dos problemas que o Material-UI resolve é limitado, tentamos interagir bem com outras bibliotecas. Sinta-se à vontade para enviar uma solicitação de pull request para adicionar outro projeto; será aceito se for adequado.

Recursos de design

Esta é uma coleção de projetos de terceiros que estendem Material-UI.

• Figma: Figma para Material-UI — Um kit de interface de usuário grande com mais de 600 componentes de Material-UI trabalhados à mão 🎨.
• Sketch: Sketch para Material-UI — Um kit de interface de usuário grande com mais de 600 símbolos de Material-UI trabalhados à mão 💎.
• Adobe XD: Um grande conjunto UI com mais de 600 símbolos Material-UI feitos à mão.
• Framer: Framer para Material-UI — Um pequeno kit MIT de interface de usuário em preview, de componentes de Material-UI trabalhado a mão.

Imagens e ilustrações

• Unsplash: 📷 Um ótimo recurso para encontrar fotos grátis de alta resolução e bonitas que você pode usar em seus projetos.
• unDraw: 📐 Como Unsplash, mas para incríveis ilustrações vetoriais.

Ferramentas de IDE

• Material-UI Snippets extensão VSCode fornecendo snippets.
• Material-UI Codemorphs extensão VSCode fornecendo codemods.
• eslint: detect unused classes: Plugin ESLint para detectar classes de estilo não usadas com @material-ui/styles.

Componentes

Esta é uma coleção de projetos de terceiros que estendem Material-UI.

Leiaute

• @mui-treasury/layout: Componentes para lidar com leiautes em geral de uma página. Você pode encontrar alguns exemplos, como este, um clone de reactjs.org.

Notificação

• notistack: Facilita a exibição de snackbars (assim você não precisa ter que lidar com o estado de aberto/fechado delas).

Upload

• material-ui-dropzone: Construído sobre o react-dropzone.

Formulário

• formik-material-ui Bindings para usar Material-UI com formik.
• redux-form-material-ui Bindings para usar Material-UI com Redux Form.
• mui-rff Bindings para usar Material-UI com React Final Form.
• data-driven-forms MUI mapper: Bindings para usar Material-UI com Data Driven Forms.

Carrossel

• material-auto-rotating-carousel: Apresente novos usuários ao seu aplicativo.

Imagem

• material-ui-image: Imagens são feias até serem carregadas. Materialize elas com material image! Irá desvanecer, como sugere o padrão de carregamento de imagem material.

Paginação

• material-ui-flat-pagination: Um componente de paginação de design plano para Material-UI.

Agenda/Calendário

• dx-react-scheduler-material-ui: Um componente agenda/calendário para Material-UI com múltiplas visualizações de calendário, edição, compromissos de recorrência e recursos de navegação por data (licença paga).

Gráfico

• dx-react-chart-material-ui: Gráficos Material-UI para visualizar dados usando uma variedade de tipos de série, incluindo barra, linha, área, dispersão, pizza e muito mais (licença paga).

Dialog

• material-ui-confirm: Fornece diálogos de confirmação fáceis de usar para simplificar as ações de confirmação do usuário sem escrever código boilerplate.

Seleção de cores

• material-ui-color: Coleções de componentes de cor para material-ui. Sem dependências, pequeno, altamente customizável e com suporte ao tema!

Blocos

• components-extra: Fornece um conjunto de componentes "molecule" construídos com base no Material-UI, com componentes de Footer, CookiesBanner, botão BackToTop e outros elementos complexos altamente customizados para ajudar os desenvolvedores a construir partes macro de sua interface muito rapidamente. Esses componentes são frequentemente duplicados em sites - esta biblioteca resolve exatamente este problema.

Temas

• create-mui-theme: Uma ferramenta online para criar temas de Material-UI por meio da ferramenta de cor do Material Design.
• material-ui-tema-editor: Uma ferramenta para gerar temas para seus aplicativos de Material-UI, basta selecionar as cores e ter uma visualização ao vivo.
• Material palette generator: O gerador de paleta do Material pode ser usado para gerar uma paleta para qualquer cor que você inserir.