open-index/open-npm huggingface dataset:
npm package: @hydralms/components
Description: React component library for LMS platforms
Author: HydraLMS
Latest version: 0.3.1

# @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

```bash
pnpm add @hydralms/components
```

### Peer Dependencies

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

## Quick Start

Wrap your app with `HydraProvider` and import the stylesheet:

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

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

Import components directly:

```tsx
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](https://hydralms.com)

## License

MIT