@hydralms/components

A React component library for building learning management systems. 49 composable components and 17 full-page sections built on Tailwind CSS v4 and Base UI.

Install

pnpm add @hydralms/components

Peer Dependencies

pnpm add react react-dom tailwindcss@^4 @base-ui/react

Quick Start

Wrap your app with HydraProvider and import the stylesheet:

import { HydraProvider } from "@hydralms/components";
import "@hydralms/components/styles.css";

function App() {
  return (
    <HydraProvider>
      <YourApp />
    </HydraProvider>
  );
}

Import components directly:

import { VideoPlayer, FlashcardDeck, StatusBadge } from "@hydralms/components";
import { QuizSession, GradebookTable } from "@hydralms/components/sections";

What's Included

Base Components (32)

Assessment, quiz questions, curriculum trees, video players, flashcards, progress indicators, feedback controls, and more.

Page Sections (17)

Drop-in LMS features: QuizSession, LecturePlayer, GradebookTable, ProgressDashboard, CourseOutline, AssessmentReview, and more.

Tailwind CSS v4

This library uses Tailwind CSS v4 with design tokens scoped under .hydra-root. The HydraProvider handles this automatically.

Documentation

Full docs with live demos: hydralms.com

License

MIT