Sellzy Dashboard Documentation

Welcome to Sellzy Dashboard , a comprehensive, modern Next.js admin dashboard template designed for e-commerce platforms. The Sellzy Dashboard provides a robust set of tools and interfaces to manage products, sellers, customers, orders, marketing campaigns, and extensive reporting. Built with Next.js (App Router), React 19, and Tailwind CSS v4.

Key Features

The dashboard includes a wide array of pre-built modules for complete e-commerce management:

• E-commerce Core: Manage Products, Categories, Inventory, Orders, Transactions, and Refunds.
• User Management: Dedicated interfaces for Admins, Sellers, and Customers.
• Marketing & Promotions: Tools for Coupons, Flash Sales, Featured Deals, Promo Popups, Abandoned Carts, and Clearance.
• Analytics & Reporting: Interactive Dashboard metrics, detailed Financial Reports, and Top Products tracking.
• Site Controls: Manage Home Page layout, FAQs, Privacy Policies, Terms & Conditions, and general site settings.
• Communication: Built-in Inbox and Support messaging interfaces.

Template Structure

The application follows a modular and scalable Next.js directory structure:

Getting Started

Follow these steps to get started with the codebase and run the development server:

1. Prerequisites & Installation

Before you begin, ensure you have Node.js (v18 or newer recommended) installed on your machine. If you haven't installed it yet, please visit the official Node.js website to download and install the LTS (Long Term Support) version.

Once Node.js is installed, open your terminal, navigate to the project directory, and run the following commands:

# Install dependencies
npm install
# or
yarn install
# or
pnpm install

# Start the development server
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the dashboard. The application will automatically update as you modify the source files.

2. Styling and Theming

The project uses Tailwind CSS v4 seamlessly integrated via @tailwindcss/postcss.

• Global Colors & Tokens: You can easily update the primary color scheme, typography, and shadows directly inside /app/globals.css under the @theme directive. Modifying these variables will automatically propagate changes throughout the entire template.
• Components: UI components in /components/ui utilize standard Tailwind utility classes combined with class-variance-authority for variant management, making it trivial to adjust designs intuitively.

3. Modifying Components

Most interactive elements are constructed using Headless UI to ensure high accessibility and unopinionated styling. To adapt complex components like Dropdowns or Modals, navigate to components/layout/ and adjust the Tailwind classes applied directly to the @headlessui/react elements.

Building for Production & Deployment

Building

To create an optimized production build, run:

npm run build

After the build completes, you can start the production server:

npm run start

Deployment

The easiest way to deploy this Next.js app is to use the Vercel Platform. Check out the Next.js deployment documentation for more details.

Sources and Credits

This template relies on several excellent open-source libraries that power its robust functionality and beautiful user interface:

Next.js

The React Framework for the Web

React

The library for web and native user interfaces

Tailwind CSS

Rapidly build modern websites without ever leaving your HTML

Headless UI

Completely unstyled, fully accessible UI components

ApexCharts

Modern & Interactive Open-source Charts

🍞

Sonner

An opinionated toast component for React

📅

React Day Picker

Date picker component for React

Huge Icons

Beautiful and extensive iconography

G

Google Fonts

Making the web more beautiful, fast, and open

F

Freepik

High-quality photos, vectors, and PSD assets