  
<div align="center">
   <a href="https://www.wrappixel.com/" target="_blank">
      <img src="https://adminmart.github.io/template_api/images/brand-logo/WrapPixel-Logo.svg" alt="sneat-logo" width="100px" height="100px">
   </a>
</div>


<h1 align="center">
   Nextkit Admin Starter Kit with Supabase, Prisma & Mongodb   
   
</h1>


<p align="center">Connecting frontend to backend just got simpler! 🚀  We built Next Kit as a dedicated starter kit for developers. Effortlessly link with SupaBase, MongoDB, and Prisma ORM. Say goodbye to Database integration headaches!🛠</p>



![materialM Free NextJs Admin Template Demo Screenshot](https://www.wrappixel.com/wp-content/uploads/edd/2025/06/Nextkit-Free-794x456-1.webp)


## 👋 Introduction


**NextKit** is a modern, open-source admin dashboard template built with **Next.js** , **Tailwind CSS** , **Supabase** , **MongoDB** and **Prisma** , inspired by the principles of Material Design. It offers a clean, minimal UI combined with a powerful development stack, making it ideal for building fast, responsive, and scalable web applications.

Whether you're developing a content management system (CMS), analytics dashboard, internal admin panel, or SaaS backend, **NextKit** provides you with a flexible and customizable foundation that speeds up development while ensuring a smooth user experience.

Designed with developers in mind, NextKit comes packed with pre-built components, layouts, and utility-first styling, so you can focus more on functionality and less on UI boilerplate.


### 🔑 Key Features

- **Responsive Design**  
  Seamless user experience across desktops, tablets, and mobile devices.
  
- **Ready to use Authentication and Authorization**  
  Utilised supabase powered authentication or a custom Next.js API backend powered by JWT .

- **Complete prisma setup for instant Database connection**  
  Integrated modern prsima ORM to connect or interact with database instantly.

- **Flowbite Integration**  
A rich library of **prebuilt UI components**—like modals, dropdowns, navbars, and tabs—designed specifically for **Tailwind CSS**, helping developers build faster with consistent and responsive designs.

- **Pre-designed Pages**  
  Includes essential pages like dashboards, login, user profiles, error pages, and more.

- **ApexCharts Integration**  
  Interactive, customizable charts powered by ApexCharts for visualizing data effectively.

- **Optimized for Performance**  
  Fast load times, efficient rendering, and a scalable codebase.

---


## 🛠️ Notable Libraries and Tools

| **Library / Tool**    | **Description**                                                                 |
|-----------------------|---------------------------------------------------------------------------------|
| **Tailwind CSS**        | A utility-first CSS framework that enables developers to build custom designs quickly by applying classes directly in HTML. |
| **Apex Charts**             | A powerful charting library for creating interactive and visually appealing charts, perfect for dashboards and data visualizations. |
| **Flowbite**           | A library of UI components built on top of Tailwind CSS that provides ready-to-use elements like modals, dropdowns, and more. |
| **Prisma**             | A modern ORM for Node.js and TypeScript that simplifies database access with auto-generated, type-safe queries and schema syncing. |
| **Supabase**           | An open-source Firebase alternative that offers instant APIs, authentication, and real-time capabilities on top of a PostgreSQL database. |
| **Tabler Icons**       | These icons are simple, lightweight, and easy to integrate, making them perfect for building clean and visually appealing user interfaces. |


---

## 💾 Installation Guide

Welcome to the **NextKit Free Admin Template with supabase and mongodb**! This guide will walk you through the installation and setup process, so you can get started with building your custom admin dashboard in no time.

### 📝 Steps to Install

#### 1. **Clone the Repository**

The easiest way to get started is by cloning the repository or download the zip file. You can do this with the following command:

```bash
git clone https://github.com/wrappixel/nextkit-admin-with-supabase-and-mongodb.git
```

#### 2. **Choose your desired package**

After cloning , you will find two package , one that is powered by Supabase and second one powered by MongoDB

#### 3. **Install Dependencies**

Install the relative Dependencies of the template. You can do this with the following command:

```bash
npm install
```

#### 4. **Initialize project environment variables**

Overwrite the environment variables with real credentials.


#### 5. **Start the Development Server**

Once the dependencies are installed, you can start a local development server to preview the template: 

```bash
npm run dev
```

---

## 📝 Documentation

Welcome to the **NextKit Free Admin Tempalte with Supabase and MongoDB** documentation! Whether you're just getting started or looking to explore advanced features, this guide will help you set up and customize your project with ease.

👉 **[Click here to read the full documentation](https://adminmart.github.io/premium-documentation/nextjs/nextkit/index.html)**


---


##  🤝  Contributing

We welcome contributions from the community to help improve the **NextKit Free Admin Template with Supabase and MongoDB**. Whether it’s fixing bugs, adding new features, improving documentation, or sharing ideas — your input is appreciated!

### 🛠️ How to Contribute

Follow these simple steps to start contributing:

1. **Fork the Repository**  
   Click the **Fork** button on the top-right corner of this repo to create your own copy.

2. **Clone Your Fork**  
   Use the command below to clone your forked repository:
   ```bash
   git clone https://github.com/wrappixel/nextkit-admin-with-supabase-and-mongodb.git

3. **Create a New Branch**  
   Create a new branch to work on your feature or fix. This keeps your changes separate from the main branch:
   ```bash
   git checkout -b feature/your-feature-name

4. **Commit and Push Changes**  
   After making your changes, commit them with a meaningful message and push your branch to your fork:
   ```bash
   git commit -am "Add: Description of changes made"
   git push origin feature/your-feature-name


---

## 🧭 Useful Links
- <p><a href="https://www.wrappixel.com/templates/category/admin-dashboard-templates/?ref=376">Admin Templates</a> from Wrappixel</p>
- <p><a href="https://www.wrappixel.com/templates/category/bootstrap-templates/?ref=376">Bootstrap Templates</a> from Wrappixel</p>
- <p><a href="https://www.wrappixel.com/templates/category/angular-templates/?ref=376">Angular Templates</a> from Wrappixel</p>
- <p><a href="https://www.wrappixel.com/templates/category/react-templates/?ref=376">React Template</a> from Wrappixel</p>
- <p><a href="https://www.wrappixel.com/templates/category/framer-templates/?ref=376">Framer Templates</a> from Wrappixel</p>
-  <p><a href="https://www.wrappixel.com/templates/category/mui-templates/?ref=376">Material UI Templates</a> from Wrappixel</p>
- <p><a href="https://www.wrappixel.com/templates/category/vuetify-templates/?ref=376">Vuetify Templates</a> from Wrappixel</p>
- <p><a href="https://www.wrappixel.com/templates/category/nextjs-templates/?ref=376">NextJs Templates</a> from Wrappixel</p>
- <p><a href="https://www.wrappixel.com/templates/category/nuxt-templates/?ref=376">Nuxt Templates</a> from Wrappixel</p>
- <p><a href="https://www.wrappixel.com/templates/category/tailwind-templates/?ref=376">Tailwind Templates</a> from Wrappixel</p>

---

## 🌐 We are social

[![](https://img.shields.io/badge/GitHub-100000?style=for-the-badge&logo=github&logoColor=white)](https://github.com/wrappixel)  [![twitter](https://img.shields.io/badge/twitter-x?style=for-the-badge&logo=x&logoColor=white&color=%230f1419)](https://twitter.com/wrappixel)  [![facebook](https://img.shields.io/badge/facebook-logo?style=for-the-badge&logo=facebook&logoColor=white&color=%230866ff)](https://www.facebook.com/wrappixel)  [![instagram](https://img.shields.io/badge/instagram-logo?style=for-the-badge&logo=instagram&logoColor=white&color=%23F35369)](https://www.instagram.com/wrappixel)  [![youtube](https://img.shields.io/badge/youtube-logo?style=for-the-badge&logo=youtube&logoColor=white&color=%23cc0000)](https://www.youtube.com/@wrappixel)  [![](https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/company/wrappixel)

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/wrappixel/nextkit-admin-with-supabase-and-mongodb&root-directory=nextkit-nextjs-prisma-supabase) 
