Overview

Basic UI building blocks - buttons, inputs, cards, and more. The foundation of your application.

Two Ways to Use Elements

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 RdsInput from '../raaghu-react/src/rds-input';
import RdsCard from '../raaghu-react/src/rds-card';

function LoginForm() {
  return (
    <RdsCard>
      <RdsInput label="Email" type="email" />
      <RdsInput label="Password" type="password" />
    </RdsCard>
  );
}

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 { RdsInput, RdsCard } from '@waiin/raaghu-react';

function LoginForm() {
  return (
    <RdsCard>
      <RdsInput label="Email" type="email" />
      <RdsInput label="Password" type="password" />
    </RdsCard>
  );
}

Available Categories

We have 50+ elements organized in 8 main categories:

• 📝 Forms (13) - Inputs, selects, checkboxes, sliders, file uploads
• 🎯 Buttons (6) - Primary buttons, icon buttons, FABs, toggles
• 📄 Display (12) - Cards, typography, avatars, badges, alerts
• 🧭 Navigation (9) - App bars, tabs, menus, breadcrumbs, pagination
• 💬 Feedback (9) - Loaders, modals, tooltips, progress indicators
• 📐 Layout (5) - Grids, dividers, containers, backdrops
• 🔄 Interactive (4) - Accordions, carousels, search, collapse
• 🔧 Specialized (4) - Counters, steppers, timelines, lists

Common Props

All elements support standard options:

• Size: small, medium, large
• Variant: Different visual styles
• State: disabled, loading, error
• Styling: className, custom CSS

Getting Started

1. Choose your approach (NPM package or source)
2. Pick elements that fit your UI needs
3. Browse Storybook for interactive examples and complete element catalog
4. Start building with the essential elements shown above

Package Info

• Single Package: @waiin/raaghu-react contains all elements
• Theme Package: @waiin/raaghu-react-themes for styling
• Browse All: Visit our Storybook for complete element catalog
• Tree-shakable: Import only what you need
• TypeScript: Full type definitions included