@ngenux/ngage-ui-components

A comprehensive React UI component library for building modern, interactive learning and streaming applications.

Installation

npm install @ngenux/ngage-ui-components

Prerequisites

This package requires the following peer dependencies:

• React >= 18.2.0
• React DOM >= 18.2.0
• Tailwind CSS (for styling)

Setup

1. Install the package

npm install @ngenux/ngage-ui-components

2. Configure Tailwind CSS

Add the package path to your tailwind.config.js:

module.exports = {
  content: [
    './src/**/*.{js,jsx,ts,tsx}',
    './node_modules/@ngenux/ngage-ui-components/dist/**/*.{js,mjs}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

3. Wrap your app with ThemeProvider

import { ThemeProvider } from '@ngenux/ngage-ui-components';

function App() {
  return (
    <ThemeProvider>
      {/* Your app content */}
    </ThemeProvider>
  );
}

Usage

Import and use components in your React application:

import {
  Button,
  Card,
  CardHeader,
  CardTitle,
  CardContent,
  Input,
  Label,
} from '@ngenux/ngage-ui-components';

function MyComponent() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Welcome</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="space-y-4">
          <div>
            <Label htmlFor="name">Name</Label>
            <Input id="name" placeholder="Enter your name" />
          </div>
          <Button>Submit</Button>
        </div>
      </CardContent>
    </Card>
  );
}

Component Categories

UI Components

Basic building blocks for your application:

• Button, Input, Label, Textarea
• Card, Dialog, Sheet, Popover
• Table, Tabs, Accordion
• Avatar, Badge, Skeleton
• And many more...

Atoms

Small, reusable components:

• MetricCard, CollapsibleSection
• DateTimePicker, StreamQualitySelector
• ParticipantCard, ViewerAvatar

Molecules

Composite components combining multiple atoms:

• ChatPanel, LiveQA, LiveNotes
• ParticipantsList, AvatarGroup
• DataTable, UserTable
• CalendarView, EventForm

Organisms

Complex, feature-rich components:

• LiveConference, LiveConferenceMobile
• QADashboard, ScheduleLayout
• VideoSettingsModal, TeacherDashboard

Templates

Full page layouts:

• WaitingRoomTemplate

Layout Components

• Header, Footer, RootLayoutClient

Theme Components

• ThemeProvider, ThemeToggle

TypeScript Support

This package is written in TypeScript and includes type definitions. Import types as needed:

import type { StreamConfig, UserJourneyStep } from '@ngenux/ngage-ui-components';

Utilities

The package also exports utility functions:

import { cn } from '@ngenux/ngage-ui-components';

// Merge Tailwind classes safely
const className = cn('px-4 py-2', 'bg-blue-500', customClass);

Hooks

Custom React hooks are available:

import { useStream } from '@ngenux/ngage-ui-components';

Dependencies

This package includes the following major dependencies:

• Radix UI primitives for accessible components
• Framer Motion for animations
• React Hook Form for form handling
• AWS SDK for streaming functionality
• Firebase for backend integration
• And many more specialized libraries

See package.json for a complete list.

Styling

Components are styled using Tailwind CSS. Ensure you have:

1. Tailwind CSS installed in your project
2. The package path added to your Tailwind config
3. Tailwind directives in your CSS:

@tailwind base;
@tailwind components;
@tailwind utilities;

License

MIT

Support

For issues, feature requests, or questions, please contact the Ngenux team.