Overview

Pre-built application layouts with navigation, headers, and responsive design.

Two Ways to Use Layouts

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 RdsCompAppShell from '../raaghu-react/src/rds-comp-app-shell';

function App() {
  return (
    <RdsCompAppShell
      title="My App"
      navigation={[
        { label: 'Dashboard', href: '/' },
        { label: 'Users', href: '/users' }
      ]}
      user={{ name: 'John Doe' }}
    >
      <YourContent />
    </RdsCompAppShell>
  );
}

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

function App() {
  return (
    <RdsCompAppShell
      title="My App"
      navigation={[
        { label: 'Dashboard', href: '/' },
        { label: 'Users', href: '/users' }
      ]}
      user={{ name: 'John Doe' }}
    >
      <YourContent />
    </RdsCompAppShell>
  );
}

Layout Options

App Shell Layout

Complete application structure for business apps:

Using NPM Package:

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

<RdsCompAppShell
  title="My App"
  navigation={[
    { label: 'Dashboard', href: '/' },
    { label: 'Users', href: '/users' }
  ]}
  user={{ name: 'John Doe' }}
>
  <YourContent />
</RdsCompAppShell>

Using From Source:

import RdsCompAppShell from '../raaghu-react/src/rds-comp-app-shell';

<RdsCompAppShell
  title="My App"
  navigation={[
    { label: 'Dashboard', href: '/' },
    { label: 'Users', href: '/users' }
  ]}
  user={{ name: 'John Doe' }}
>
  <YourContent />
</RdsCompAppShell>

Features:

• Responsive sidebar navigation
• Header with user menu
• Mobile hamburger menu
• Theme switching

Custom Layout

For unique designs:

Using NPM Package:

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

<RdsCompLayout
  header={<MyHeader />}
  sidebar={<MySidebar />}
  footer={<MyFooter />}
>
  <MyContent />
</RdsCompLayout>

Using From Source:

import RdsCompLayout from '../raaghu-react/src/rds-comp-layout';

<RdsCompLayout
  header={<MyHeader />}
  sidebar={<MySidebar />}
  footer={<MyFooter />}
>
  <MyContent />
</RdsCompLayout>