List of NPM packages for Nextjs and Reactjs

List of NPM libraries that helps to build small and large-scale applications with next.js. I created a list based on my working experience. In this list, I used 80% of the package in my life as a frontend developer. In the future, I will discover more packages and mention them in the current list that helps to build nextjs or frontend developers more efficiently for everyone.

Contribute

You can share your favorite library, tool, or template related to nextjs. It helps full for other developer. before the share your favorite library, tool, or template please read our Contribution guide line.

Specfiy for Nextjs

1. Next SEO : Next SEO is a plugin that helps manage the SEO in Next.js.
2. Next sitemap : Next sitemap library help to add sitemap.xml in your nextjs app.
3. Next auth : Next auth library provides authorization functionality for your app.
4. Next PWA : Next PWA library help to enable the progressive Web Apps functionality in your application.
5. Content layer : The content layer works with nextjs and markdown and helps to build the blog application.
6. Nextjs progressbar : Nextjs progress bar shows the loading indicator in nextjs.
7. Nextjs Google Analytics : Adding the google analaytics in your nextjs app.
8. Next MDX : MDX library allows you to combine the JSX and markdown content.
9. Next-themes: You can enable the dark-to-light theme toggle with next-themes in your Next.js app.
10. Nextra : Nextra is a simple, powerful, and flexible site generation framework to build blogs and documents with Next.js and MDX.
11. Create t3-app : Build the full-stack application with TypeScript,Prisma, tRPC, NextAuth, Tailwind CSS and Next.js app.

Headless CMS

1. Strapi : Strapi is a powerful open-source Node.js based Content Management Systems (CMS) perfect for small to large scale websites.
2. Ghost : Ghost is a popular open-source CMS that is perfect for creating blogs. It offers a simple, user-friendly and API interface that makes creating and publishing articles easy.

State Management

1. Zustand : Zustand is a fast and scalable state management tool built by developers for React.js.
2. Redux : Redux is an open-source JavaScript library for state managing tools. It is most commonly used with libraries such as React or Angular and helps build user interfaces for applications.

React UI Library

1. MUI : Material UI provides a simple, customizable, accessible library of React components.
2. Primer React : Primer React built with Primer CSS and ReactJs.
3. React bootstrap : React Bootstrap built based on react and bootstrap.

Icon

1. react icons: Used the popular svg icons in your React projects easily with react-icons.

Nextjs based Template

1. Blogify: Blogify is a specific design for blogging. It is an open-source template for blogging.
2. Minimalist: Minimalist is an open-source next.js-based blog template. Minimalist template design with tailwind CSS.

Tailwind CSS

1. Flowbite : Flowbite is a popular library builtin with tailwind CSS and provides inbuilt tailwindcss components for developers.
2. Radix UI : Radix-ui is a popular library builtin on the tailwind css framework. Radix UI feels like material UI.
3. Material Tailwind : Material Tailwind comes with ready-made components. You can design pure HTML and react website layouts using material tailwind components.
4. Meraki UI : Meraki UI provides 144+ custom UI components built with tailwind CSS and Alpine JS.
5. Sailboat UI : Sailboat UI provides 150+ tailwind CSS components with tailwind CSS and alpine.js.
6. Kometa : Kometa is UI kit based on tailwind CSS. Kometa provides 130 inbuilt tailwinds CSS-based components, and Kometa is free.
7. Headless UI : Headless UI is a slight tailwind CSS-based component library only for react developers.
8. Daisy UI : Daisy UI is an open-source UI based on tailwind CSS. The Big motivation is to use daisy UI in our project.
9. Hyper UI : Hyper UI is a free open-source tailwind CSS-based component for modern design. Hyper UI is a complete bundle of CSS and javascript.
10. Flowrift : Flowrift is a free open-source tailwind CSS-based component library. It provides different category components for the website.
11. Tailwind UI kit : The tailwind UI kit provides an extensive list of inbuilt components. In the free plan tailwind, the UI kit provides only 250 components; in the paid plan, you access all components and templates for a lifetime.
12. Tailwind-kit : The tailwind kit provides access to over 250 free tailwinds CSS-based components.
13. Wickedblocks : Wickedblocks provide a free 120 fully responsive tailwind CSS-based component, and All component comes ready to copy and paste into your Tailwind projects.
14. Tailus : Tailus provides a list of UI components and templates built on tailwind CSS. Tailus components offer a rich and modern UI experience.
15. Tailgrids : Tailgrids provides a variety of 500+ components, blocks, sections, and templates built on tailwind CSS.
16. Kutty : Kutty is based on reusable tailwind CSS components and adds component interaction with alpine.js.
17. Windmill UI : Windmill UI is a free react base UI component library design with tailwind CSS.
18. Myna UI : Myna UI is open source tailwind CSS-based component library. It provides few components as compared to other libraries.
19. Tailwind Starter Kit : Tailwind Starter Kit is a Free and Open Source library. The Tailwind Starter Kit is based on Tailwind CSS.
20. Tailblocks : Tailblocks is a small library based on tailwind CSS. Tailblocks provide 60+ inbuilt components.
21. Tailwind toolbox : A tailwind toolbox site is where you find other people's projects on tailwind CSS. All the project is free, and you copy and paste code into your project.
22. Headless UI : Built-in the react UI components designed with Tailwind CSS.

Development Tool

1. Typescript : Typescript help to write the type safe javascript for production.
2. @next/eslint-plugin-next : Next/eslint-plugin help to resolve the error
3. @next/bundle-analyzer : Analyzer the bundle size with webpack-bundle-analyzer package in your Next.js.

Chrome Extension

1. Gimli : Gimli chrome extension is an innovative visual tool for frontend developers to build with tailwind CSS.

Utility

1. Demo posts for markdown: Demo markdown posts are used to design your new blog base template. you do not write markdown demo posts. you can use demo markdown posts with any static site generator, which supports markdown. for example next.js, gatsby, lume, fresh, etc. Demo markdown posts are written with Lorem Ipsum. In markdown posts, I can use bold, italic, code block, inline code, links, images and quotes.