Material Me is a collection of pre-designed components built using NextJS, React and Tailwind CSS.

Frequently Asked Questions 🙋


MaterialMe is not an npm package that can be installed as a dependency in your project. Rather, it is a collection of reusable components that have been built using NextJS and Tailwind CSS.

The code you receive belongs to you and you can use it as you wish, within the scope of the License.

What do you mean by 'not npm package'?

I mean that it's not intended to be installed as a dependency like most other typical component libraries.

Instead, MaterialMe allows you to handpick the specific components you require, and then simply copy and paste the code into your project. The code is yours.

This gives you complete ownership of the code, allowing you to customize it as needed to fit your specific project requirements.

Why copy/paste and not install as a dependency?

The underlying concept here is to empower you with complete ownership and control.

By copying and pasting the code, you gain the flexibility to adjust and fine-tune the components to align perfectly with the specific requirements of your project, without being confined by pre-existing styles or implementation intricacies tightly intertwined with the library.

This approach also spares you the time that would otherwise be spent on learning and acquainting yourself with a new library. Instead, it lets you concentrate on efficiently customizing the styles and functionality of the components.

As an illustration, here's an example of how you can have a component styled within just 5 minutes:

So, do I need to copy and paste all the components?

No, you will receive a file that includes pre-configured Prettier, imports sorts, Eslint settings and Tailwind configuration: such as fonts, animations, rounded corners, and shadows related to Material UI have been added.

All the elements, components, and templates that you see here are also included in the file. So, you can start working with it right away by installing all the dependencies and running the local server for your project.

Can I only use the design system with your components?

No, you can use any other component library, and sometimes they may even be more convenient. You can style your own components and use the design system for application development and design.

MaterialMe components will also be useful if you plan to develop your own UI, as it will save a lot of time with pre-made designs that can easily be customized to your requirements.

What technical moments are there?

Custom hooks and state managers are not used here, as you may have your own preferences. And I have tried to minimize the number of external dependencies so that you can direct your project in the direction you want.

These are simple components that aim to save time on basic things like inputs, cards, charts, and so on.

Should I strictly adhere to Material You guidelines?

Guidelines should be viewed more as recommendations. The essence of this library is that it covers myriad details, from color palettes to pre-made components. However, you have the absolute freedom to overhaul everything. Nothing stands in the way of transforming Material You's design into a neobrutalism format, altering button curvatures, adding custom elements to components, and so forth. It's all under your complete control.

With the help of this library, I've personally worked on projects where I completely reimagined the styling and adapted components. So, it's a convenient starting tool that allows you to accomplish various tasks. If you find something lacking, it's easy to add or modify.