npm package: @ngenux/ngage-ui-components
Description: A comprehensive React UI component library built with Radix UI, Tailwind CSS, and TypeScript for modern web applications
Author: Ngenux
Latest version: 1.0.0

# @ngenux/ngage-ui-components

A comprehensive React UI component library for building modern, interactive learning and streaming applications.

## Installation

```bash
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

```bash
npm install @ngenux/ngage-ui-components
```

### 2. Configure Tailwind CSS

Add the package path to your `tailwind.config.js`:

```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

```tsx
import { ThemeProvider } from '@ngenux/ngage-ui-components';

function App() {
  return (
    <ThemeProvider>
      {/* Your app content */}
    </ThemeProvider>
  );
}
```

## Usage

Import and use components in your React application:

```tsx
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:

```tsx
import type { StreamConfig, UserJourneyStep } from '@ngenux/ngage-ui-components';
```

## Utilities

The package also exports utility functions:

```tsx
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:

```tsx
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:

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

## License

MIT

## Support

For issues, feature requests, or questions, please contact the Ngenux team.