Overview

Advanced, feature-rich UI components for complex functionality. Built on top of elements to create complete solutions.

Two Ways to Use Components

Option 1: From Source/Storybook

Clone Repository:

git clone https://github.com/Wai-Technologies/raaghu-react.git
cd raaghu-react
npm install

Usage:

// Import from local source
import RdsCompChart from '../raaghu-react/src/rds-comp-chart';
import RdsCompGrid from '../raaghu-react/src/rds-comp-grid';
import RdsCompDatepicker from '../raaghu-react/src/rds-comp-datepicker';

function Dashboard() {
  return (
    <div>
      <RdsCompChart type="bar" data={chartData} />
      <RdsCompGrid data={userData} columns={columns} />
    </div>
  );
}

Option 2: NPM Package (Recommended)

Installation:

## Install main package
npm install @waiin/raaghu-react

## Install theme package
npm install @waiin/raaghu-react-themes

Setup Theme:

import '@waiin/raaghu-react-themes/build/styles/default.css';

Usage:

import { RdsCompChart, RdsCompGrid, RdsCompDatepicker } from '@waiin/raaghu-react';

function Dashboard() {
  return (
    <div>
      <RdsCompChart type="bar" data={chartData} />
      <RdsCompGrid data={userData} columns={columns} />
    </div>
  );
}

Most Popular Components

Chart Components

Data visualization made simple:

Using NPM Package:

import { RdsCompChart } from '@waiin/raaghu-react';

<RdsCompChart
  type="bar"
  data={{
    labels: ['Q1', 'Q2', 'Q3', 'Q4'],
    datasets: [{ data: [100, 150, 200, 180] }]
  }}
  height={300}
/>

Using From Source:

import RdsCompChart from '../raaghu-react/src/rds-comp-chart';

<RdsCompChart
  type="bar"
  data={{
    labels: ['Q1', 'Q2', 'Q3', 'Q4'],
    datasets: [{ data: [100, 150, 200, 180] }]
  }}
  height={300}
/>

Available Types: bar, line, pie, doughnut, area, gauge

Data Grid

Powerful tables with sorting, filtering, pagination:

Using NPM Package:

import { RdsCompGrid } from '@waiin/raaghu-react';

<RdsCompGrid
  data={userData}
  columns={[
    { field: 'name', header: 'Name', sortable: true },
    { field: 'email', header: 'Email', filterable: true },
    { field: 'role', header: 'Role' }
  ]}
  pagination={true}
  pageSize={10}
/>

Using From Source:

import RdsCompGrid from '../raaghu-react/src/rds-comp-grid';

<RdsCompGrid
  data={userData}
  columns={[
    { field: 'name', header: 'Name', sortable: true },
    { field: 'email', header: 'Email', filterable: true },
    { field: 'role', header: 'Role' }
  ]}
  pagination={true}
  pageSize={10}
/>

Date & Time Pickers

Enhanced date/time selection:

Using NPM Package:

import { RdsCompDatepicker, RdsCompTimePicker } from '@waiin/raaghu-react';

<RdsCompDatepicker value={selectedDate} onChange={setSelectedDate} format="DD/MM/YYYY" />
<RdsCompTimePicker value={selectedTime} onChange={setSelectedTime} format="12" />

Using From Source:

import RdsCompDatepicker from '../raaghu-react/src/rds-comp-datepicker';
import RdsCompTimePicker from '../raaghu-react/src/rds-comp-time-picker';

<RdsCompDatepicker value={selectedDate} onChange={setSelectedDate} format="DD/MM/YYYY" />
<RdsCompTimePicker value={selectedTime} onChange={setSelectedTime} format="12" />

AI Chat Interface

Modern chat components:

Using NPM Package:

import { RdsCompAiChatBot } from '@waiin/raaghu-react';

<RdsCompAiChatBot
  title="Customer Support"
  placeholder="Type your message..."
  onSend={handleMessage}
  showTyping={true}
/>

Using From Source:

import RdsCompAiChatBot from '../raaghu-react/src/rds-comp-ai-chat-bot';

<RdsCompAiChatBot
  title="Customer Support"
  placeholder="Type your message..."
  onSend={handleMessage}
  showTyping={true}
/>

Quick Comparison

Feature	NPM Package	From Source
Setup	npm install	Clone repository
Updates	npm update	Manual git pull
Bundle Size	Optimized	Full source
Customization	Limited	Full access
Best For	Production apps	Development/customization

Available Categories

We have 52 components organized in 6 main categories:

• 📊 Charts & Data (13) - All chart types, data grids, visualizations
• 🤖 AI & Chat (9) - Chatbots, messaging, AI interfaces
• 📝 Forms & Input (5) - Date pickers, color picker, e-signature
• 🎨 Media & Content (8) - Video/audio players, text editor, code display
• 🧭 Navigation & Layout (7) - Grids, kanban boards, tree structures
• 🔧 Utility & Interactive (10) - Notifications, spinners, maps, tours

Quick Examples

Dashboard Chart:

import { RdsCompChartLine } from '@waiin/raaghu-react';
<RdsCompChartLine data={salesData} responsive />

User Management Grid:

import { RdsCompGrid } from '@waiin/raaghu-react';
<RdsCompGrid data={users} columns={userColumns} pagination />

Event Date Picker:

import { RdsCompDatepicker } from '@waiin/raaghu-react';
<RdsCompDatepicker value={eventDate} onChange={setEventDate} />

Support Chat:

import { RdsCompAiChatBot } from '@waiin/raaghu-react';
<RdsCompAiChatBot title="Help Desk" onSend={handleSupport} />

Getting Started

1. Choose your approach (NPM package or source)
2. Pick a category that fits your needs
3. Browse Storybook for interactive examples and full component lists
4. Copy code examples and customize for your project

Package Info

• Single Package: @waiin/raaghu-react contains all components
• Theme Package: @waiin/raaghu-react-themes for styling
• Browse All: Visit our Storybook for complete component catalog
• TypeScript: Full type definitions included
• Responsive: Mobile-first design
• Accessible: WCAG 2.1 AA compliant