Customization

The LMS Starter Kit is designed to be customized for your learning platform. All components use design tokens and Tailwind CSS utilities, making brand adaptation straightforward.

Changing Colors

Update CSS custom properties in app/globals.css:

:root {
  --primary: oklch(0.55 0.2 250);
  --primary-foreground: oklch(0.98 0 0);
  --accent: oklch(0.6 0.15 150);
  --accent-foreground: oklch(0.98 0 0);
}

All components automatically inherit the new colors — buttons, badges, links, charts, progress bars, and focus rings.

Changing Typography

Configure fonts in app/layout.tsx:

import { Inter, DM_Sans, JetBrains_Mono } from "next/font/google";

const inter = Inter({ subsets: ["latin"], variable: "--font-sans" });
const dmSans = DM_Sans({ subsets: ["latin"], variable: "--font-heading" });

Swap these for any Google Font or local font files. The CSS variables --font-sans, --font-heading, and --font-mono control body text, headings, and code respectively.

Replacing Seed Data

All mock data lives in data/seed.ts. Replace it with your data source:

Static data (SSG/ISR)

import { getCourses } from "@/lib/api"

export default async function CoursesPage() {
  const courses = await getCourses()
  return <CourseGrid courses={courses} />
}

CMS integration

Replace seed data imports with your CMS client:

import { sanityClient } from "@/lib/sanity"

const courses = await sanityClient.fetch(`*[_type == "course"]`)

Database

import { db } from "@/lib/db"

const courses = await db.course.findMany({ include: { instructor: true } })

Extending Components

Use the cn() utility to add custom classes:

import { Button } from "@/components/ui/button"

<Button className="rounded-full shadow-lg" size="lg">
  Enroll Now
</Button>

Adding Component Variants

Components use class-variance-authority:

const buttonVariants = cva("...", {
  variants: {
    variant: {
      default: "...",
      brand: "bg-brand-500 text-white hover:bg-brand-600",
    },
  },
})

Customizing the Sidebar

Edit components/layout/app-sidebar.tsx to:

• Add or remove navigation links
• Change the logo
• Add new sections for custom features
• Modify the user menu

Customizing the Lesson Player

The lesson player at app/(student)/lessons/[id]/page.tsx can be customized to:

1. Integrate a real video player (Mux, Vimeo, YouTube embed)
2. Add note-taking alongside the video
3. Track watch progress and send to your API
4. Add playback speed controls

Adding New Course Fields

1. Update the Course interface in types/index.ts
2. Add the field to courses in data/seed.ts
3. Display it in CourseCard or the course detail page

Adding New Admin Pages

Follow the existing pattern:

1. Create a new page in app/(admin)/admin/your-page/page.tsx
2. Add a navigation link in components/layout/app-sidebar.tsx
3. Create any needed composites in components/shared/

Removing Unused Features

Delete directories you don't need:

• Don't need discussions? Delete app/(student)/discussions/
• Don't need achievements? Delete app/(student)/achievements/
• Don't need live sessions? Delete app/(student)/live-sessions/
• Don't need study groups? Delete app/(student)/study-groups/
• Run pnpm build to verify no broken imports

Using shadcn/ui CLI

Add new components alongside the kit:

npx shadcn@latest add <component-name>

Components install to components/ui/ and integrate seamlessly with the existing design tokens.