DemoBuy

Getting Started with LMS Starter Kit

Last updated on 2026-05-31

The LMS Starter Kit is a production-ready Next.js template for building learning management systems. It includes 39 screens covering a complete student experience, instructor dashboard, admin portal, and auth flows — all built with Tailwind CSS v4 and shadcn/ui.

What's Included

  • 60+ UI components — primitives, student composites, instructor composites, admin composites, and layout components
  • 39 pages — student, instructor, admin, auth, and commerce pages
  • 5 route groups — (student), (instructor), (admin), (auth), (public) with dedicated layouts
  • Light & dark mode — oklch design tokens with automatic theme switching

Prerequisites

  • Node.js 18.17 or later
  • pnpm (recommended) or npm
  • A code editor — VS Code recommended

Quick Start

# 1. Clone the repository (use the URL from your purchase email)
git clone <your-repo-url> lms-kit
cd lms-kit

# 2. Install dependencies
pnpm install

# 3. Start the dev server
pnpm dev

Open http://localhost:3000 to browse the student dashboard.

Kit Overview

Area Screens Key Features
Student 18 Dashboard, courses, lessons, quizzes, progress, certificates
Instructor 7 Dashboard, course management, curriculum editor, analytics
Admin 8 Dashboard, users, approvals, categories, tickets, reports
Auth 3 Login, register, forgot password
Commerce 3 Pricing, checkout, 404

Tech Stack

Technology Purpose
Next.js 16 React framework with App Router
React 19 UI library
Tailwind CSS v4 Utility-first styling with oklch tokens
shadcn/ui Component primitives
Lucide React Icon library
Recharts Dashboard charts
Embla Carousel Featured course carousel
next-themes Dark mode support
Sonner Toast notifications
date-fns Date formatting

Next Steps

Next

Installation