🌟 RMG React Components

RMG React Components is a library of reusable, pre-styled React components built with TypeScript and Tailwind CSS.
This library helps you speed up development by providing clean, consistent UI building blocks.

📦 Installation

Install the package via NPM:

npm install rmg-react-components

You must also have React 18+ and ReactDOM installed:

npm install react react-dom

🚀 Usage

Importing Components

You can import individual components directly from the package:

import { RMGButton, RMGHeader, RMGInput, RMGImage, RMGText, MockupCard } from 'rmg-react-components';

Basic Example

import React from 'react';
import { RMGButton } from 'rmg-react-components';

function App() {
  return (
    <div>
      <RMGButton title="Click Me" onClick={() => alert("Button clicked!")} />
    </div>
  );
}

export default App;

🧩 Components Overview

RMGHeader

A flexible, bold header component.

Props:

• title: string – Header text
• subtitle?: string – Optional subtitle
• level?: 1 | 2 | 3 | 4 | 5 | 6 – Heading level (default: 1)
• align?: 'left' | 'center' | 'right' – Text alignment (default: 'left')
• variant?: 'primary' | 'secondary' | 'accent' – Color style (default: 'primary')
• className?: string – Custom classes

RMGText

A styled text component for content.

Props:

• children: React.ReactNode – Text/content
• size?: 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' – Font size (default: 'base')
• weight?: 'light' | 'normal' | 'medium' | 'semibold' | 'bold' – Font weight (default: 'normal')
• variant?: 'primary' | 'secondary' | 'muted' | 'accent' | 'error' | 'success' – Color style (default: 'primary')
• align?: 'left' | 'center' | 'right' | 'justify' – Text alignment (default: 'left')
• className?: string – Custom classes

RMGInput

A styled input field.

Props:

• type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search' – Input type (default: 'text')
• placeholder?: string
• value?: string
• onChange?: (value: string) => void
• label?: string
• error?: string
• required?: boolean
• disabled?: boolean
• size?: 'sm' | 'md' | 'lg' – Input size (default: 'md')
• variant?: 'default' | 'filled' | 'outlined' – Style variant (default: 'default')
• className?: string – Custom classes

RMGButton

A customizable button component.

Props:

• title: string – Button text
• onClick?: () => void
• type?: 'button' | 'submit' | 'reset' – Button type (default: 'button')
• variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' – Style variant (default: 'primary')
• size?: 'sm' | 'md' | 'lg' | 'xl' – Button size (default: 'md')
• disabled?: boolean
• loading?: boolean
• fullWidth?: boolean
• icon?: React.ReactNode
• iconPosition?: 'left' | 'right' – Icon position (default: 'left')
• className?: string – Custom classes

RMGImage

A responsive image component with loading and error states.

Props:

• src: string – Image source
• alt: string – Alt text
• width?: number | string
• height?: number | string
• objectFit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down' – Object fit (default: 'cover')
• rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full' – Border radius (default: 'md')
• shadow?: 'none' | 'sm' | 'md' | 'lg' | 'xl' – Shadow style (default: 'md')
• loading?: 'lazy' | 'eager' – Loading strategy (default: 'lazy')
• placeholder?: string – Placeholder text on error
• className?: string – Custom classes

✅ Requirements

• React 18 or newer
• Tailwind CSS (optional but recommended for full styling)

📄 License

MIT © 2025 Gila