Skip to content

✨ Modern Next.js Dashboard Template A responsive, beautifully designed admin dashboard built with Next.js, Tailwind CSS, and shadcn/ui. Features a collapsible sidebar, data tables, charts, dark mode, and reusable UI components. Perfect for SaaS, analytics, or admin panels. 🔨 Stack: Next.js 14 · Tailwind CSS · shadcn/ui · Recharts · TanStack Table

Notifications You must be signed in to change notification settings

lutfi-haslab/haslab-ui

Repository files navigation

Here’s a polished GitHub repository description for your dashboard project, along with a README.md outline to attract contributors and users:


GitHub Repo Description

✨ Modern Next.js Dashboard Template
A responsive, beautifully designed admin dashboard built with Next.js, Tailwind CSS, and shadcn/ui. Features a collapsible sidebar, data tables, charts, dark mode, and reusable UI components. Perfect for SaaS, analytics, or admin panels.

🔨 Stack: Next.js 14 · Tailwind CSS · shadcn/ui · Recharts · TanStack Table


README.md Outline (for your repo)

# Next.js Dashboard Template  

A sleek, responsive dashboard template for modern web apps. Designed for developers who need a production-ready starter with clean code and customizable components.  

![Dashboard Preview](https://example.com/preview.jpg) *(Add a screenshot later)*  

## ✨ Features  
- **Next.js 13** (App Router) with TypeScript  
- **Tailwind CSS** for utility-first styling  
- **shadcn/ui** for accessible, pre-built components  
- **Responsive Layout**: Collapsible sidebar, mobile-friendly grid  
- **Demo Components**:  
  - 📊 Interactive charts (Recharts)  
  - 📑 Paginated & sortable data tables (TanStack Table)  
  - 📦 Metric cards with trends  
- **Themes**: Dark/light mode toggle  
- **Fast & Optimized**: Static generation (SSG) or server-side (SSR) ready  

## 🛠️ Installation  
1. Clone the repo:  
   ```bash  
   git clone https://github.com/your-username/nextjs-dashboard.git  
  1. Install dependencies:
    npm install  
  2. Run the dev server:
    npm run dev  

📂 Project Structure

/src  
├── app/(dashboard)/       # Main dashboard pages  
├── components/            # Reusable UI (sidebar, cards, etc.)  
├── lib/                   # Utilities, hooks, and data logic  
├── styles/                # Global Tailwind/CSS  
└── public/                # Static assets  

🎨 Customization

  • Edit colors in tailwind.config.js
  • Replace placeholder data in /lib/data
  • Modify sidebar links in config/navigation.ts

📄 License

MIT

About

✨ Modern Next.js Dashboard Template A responsive, beautifully designed admin dashboard built with Next.js, Tailwind CSS, and shadcn/ui. Features a collapsible sidebar, data tables, charts, dark mode, and reusable UI components. Perfect for SaaS, analytics, or admin panels. 🔨 Stack: Next.js 14 · Tailwind CSS · shadcn/ui · Recharts · TanStack Table

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages